React

1. Insert widget code in the app

Install the react-tads-widget package and initialize the widget:

1. Installation

   npm install react-tads-widget
   
2. Add widget init code in your index.js

   import { TadsWidgetProvider } from 'react-tads-widget';
   
   root.render(
     <React.StrictMode>
       <TadsWidgetProvider>
           <App />
       </TadsWidgetProvider>
     </React.StrictMode>
   );
   
3. Add widget ad show code in your React component using the following code examples for the selected format

   Text-Graphic Block (TGB)

   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

   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;
   

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