Appearance
Publisher Integration Telegram Mini Apps
Instructions for Custom Trigger Setup
Step 1: Verifying the Connection of the TG Script
Please, make sure your app’s website is connected to tg via the script below:
html
<script src="https://telegram.org/js/telegram-web-app.js?56"></script>
According to the following documentation: https://core.telegram.org/bots/webapps#initializing-mini-apps
Step 2: Library Connection
Add the script to load the TelegramAdsController library into your HTML file. Make sure that the specified path is correct:
html
<script src="https://richinfo.co/richpartners/telegram/js/tg-ob.js"></script>
This script loads the TelegramAdsController class, which will be used to manage advertising functionality.
Step 3: Initializing the Controller
javascript
const richadsController = new window.TelegramAdsController();
richadsController.initialize({
pubId: "12345",
appId: "54321",
debug: true/false
});
Parameters for initialize:
pubId (required): The unique identifier of the publisher. appId (required): The application identifier. debug (optional): Enables debug mode to display additional information in the console.
Step 4: Setting Up an Event Handler
Add a click event handler for the button (the trigger can be any event). On click, the .triggerInterstitialVideo method is called to display the ad:
javascript
const button = document.getElementById('ad-button');
button.addEventListener('click', () => {
richadsController.triggerInterstitialVideo().then((result) => {
console.log(result);
}).catch((result) => {
console.log(result);
});
});
for processing rewarded variable response result:
resolve reject
Available ad formats: Video Ads / Interstitial Banner / Push style
For Video Ads call this method -
javascript
richadsController.triggerInterstitialVideo()
Interstitial banner
javascript
richadsController.triggerInterstitialBanner()
Push style
javascript
richadsController.triggerNativeNotification()
Embedded banner
javascript
Leave just initialize() and ask manager about #html-element integration
Step 5. Debug Mode
When debug: true is enabled, test ads will be returned for display. To disable the automatic ad display, contact the manager. In the loaded settings, automatic ad display on click will be turned off. Example of script integration:
html
<script type="text/javascript" src="https://richinfo.co/richpartners/telegram/js/tg-ob.js"></script>
<script type="text/javascript">
const richadsController = new TelegramAdsController();
richadsController.initialize({
pubId: "792361",
appId: "1396",
debug: true,
});
richadsController.triggerInterstitialVideo().then((result) => {
console.log(result);
}).catch((result) => {
console.log(result);
});
</script>