` where you want to render the ad: ```html

``` {% endstep %} {% step %} #### Add the following code for the selected format to your HTML document to initialize the widget: ### Text-Graphic Block (TGB) ```html ``` ### Fullscreen banner ```html ``` {% endstep %} {% endstepper %}

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:** ```html ``` 2. **Insert the following `

` where you want to render the ad:** ```html

``` 3. **Add the following code for the selected format after `

` to initialize the widget** #### Text-Graphic Block (TGB) ```html ``` #### Fullscreen banner ```html ```

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

## --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://tads.gitbook.io/docs/getting-started/publishers/embed-widget/vanilla-js.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.