Vanilla JS

1. Insert widget code in the app

You can also 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>

  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 to your HTML document to initialize the widget:

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

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

    const onShowRewardCallback = (adId) => {
        console.log(Showed ad: ', adId);
    };

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

    adController.loadAd()
        .then(() => adController.showAd())
        .catch((err) => {
            console.log(err);
            adsNotFoundCallback();
        });
</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 after <div> to initialize the widget:

<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>

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 see all configuration parameters in our npm-package

PreviousReactNextWidget Analysis

Last updated