Skip to content

Update step-by-step-guide.mdx #43

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
a-bahdanau merged 1 commit into from
Mar 10, 2025
Merged

Update step-by-step-guide.mdx #43

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 20 additions & 20 deletions docs/v3/guidelines/dapps/tma/tutorials/step-by-step-guide.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
# 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.
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:
1. To connect your Mini App to Telegram, add the SDK script `telegram-web-app.js` using this code:

```html
<script src="https://telegram.org/js/telegram-web-app.js"></script>
```
:::tip
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:
It's best to disable caching in the HTML. To ensure your caching is turned off, specify these headers in your request:

```curl
Cache-Control: no-store, must-revalidate
Expand All @@ -19,43 +19,43 @@ Expires: 0
```
:::

2. Once the script is connected, a **[window.Telegram.WebApp](https://core.telegram.org/bots/webapps#initializing-web-apps)** object becomes available. You can read more about creating Mini App utilizing [`telegram-web-app.js`](/v3/guidelines/dapps/tma/tutorials/app-examples#basic-tma-example) here.
2. Once the script is connected, the **[window.Telegram.WebApp](https://core.telegram.org/bots/webapps#initializing-web-apps)** object becomes available. Learn more about creating Mini App using [`telegram-web-app.js`](/v3/guidelines/dapps/tma/tutorials/app-examples#basic-tma-example) here.

3. The modern way to connect SDK is an NPM package for Telegram Mini Apps SDK:
3. You can also connect the SDK using the NPM package for Telegram Mini Apps SDK:

```bash npm2yarn
npm i @twa-dev/sdk
```

You can find a guide for [`@twa-dev/sdk`](/v3/guidelines/dapps/tma/tutorials/app-examples#modern-tma-example ) here.
Find a guide for [`@twa-dev/sdk`](/v3/guidelines/dapps/tma/tutorials/app-examples#modern-tma-example ) here.

5. When your Mini App is ready and deployed to the web server, follow to the next step.
5. Once your Mini App is ready and deployed to a web server, move on 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:
To connect your Mini App to Telegram, you need to create a bot and set up a Mini App for it. Follow these steps:

### 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](https://t.me/BotFather).
- Start a chat with BotFather by clicking on the `START` button.
- Search for `@BotFather` in the search bar or click this link [https://t.me/BotFather](https://t.me/BotFather).
- Start a chat with BotFather by clicking `START`.

### 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.
- Send the `/newbot` command to BotFather.
- Choose a name for your bot (this is a display name and can contain spaces).
- Choose a username for your bot (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.
- Send the `/mybots` command to BotFather.
- Select your bot from the list and choose **Bot settings**.
- Select **Menu button**.
- Choose **Edit menu button URL** and send URL to your Telegram Mini App (e.g., a link from GitHub Pages deployment).

### 4. Accessing the Bot
### 4. Access 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
- Search for your bot using its username in Telegram's search bar.
- Click the button next to attach picker to launch your Telegram Mini App in messenger.
- You’re awesome!
Loading