# Как создать Telegram Mini App: пошаговая инструкция

> Mini App — это обычная веб-страница по HTTPS, которую Telegram открывает внутри чата. Нужны бот из BotFather, страница со скриптом Telegram Web App, способ запуска (кнопка меню или ссылка) и проверка данных пользователя на сервере.

Дата: 2026-11-02 · Источник: https://oneswitch.ru/blog/kak-sozdat-telegram-mini-app-poshagovo/

Telegram Mini App — это веб-приложение, которое открывается внутри Telegram без перехода в браузер. Технически это обычная страница на HTML, CSS и JavaScript. Ниже шаги, которые нужны, чтобы запустить первую версию.

## Шаг 1. Создайте бота

Mini App всегда привязан к боту. В Telegram откройте @BotFather, отправьте команду `/newbot`, задайте имя и username (он заканчивается на `bot`). BotFather выдаст токен бота. Токен храните только на сервере и не публикуйте в коде страницы.

## Шаг 2. Подготовьте страницу

Telegram открывает адрес, который вы укажете, поэтому страницу нужно где-то разместить. Главное требование: адрес должен работать по **HTTPS**. Подойдёт обычный хостинг, VPS или статический хостинг. Для первой версии хватит одного `index.html`.

## Шаг 3. Подключите Telegram Web App

В `<head>` добавьте скрипт Telegram и обратитесь к объекту `Telegram.WebApp`:

```html
<script src="https://telegram.org/js/telegram-web-app.js"></script>
<script>
  const tg = window.Telegram.WebApp;
  tg.ready();    // сообщаем Telegram, что страница загружена
  tg.expand();   // раскрываем окно на всю высоту
  document.getElementById('hello').textContent =
    'Привет, ' + (tg.initDataUnsafe.user?.first_name || 'гость');
</script>
```

Что полезно знать на старте:

- `tg.themeParams` отдаёт цвета темы Telegram, по ним можно подстроить оформление под светлую и тёмную тему.
- `tg.MainButton` — большая кнопка внизу окна для главного действия, например «Оформить заявку».
- `tg.BackButton` — кнопка «назад» в шапке окна.

## Шаг 4. Свяжите Mini App с ботом

Открыть Mini App можно несколькими способами:

1. **Кнопка меню бота.** Задаётся в настройках бота через @BotFather: указываете адрес страницы, и кнопка появляется рядом с полем ввода.
2. **Кнопка в сообщении.** Бот отправляет inline-кнопку или кнопку клавиатуры с типом `web_app` и адресом страницы.
3. **Прямая ссылка.** Команда `/newapp` у @BotFather регистрирует Mini App и даёт ссылку вида `t.me/ваш_бот/название`. Её можно разместить на сайте, в канале или превратить в QR-код.

## Шаг 5. Проверьте пользователя на сервере

Данные в `initDataUnsafe` приходят с клиента, поэтому им нельзя доверять: пользователь может подделать запрос. Если Mini App что-то записывает или показывает личные данные, отправляйте на сервер строку `tg.initData` и проверяйте подпись токеном бота. Как это сделать на Python, описано в статье [проверка initData в Telegram Mini App](/blog/proverka-initdata-telegram-mini-app-python/).

## Шаг 6. Проверьте на реальных устройствах

Откройте Mini App в Telegram на телефоне и на компьютере. Проверьте:

- светлую и тёмную тему;
- маленький экран и клавиатуру, которая закрывает поля ввода;
- что страница не ломается при медленном соединении;
- как работает кнопка «назад».

## Что добавить дальше

После первой версии обычно нужны уведомления пользователям ([как их настроить](/blog/uvedomleniya-v-telegram-mini-app/)), каталог с фильтрами ([архитектура каталога](/blog/katalog-v-telegram-mini-app-arhitektura/)) и связка с сайтом, который остаётся для поиска. Если вы выбираете между сайтом и Mini App, сравнение есть в статье [Mini App или сайт](/blog/telegram-mini-app-ili-sajt/). Ориентиры по цене собраны в материале [сколько стоит бот и Mini App](/blog/skolko-stoit-telegram-bot-i-mini-app/).

Если нужна готовая разработка под вашу задачу, посмотрите услугу [Telegram-боты и Mini App](/uslugi/telegram-boty-i-mini-app/) и [примеры работ](/raboty/).

## Частые вопросы

### Нужно ли уметь программировать, чтобы сделать Mini App?
Для простой страницы хватит базовых HTML и JavaScript. Если нужны база данных, авторизация, уведомления и оплата, потребуется серверная часть, и тогда лучше привлечь разработчика.

### Чем Mini App отличается от обычного бота?
Бот работает через сообщения и кнопки, а Mini App показывает полноценный интерфейс: каталог, формы, карточки, фильтры. Часто их используют вместе: бот отправляет уведомления, Mini App показывает данные.

### Нужен ли для Mini App отдельный сайт?
Нужна страница по HTTPS, и она может быть частью вашего сайта. Mini App рассчитан на открытие внутри Telegram, поэтому для поиска в Google и Яндексе нужен обычный сайт с текстами, а Mini App остаётся удобным интерфейсом для пользователей.

### Где хранить токен бота?
Только на сервере, в переменных окружения. В коде страницы и в репозитории токена быть не должно: тот, кто его получит, сможет управлять ботом.