Перейти к основному содержимому

TMA Launch Tutorial

Telegram Mini Apps (TMA) are web applications that run inside the Telegram messenger. They are built using web technologies — HTML, CSS, and JavaScript. Telegram Mini Apps can be used to create DApps, games, and other types of apps that can be run inside Telegram.

Create your App​

  1. To connect your Mini App to Telegram, place the SDK script telegram-web-app.js using this code:
<script src="https://telegram.org/js/telegram-web-app.js"></script>
подсказка

It's preferable to switch off cache in the HTML. To ensure your cache is switched off, specify headers in your request according to the following:

Cache-Control: no-store, must-revalidate
Pragma: no-cache
Expires: 0

  1. Once the script is connected, a window.Telegram.WebApp object becomes available. You can read more about creating Mini App utilizing telegram-web-app.js here.

  2. The modern way to connect SDK is an NPM package for Telegram Mini Apps SDK:

npm i @twa-dev/sdk

You can find a guide for @twa-dev/sdk here.

  1. When your Mini App is ready and deployed to the web server, follow to the next step.

Setting Up a Bot for the App​

To connect your Mini App to Telegram, you need to create a bot and set up a Mini App for it. Follow these steps to set up a new Telegram bot:

1. Start a Chat with BotFather​

  • Open the Telegram app or web version.
  • Search for @BotFather in the search bar or follow the link https://t.me/BotFather.
  • Start a chat with BotFather by clicking on the START button.

2. Create a New Bot​

  • Send /newbot command to BotFather.
  • BotFather will ask you to choose a name for your bot. This is a display name and can contain spaces.
  • Next, you'll be asked to choose a username for your bot. This must end in bot (e.g., sample_bot) and be unique.

3. Set Up Bot Mini App​

  • Send /mybots command to BotFather.
  • Choose your bot from the list and the Bot settings option
  • Choose Menu button option
  • Choose Edit menu button URL option and send URL to your Telegram Mini App, for example link from GitHub Pages deploy.

4. Accessing the Bot​

  • You can now search for your bot using its username in Telegram's search bar.
  • Press the button next to attach picker to launch your Telegram Mini App in messenger
  • You’re awesome!