SDK Installation

In a React Project

Installing the SDK

To install the SDK using npm, please run the following command:

npm install --save ton-ai-sdk

Initializing the SDK

To initialize the SDK in a React project, import the SDK in your main file, like App.jsx:

import { TonAdInit } from 'ton-ai-sdk'

Then, initialize the SDK in the useEffect hook:

useEffect(() => {
  const result = TonAdInit({ appId: 'your-app-id'})
  console.log('TonAdInit', result)
}, [])

Tips

Please check How to Get AppId to learn how to get your AppId.

In Other Frameworks (e.g., Vue / Cocos Creator / Native Web)

Including via CDN

To include the SDK via CDN, add the following script tags to the HTML file of your program's entry point:

<html lang="en">
  <head>
     <!-- Add axios CDN -->
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <!-- Add React and ReactDOM -->
    <script src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
    <!-- Import ton-ai-sdk via CDN -->
    <script src="https://cdn.jsdelivr.net/npm/ton-ai-sdk/dist/index.umd.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ton-ai-sdk/dist/index.umd.css" />
  </head>
</html>

Here, we use React components to demonstrate ad playback.

Initializing the SDK

For other frameworks, you can initialize the SDK once the page fully loads:

<script>
  document.addEventListener('DOMContentLoaded', function () {
     if (window.TonAISdk) {
      // Initialize TonAd after the DOM is ready
      // Set debug=true during testing to get test ads
      window.TonAISdk.TonAdInit({ appId: 'Your-App-Id'})
     }
  })
</script>