How to Create a Telegram Bot with @BotFather and Connect a Mini App
If you've already figured it out, What is mini XQ2QXZ in Telegram?The next step of — is to create the bot itself and connect the application to it. All this is done through one system bot —. @BotFatherwithout control panels and unnecessary registrations.
Below is the — classic method, by text commands. There is a newer one: BotFather has its own miniXQ3QXapp with buttons and forms instead of correspondence —, the step of creating a bot in it is shown in the screenshots in the article.Create a TG bot with @BotFather».
What's BotFather?
@BotFather — is the official Telegram bot, through which all other platform bots are created and configured. It communicates with regular text commands (starting with )./) and sends back the token, settings and prompts.
Step 1. Creating a bot by teams
- Open a dialogue with Telegram @BotFather (The official account has a confirmation tick.)
- Send a team.
/newbot. - Come up with the display name of the — bot that users see in the chat. It can be changed later.
- Think of username — as a unique technical bot address, be sure to end at
bot(for example,my_shop_bot). Changing it is more difficult than a name, it is worth choosing immediately meaningfully. - BotFather will send a token type
123456789:AA...— is the bot access key.
The — token is full access to the bot. Do not publish it in open source, screenshots and repositories. The correct place for it is — environment variable (file) .env) with limited read rights rather than a constant within the script. If the token is still “leaked” — recreate it by the team /token In BotFather, the old one will stop working.
Basic configuration via BotFather
After /newbot The bot already has a token, but so far there is no description, no avatar, no commands. It all comes down to the same dialogue:
/setdescription— text that users see in an empty chat before the first/start./setabouttext— is a short description in the bot profile./setuserpic— avatar./setcommands— list of slash commands with descriptions, which pops up by clicking "/" in the chat (one command per line:start - Запустить бота)./setjoingroups— allows or prohibits the addition of a bot to group chats./setprivacy— in groups: sees all messages in a row or only commands addressed to it.
The bot is technically ready. Next, the token is connected to its own code (for example, on Python through the aiogram or python-telegram-boton Node.js through Telegraf) via long polling or through webhook — and the bot begins to respond to messages.
Step 2. Connecting mini app to the bot
Mini app — is a regular web page (HTML/CSS/JS on HTTPS) that opens right inside Telegram. The BotFather has two ways to connect it.
Option A. Menu button (Menu Button)
The fastest way to add one mini app, which opens with a button to the left of the message input field:
/mybotsIn BotFather, select a bot.- Bot Settings → Menu Button → Configure menu button.
- Specify the HTTPS address of the application and the text of the button (for example, "Open directory").
The same can be done software without dialogue with BotFather — method. setChatMenuButton Bot API. This is convenient if the application address is generated automatically or changes with each depletion.
Variant B. Complete application via /newapp
/newappIn BotFather, select a bot.- Indicate the name of the annex and a short description.
- Download the cover (photo or short GIF) — without it BotFather will not complete the creation.
- Specify the HTTPS address of the application.
The application receives its own reference type t.me/botusername/appname and can be opened not only with a menu button, but also from online mode, group chats and a direct link — unlike Menu Button, which is available only from personal chat with a bot.
Minimum code mini app
On the application page, you need to connect the official SDK and inform Telegram that the application is ready to show:
<script src="https://telegram.org/js/telegram-web-app.js"></script>
<script>Telegram.WebApp.ready(); Telegram.WebApp.expand();</script>
ready() removes the boot system screen, expand() It opens the window to the full height of the screen. User data and a signature on the server that confirms that the request did come from Telegram, and not forged, lie in the Telegram.WebApp.initData — must be tested on backend before trusting the content.
Ready: The bot is created, configured and opens its own mini app. Then it remains to fill the application with the necessary logic — is already a task of ordinary web development, without the limitations specific to Telegram.