Adding a mini app to a Telegram bot

A mini app is a Telegram element that is essentially a web page opened inside Telegram or Max; in Telegram it uses the extended capabilities of the Mini App Api. All mini apps are integrated into bots. The design of mini apps is adapted to the iOS and Android look and feel.

To add a mini app to a Telegram bot, you first need to create a bot and connect it to puzzlebot.
Learn more: How to create a new Telegram bot

Adding a mini app for Max is described in a separate guide:

• Adding a mini app to a Max bot

Adding a mini app to a Telegram bot

Setting up the mini app in BotFather

In @BotFather you can enable a special mode that launches the mini app from a button in the bot profile or from a Start link https://t.me/username_bot?startapp. You can also create Short links such as https://t.me/username_bot/miniapp. Let's look at both options.

The "Open app" button and the Start link

To enable Mini App mode:

1. Open @BotFather.

2. Send /mybots and select the bot you need.

3. Open Bot Settings and select Configure Mini App.

4. Tap Enable Mini App.

5. As the last step, open: your puzzlebot account — Constructor — select an already created and published mini app — Settings — copy the Technical link and send it to @BotFather.
   Where to find the technical link is described in more detail below.

6. Done! The mini app can now be opened from the button in the Telegram bot's profile, as well as from a link like https://t.me/username_bot?startapp, where you replace username_bot with your bot's username.

Where to find the technical link

1. Go to the Constructor.

Done! The mini app can now be opened from the button in the Telegram bot's profile, as well as from a link like https://t.me/username_bot?startapp, where you replace username_bot with your bot's username.

Types of mini app links

In the puzzlebot account, there are only 2 types of mini app links:

1. Direct link — looks like https://t.me/username_bot?startapp=10e220a237218f61 for Telegram or https://max.ru/id123456_bot?startapp=10e220a237218f61 for Max, with the ID of the mini app at the end of the link.
   Where to use it: you can insert it into text, buttons and anywhere else to open the mini app.
   
   Important! To use it with a Telegram bot, you need to enable Mini App mode in @BotFather, as described above.
   

2. Technical link — looks like https://cp.puzzlebot.top/web_page/test.html?id=10e220a237218f61, with the ID of the mini app at the end of the link.
   Where to use it: it is intended only for setting up Mini App mode in Telegram and for creating short links in @BotFather, as well as for enabling a mini app in a Max bot.
   
   You cannot open it directly or insert it into text as a link.

Important! Telegram clients currently have problems with Direct links. We have described how to fix the error.

Besides the Direct link, you can also open a mini app with a Short link like https://t.me/username_bot/miniapp and with a Start link that opens the mini app's main page, https://t.me/username_bot?startapp, both described above.

Short link to a mini app

An example of a short link to a mini app.

To create a short link to a mini app:

1. Open @BotFather.

2. Send /newapp.

3. Select the bot you need and follow the steps: enter the mini app name — a description — send an image (for example from Yandex) — send a GIF or send /empty.

4. At the step that asks for a link, send the Technical link again: your puzzlebot account — Constructor — select an already created and published mini app — Settings — copy the Technical link and send it to @BotFather (see the step-by-step instructions with screenshots above).

5. As the last step, set the link ending, for example "price".

Creating the mini app's content

Once you have added the mini app to your Telegram bot and set up the links, you can start creating its content and appearance:

• Setting up a mini app

• Adding a mini app to a Max bot