Vanilla JS

1. Insert widget code in the app

You can integrate the widget using native JavaScript. Add the following code to your project, ensuring that the tads script is loaded beforehand:

1

Insert the following script into <head> or in the end of <body> in your HTML document:

<script src="https://w.tads.me/widget.js"></script>
2

Insert the following <div> where you want to render the ad:

<div id="tads-container-YOUR_WIDGET_ID"></div>
3

Add the following code for the selected format to your HTML document to initialize the widget:

Text-Graphic Block (TGB)

<script>
    const adsNotFoundCallback = () => {
        console.log('No ads found to show');
        // Write your code here in case we couldn't display ad
    };

    // Callback for REWARDED format
    const onClickRewardCallback = (adId) => {
        console.log('Clicked ad:', adId);
    };

    const adController = window.tads.init({
        widgetId: YOUR_WIDGET_ID,
        type: 'static',
        debug: false, // Use 'true' for development and 'false' for production
        onClickReward: onClickRewardCallback,
        onAdsNotFound: adsNotFoundCallback
    });

    adController.loadAd()
        .then(() => adController.showAd())
        .catch((err) => {
            console.log(err);
            adsNotFoundCallback();
        });
</script>

Fullscreen banner

<script>
    document.addEventListener("DOMContentLoaded", function() {
        const WIDGET_ID = "your_widget_id";

        // Use 'true' for development and 'false' for production
        const IS_DEBUG = true;
        
        // The HTML element ID that triggers the display of ads on click.
        const btnIdSelector = "your_clickable_selector";  
        
        // Callback for REWARDED format.
        const onShowRewardCallback = (result) => {
            console.log('Show ads, reward user:', result);
        };

        // Callback for no ads response
        const onAdsNotFound = () => {
            console.log('Callback which calls if no ads found to show',);
        }

        const adController = window.tads.init({
          widgetId: WIDGET_ID,
          type: 'fullscreen',
          debug: IS_DEBUG,
          onShowReward: onShowRewardCallback,
          onAdsNotFound: onAdsNotFound,
        });
        
        // Use your button or link HTML selector for getElementById
        document.getElementById(btnSelector).addEventListener('click', () => {
          adController
            .then(() => adController.showAd())
            .catch((result) => {
              console.log(result);
            });
        });
    });
</script>
Alternative widget code (async)

If you need to speed up page loading, you can use the alternative widget code that includes the async attribute. This setup method requires advanced setup and is recommended for experienced webmasters:

  1. Insert the following script into any place of your HTML document:

<script src="https://w.tads.me/widget.js" async></script>

  1. Insert the following <div> where you want to render the ad:

<div id="tads-container-YOUR_WIDGET_ID"></div>

  1. Add the following code for the selected format after <div> to initialize the widget

Text-Graphic Block (TGB)

<script>
    const initTadsWidget = function() {
        const adsNotFoundCallback = () => {
            console.log('No ads found to show');
            // Write your code here in case we couldn't display ad
        };

        function initAdController() {
            const adController = window.tads.init({
                widgetId: YOUR_WIDGET_ID,
                debug: false, // Use 'true' for development and 'false' for production
                onShowReward: (adId) => {
                    console.log('Show ad:', adId);
                    // Write code here for reward user after ad showed or delete this func onShowReward
                },
                onClickReward: (adId) => {
                    console.log('Click on ad:', adId);
                    // Write code for reward user after ad cliked or delete this func onClickReward
                },
                onAdsNotFound: adsNotFoundCallback
            });

            adController.loadAd()
                .then(() => adController.showAd())
                .catch((err) => {
                    console.log(err);
                    adsNotFoundCallback();
                });
        }

        if (window.tads && window.tads.init) {
            initAdController();
        } else {
            let tadsInterval = setInterval(() => {
                if (window.tads && window.tads.init) {
                    clearInterval(tadsInterval);
                    initAdController();
                }
            }, 100);
        }
    };

    if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initTadsWidget);
    } else {
        initTadsWidget();
    }
</script>

Fullscreen banner

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const WIDGET_ID = "YOUR_WIDGET_ID"; // Replace on your WIDGET ID
    const IS_DEBUG = true; // Replace on false in production
    const BTN_ID = "your_clickable_selector"; // Replace on your button ID
    const TYPE = "fullscreen";

    let adController = null;
    let tadsReady = false;

    const onShowRewardCallback = (result) => {
      console.log("Show ads, reward user:", result);
    };

    const onAdsNotFound = () => {
      console.log("No ads found to show");
    };

    function waitForTadsReady(timeout = 5000) {
      return new Promise((resolve, reject) => {
        if (window.tads && typeof window.tads.init === "function") {
          return resolve();
        }

        const start = performance.now();
        const iv = setInterval(() => {
          if (window.tads && typeof window.tads.init === "function") {
            clearInterval(iv);
            resolve();
          } else if (performance.now() - start > timeout) {
            clearInterval(iv);
            reject(new Error("TADS widget script not loaded"));
          }
        }, 50);
      });
    }

    async function showAd() {
      try {
        if (!tadsReady) {
          await waitForTadsReady();
          tadsReady = true;
        }

        if (!adController) {
          adController =
            window.tads.controllers?.[WIDGET_ID] ||
            window.tads.init({
              widgetId: WIDGET_ID,
              type: TYPE,
              debug: IS_DEBUG,
              onShowReward: onShowRewardCallback,
              onAdsNotFound: onAdsNotFound,
            });
        }

        if (adController && typeof adController.showAd === "function") {
          adController.showAd().catch((err) => {
            console.error(`Error showing ad:`, err);
          });
        } else {
          console.warn("Ad controller not ready");
        }
      } catch (err) {
        console.error("Failed to load TADS:", err);
      }
    }

    const btn = document.getElementById(BTN_ID);
    if (!btn) {
      console.error("Button not found:", BTN_ID);
      return;
    }

    btn.addEventListener("click", showAd);
  });
</script>

2. Add your widget ID

Replace YOUR_WIDGET_ID with the corresponding widget ID you received from your personal account.

3. Set a reward (if needed)

If you want to incentivize users to view or click on the ads, add code to the onShowRewardCallback and onClickRewardCallback and onAdsNotFound functions to reward the user for viewing and/or clicking, respectively. You can config your widget using the following parameters

Parameter
Type
Default
Description

id

required

string

Your widget ID that you received from your personal account

type

required

string

static

Type of your widget. It can be 'static' or 'fullscreen'

debug

optional

boolean

false

Flag which you can use for development mode (it doesn't collect data in your ads account and doesn't requests real ads)

onShowReward

optional

function

null

Callback which will be called after user watches ad

onClickReward

optional

function

null

Callback which will be called after user clicks ad

onAdsNotFound

optional

function

null

Callback which will be called if we don't find ads for user

PreviousReactNextWebhooks

Last updated