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

2. 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.

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

npm

npm i @twa-dev/sdk

Yarn

yarn add @twa-dev/sdk

pnpm

pnpm add @twa-dev/sdk

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

5. 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!