> For the complete documentation index, see [llms.txt](https://tads.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://tads.gitbook.io/docs/getting-started/publishers/embed-widget/react.md).

# React

## 1. Insert widget code in the app

Install the [react-tads-widget](https://www.npmjs.com/package/react-tads-widget) package and initialize the widget:

{% stepper %}
{% step %}

#### Installation

```
npm install react-tads-widget
```

{% endstep %}

{% step %}

#### Add widget init code in your index.js

```jsx
import { TadsWidgetProvider } from 'react-tads-widget';

root.render(
  <React.StrictMode>
    <TadsWidgetProvider>
        <App />
    </TadsWidgetProvider>
  </React.StrictMode>
);
```

{% endstep %}

{% step %}

#### Add widget ad show code in your React component using the following code example for the selected format:

### Text-Graphic Block (TGB)

```jsx
import React from "react";
import { TadsWidget } from 'react-tads-widget';

const PageWithAds: React.FC = () => {
    const rewardUserByClick = () => {
        console.log("User rewarded for click");
    };

    const onAdsNotFound = () => {
        console.log("Not found ads for this user");
    }

    return (
        <div className="container">
            <TadsWidget id="unique-widget-id" type="static" debug={false} onClickReward={rewardUserByClick} onAdsNotFound={onAdsNotFound} />
        </div>
    );
}

export default PageWithAds;
```

### Fullscreen banner

```jsx
import React from "react";
import { TadsWidget, renderTadsWidget } from 'react-tads-widget';

const PageWithAds: React.FC = () => {
    const rewardUserByShow = () => {
        console.log("User rewarded for impression");
    };

    const onAdsNotFound = () => {
        console.log("Not found ads for this user");
    }

    const showFullScreen = () => {
        renderTadsWidget({ id: 'unique-widget-id', type: 'fullscreen' })
    }

    return (
        <div className="container">
            <button onClick={showFullScreen}>SHOW FULLSCREEN</button>

            <TadsWidget id="unique-widget-id" type="fullscreen" debug={false} onAdsNotFound={onAdsNotFound} onShowReward={rewardUserByShow} />
        </div>
    );
}

export default PageWithAds;
```

{% endstep %}
{% endstepper %}

## 2. Add your widget ID&#x20;

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

<table><thead><tr><th width="160">Parameter</th><th width="97"></th><th width="104">Type</th><th width="102">Default</th><th>Description</th></tr></thead><tbody><tr><td>id</td><td>required</td><td>string</td><td></td><td>Your widget ID that you received from your personal account</td></tr><tr><td>type</td><td>required</td><td>string</td><td>static</td><td>Type of your widget. It can be 'static' or 'fullscreen'</td></tr><tr><td>debug</td><td>optional</td><td>boolean</td><td>false</td><td>Flag which you can use for development mode (it doesn't collect data in your ads account and doesn't requests real ads)</td></tr><tr><td>onShowReward</td><td>optional</td><td>function</td><td>null</td><td>Callback which will be called after user watches ad</td></tr><tr><td>onClickReward</td><td>optional</td><td>function</td><td>null</td><td>Callback which will be called after user clicks ad</td></tr><tr><td>onAdsNotFound</td><td>optional</td><td>function</td><td>null</td><td>Callback which will be called if we don't find ads for user</td></tr></tbody></table>


---

# 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/react.md?ask=<question>&goal=<endgoal>
```

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