Skip to content

How to integrate AdsGram?

Requirements

Insert script

To connect your Mini App to the AdsGram Ad Network, place the script sad.min.js in the <head> tag using this code:

html
<script src="https://sad.adsgram.ai/js/sad.min.js"></script>

Initialize AdsGram SDK

js
const AdController = window.Adsgram.init({ blockId: "your-block-id" });

More info about init function you can find in API Reference section.

your-block-id — you get from your account on https://partner.adsgram.ai
Detailed instruction on how to get blockId you can find in Get blockId section

Show banner

For now, we have only rewarded ad format, which mean you should give user reward when he watched ad till the end.
More info about show ad requirements.

In most cases, the code below is used inside the click handler.
For code examples with vanilla js, React, Unity check Code examples section.

js
AdController.show().then((result) => {
    // user watch ad till the end
    // your code to reward user
}).catch((result) => {
    // user get error during playing ad or skip ad
    // do nothing or whatever you want
})
ts
AdController.show().then((result: ShowPromiseResult) => {
    // user watch ad till the end
    // your code to reward user
}).catch((result: ShowPromiseResult) => {
    // user get error during playing ad or skip ad
    // do nothing or whatever you want
})

result has the following types:

ts
interface ShowPromiseResult {
    done: boolean; // true if user watch till the end, otherwise false
    description: string; // event description
    state: 'load' | 'render' | 'playing' | 'destroy'; // banner state
    error: boolean; // true if event was emitted due to error, otherwise false
}

INFO

showPromise becomes resolved if the user watches the ad till the end, otherwise rejected.

TIP

Chain promise with finally if you need to add any extra action after the ad ends playing, is skipped or gets an error.

Congratulations, you've just showed your first ad using AdsGram!

More Info