Vanilla JS

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

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>

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

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

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

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();
           });
</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:

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

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

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

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

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>

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

3. Set a reward (if needed)

4. Add a script

Before using the native JavaScript widget, ensure that the following script is included in your project:

<script src="https://telegram.org/js/telegram-web-app.js"></script>

PreviousReact NextWidget Analysis

Last updated 3 months ago

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:

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>

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

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

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

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();
           });
</script>

Alternative widget code (async)

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

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

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

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

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>

Vanilla JS

1. Insert widget code in the app

2. Add your widget ID

3. Set a reward (if needed)

4. Add a script

Vanilla JS

1. Insert widget code in the app

2. Add your widget ID

3. Set a reward (if needed)

4. Add a script