# Quick Start Guide This is a quick start guide, for the detailed information, please refer [3. For Publishers](/dmtp-sdk/03-web3-traffic-exchange-for-publishers.md) and [4. For Advertisers](/dmtp-sdk/04-web3-traffic-exchange-for-advertisers.md) ### Table of Contents * [Overview](#overview) * [Vanilla JavaScript Implementation](#vanilla-javascript-implementation) * [React Implementation](#react-implementation) * [Next.js Implementation](#react-implementation) * [Common Features](#common-features) * [API Reference](#api-reference) ### Overview The TMA (Telegram Mini App) SDK allows you to integrate advertising functionality into your Telegram Mini App. This guide covers implementation across three different frameworks: * Vanilla JavaScript * * React * * Next.js * ### Vanilla JavaScript Implementation #### 1. Include Required Scripts Add the following to your HTML `` section: ```html ``` Find your hashed wallet address in the Snippets seciton of the web app. #### 2. Initialize the SDK ```javascript if (TE && typeof TE.onLoad === 'function') { TE.onLoad() } else { console.error('SDK not loaded'); } ``` #### 3. Add Offer Wall Button ```html ``` ### React Implementation #### 1. SDK Integration Create a component to handle SDK initialization: ```jsx import { useEffect } from 'react'; function TMASDKProvider({ children }) { useEffect(() => { if (TE && typeof TE.onLoad === 'function') { TE.onLoad() } else { console.error('onLoad is not a function'); } }, []); return <>{children}; } ``` #### 2. Offer Wall Button Component ```jsx const OfferWallButton = () => { return ( ); }; ``` ### Next.js Implementation #### 1. Create BecScript Component Create a new file `components/BecScript.tsx`: ```typescript 'use client'; import Script from "next/script"; declare const TE: any; export default function BecScript() { return (