How to install TADS widget in TMA

Step 1: Initialize your Telegram Mini App

Before integrating the tads.me ad widget, make sure that you have initialized your application as described in the Telegram documentation:Initializing Mini Apps.

Step 2: Add the tads.me Widget Code

You can integrate the tads.me ad widget using either the React package or native JavaScript. Select your preferred method below:

Using React

Install the react-tads-widget package and initialize the widget using the following code:

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

const id = 1; // widget id which you get in your account on tads.me
const debug = true; // Should be "true" for dev mode and "false" for production

const rewardUserByClick = (result) => {
    console.log("User rewarded:", result);
    // Your reward logic here
};

const rewardUserByShow = (result) => {
    console.log("User rewarded:", result);
    // Your reward logic here
};

const onAdsNotFound = () => {
    console.log("Ads not found");
};

const App = () => (
  <div>
    <TadsWidget
      id={id}
      debug={debug}
      onShowReward={rewardUserByShow}
      onClickReward={rewardUserByClick}
      onAdsNotFound={onAdsNotFound}
    />
  </div>
);

export default App;