00:00Want to launch a Telegram mini-app without complex back-end code and monetize it with Monotag ads?
00:06In this video, a complete step-by-step guide is provided, plus a ready-to-use Blogger HTML file. Link is in the description.
00:15What will be built first, a lightweight web app will be published on Blogger.
00:20Then, a Telegram bot will be created with Botfather, and the Blogger app will be connected as a Telegram mini-app.
00:27Finally, Monotag's mini-app ad SDK will be integrated for rewarded and interstitial ads.
00:34Quick Overview
00:36Telegram mini-apps are web apps built with HTML, CSS, and JavaScript that run inside Telegram's WebView.
00:43Think of them like embedded websites that can go full-screen and access Telegram UX features.
00:49Pre-requisites
00:51A Blogger account where the provided HTML
00:55JS file will be pasted. Download link is in the description.
00:58A Telegram account to use Botfather for creating the bot token.
01:02A Monotag publisher account. If not created yet, the sign-up link is in the description.
01:08Section
01:09Step 1
01:10Import the mini-app into Blogger
01:14Open Blogger, create a new blog post or a new page, switch to HTML view, and paste the provided mini-app code from the description.
01:23Publish the page and copy the public URL. This will serve as the app's base URL inside Telegram's WebView.
01:30Keep the URL handy. It will be referenced in the Telegram setup and Monotag integration steps.
01:36Section
01:37Step 2
01:38Create the Telegram bot with Botfather
01:41In Telegram, search for eBotfather, verified, start the chat, and use the command, or newbot to create a new bot.
01:51Provide a display name and a unique username that ends with bot, like MaliceOnlineBot.
01:57Copy the bot token shown by Botfather. This token connects the bot to the mini-app, so store it safely.
02:04Section
02:05Step 3
02:06Attach the Blogger app as a Telegram mini-app
02:09Use Botfather commands to configure the bot's web app menu button and in-chat launch. Telegram loads the blogger page inside its web view.
02:18Set the web app URL as the blogger page link published in Step 1. This link will open as a mini-app from the bot.
02:25If a start parameter or deep links are needed later, they can be appended to the TME link for context passing.
02:32Section
02:33Step 4
02:34Verify the mini-app loads
02:36Open the bot, tap the attached web app button, and confirm the blogger app loads cleanly within Telegram.
02:43Ensure navigation works in a single page and avoid external pop-ups that Telegram web view may block.
02:50If content security issues appear, simplify scripts and keep assets HTTPS only for smooth web view rendering.
02:57Section
02:59Step 5
03:00Add Monotag ads for Telegram mini-apps
03:04Monotag provides a unified SDK for Telegram mini-apps with rewarded interstitial, rewarded pop-up, and in-app interstitial.
03:13The SDK script is added to HTML, and ads are triggered via simple JS calls.
03:19In the blogger HTML, include the Monotag mini-app SDK script, exactly as shown in the documentation, then call its functions after user actions, timers, or on-level completions.
03:32Choose rewarded formats to unlock features or content inside the mini-app after ad completion for higher engagement.
03:41Section
03:42Monotag account and setup
03:44If a Monotag account is not set up yet, the sign-up link is in the description.
03:50After approval, pick Telegram mini-app ad formats and generate the ad code or SDK keys.
03:56Paste the SDK snippet into the blogger HTML and initialize it early in the app.
04:01Then call show methods where rewards or interstitials should appear.
04:05Track performance using the Monotag dashboard reports and adjust placement and frequency for CTR and RPM improvements.
04:12Section
Comments