SDK Ad Integration Examples

React Example Code

Rewarded Ads

No need to preload ads; simply pop them up with one click. When a user clicks on the ad, a callback function is triggered, allowing you to handle post-click actions like granting rewards or items.

import React, { useEffect, useState } from 'react'
import { TonAdPopupShow } from 'ton-ai-sdk'

const SingleAdPopupDemo = () => {
  const blockId = 'your_block_id'
  const showPopup = () => {
    TonAdPopupShow({
      blockId,
      onAdClick: (ad) => {
        // Triggered when the ad is clicked
        console.log('Ad clicked:', ad)
        // Handle post-click logic here, such as granting rewards or items
        // sendReward()
      },
      onAdError: (error) => {
        // Triggered when ad loading fails
        console.error('Ad error:', error)
      },
    })
  }

  return (
    <button
      onClick={() => {
        showPopup()
      }}
    >
      {'Click & Show Ad'}
    </button>
  )
}

Native Ads

Fetch multiple ads at once, which can be seamlessly integrated into your app's content, providing a less intrusive ad experience for users.

import React, { useEffect, useState } from 'react'
import { TonAdPopupShow, GetMultiTonAd } from 'ton-ai-sdk'

const MultiAdPopupDemo = () => {
  const blockId = 'your_block_id'
  const [ads, setAds] = useState([])
  const limit = 5

  // Display Popup Ads
  const showAdPopup = (adTon) => {
    TonAdPopupShow({
      tonAd: adTon,
      onAdClick: (ad) => {
        // Triggered when the ad is clicked
        console.log('Ad clicked:', ad)
        // Handle post-click logic here, such as granting rewards or items
        // sendReward()
      },
      onAdError: (error) => {
        // Triggered when ad loading fails
        console.error('Ad error:', error)
      },
    })
  }

  useEffect(() => {
    // Fetch multiple ads
    const fetchAds = async () => {
      const { ads } = await GetMultiTonAd(blockId, limit)
      setAds(ads)
    }
    fetchAds()
  }, [])

  return (
    <div
      style={{
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
      }}
    >
      <span
        style={{
          fontSize: '18px',
          fontWeight: 'bold',
          marginBottom: '10px',
        }}
      >
        Ad List:
      </span>
      {/* Render UI items for multiple ads */}
      {ads?.map((ad) => {
        return (
          <div
            key={ad.adId}
            onClick={() => showAdPopup(ad)}
            style={{
              padding: '10px',
              margin: '5px',
              border: '1px solid #ccc',
              borderRadius: '5px',
              cursor: 'pointer',
            }}
          >
            {ad.text}
          </div>
        )
      })}
    </div>
  )
}

Vue Example Code

Tips

Coming soon

Unity Example Code

Tips

Coming Soon

Vanilla JS Example Code

Tips

Coming Soon