Telegram Mini App — Пошаговое руководство

Что это?

Telegram Mini App позволяет вашим клиентам открывать цифровое меню ресторана прямо внутри Telegram — без установки приложений и без перехода в браузер. Меню выглядит как нативная часть Telegram: подстраивается под тему пользователя, поддерживает кнопку «Назад» и жесты.

Преимущества

  • 📱 Внутри Telegram — клиенту не нужно переключаться на браузер
  • 🎨 Нативный вид — цвета, шрифты и тема подстраиваются под Telegram
  • 🔗 Deep Links — прямая ссылка на меню конкретного ресторана
  • 🌍 Автоязык — язык берётся из настроек Telegram пользователя
  • 🍪 Без cookies — баннер cookie не показывается внутри Telegram

Быстрый старт

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

Откройте @BotFather в Telegram и отправьте:

/newbot
  1. Введите имя бота (например, Meni Menu Bot)
  2. Введите username (например, MeniMenuBot) — должен заканчиваться на Bot
  3. Сохраните полученный Bot Token (формат: 123456789:ABCdefGHI...)

💡 Если бот уже создан, переходите к Шагу 2.

Зачем нужен Bot Token?

Bot Token — это секретный ключ для программного управления ботом через Telegram Bot API. Для базовой настройки Mini App (шаги 2–4) он не требуется — всё делается через BotFather. Но он понадобится, если вы захотите:

  • Отправлять сообщения клиентам — уведомления о статусе заказа, акции, приветственные сообщения
  • Добавлять inline-кнопки в сообщения бота (например, кнопку «📋 Открыть меню» — см. раздел ниже)
  • Создать Telegram-бота для приёма заказов — бот может получать и обрабатывать заказы
  • Настроить Webhook — получать события от Telegram (нажатия кнопок, команды пользователей)
  • Интегрировать с CRM или POS-системой — автоматическая обработка заказов через бота

🔒 Не публикуйте Bot Token — любой, у кого есть токен, может управлять вашим ботом. Если токен скомпрометирован, отзовите его командой /revoke в BotFather.


Шаг 2 — Создайте Mini App

Отправьте BotFather команду:

/newapp
  1. Выберите бота из списка
  2. Title — название приложения (например, Meni)
  3. Description — описание (например, Digital restaurant menu)
  4. Photo — загрузите изображение 640×640 px (иконка приложения)
  5. GIF — анимация (необязательно). Чтобы пропустить, отправьте /empty
  6. Web App URL — укажите адрес вашего клиентского приложения:
https://meni.ge
  1. Short Name — короткое имя для ссылки (например, menu)

После этого у вас появится рабочая ссылка вида:

https://t.me/YourBot/menu

Шаг 3 — Добавьте кнопку «Меню» в чат бота

Отправьте BotFather:

/setmenubutton
  1. Выберите бота
  2. Отправьте URL:
https://meni.ge
  1. Введите текст кнопки (например, Open Menu или 📋 Меню)

Теперь при открытии чата с ботом внизу экрана появится кнопка, которая открывает ваше приложение.


Шаг 4 — Разрешите домен

Отправьте BotFather:

/setdomain

Выберите бота и укажите домен:

meni.ge

Это разрешит Telegram Web App работать на вашем домене и всех его поддоменах (например, locationid.meni.ge).


Deep Links — ссылки на конкретный ресторан

Telegram поддерживает параметр startapp, который передаётся в приложение при открытии. Используйте его для ссылок на конкретный ресторан:

Ссылка Что откроется
t.me/YourBot/menu Главная страница
t.me/YourBot/menu?startapp=LOCATION_ID Меню конкретного ресторана
t.me/YourBot/menu?startapp=LOCATION_ID__ru Меню на русском языке
t.me/YourBot/menu?startapp=LOCATION_ID__en Меню на английском языке

Примеры

Если LOCATION_ID вашего ресторана — lnc2w74z:

https://t.me/YourBot/menu?startapp=lnc2w74z
https://t.me/YourBot/menu?startapp=lnc2w74z__ru
https://t.me/YourBot/menu?startapp=lnc2w74z__en

📌 LOCATION_ID — это идентификатор вашей локации в meni.ge. Вы можете найти его в админ-панели или в URL вида https://LOCATION_ID.meni.ge.


Inline-кнопки из бота

Если ваш бот отправляет сообщения клиентам, вы можете добавить inline-кнопку, которая откроет меню:

Вариант 1 — Web App кнопка (открывается сразу)

{
  "inline_keyboard": [[{
    "text": "📋 Открыть меню",
    "web_app": {
      "url": "https://LOCATION_ID.meni.ge/ru"
    }
  }]]
}

Вариант 2 — Deep Link кнопка

{
  "inline_keyboard": [[{
    "text": "📋 Открыть меню",
    "url": "https://t.me/YourBot/menu?startapp=LOCATION_ID__ru"
  }]]
}

Что работает автоматически

После подключения внутри Telegram автоматически включаются:

Функция Описание
🎨 Тема Цвета приложения подстраиваются под тему Telegram (светлая/тёмная)
◀️ Кнопка «Назад» Нативная кнопка Telegram появляется при открытии карточки товара
📏 Viewport Приложение растягивается на весь экран
🔒 Защита от закрытия Вертикальный свайп не закроет приложение случайно
🌍 Автоязык Язык определяется из профиля Telegram, если не задан явно
🍪 Cookies Баннер cookie не отображается внутри Telegram

QR-коды для ресторанов

Уже существующие QR-коды с URL вида https://lnc2w74z.meni.ge продолжат работать как обычно — через браузер.

Для дополнительной интеграции с Telegram можно разместить на столах второй QR-код со ссылкой на бота:

https://t.me/YourBot/menu?startapp=lnc2w74z

Проверка работоспособности

  1. Откройте ссылку https://t.me/YourBot/menu на телефоне
  2. Нажмите Start (если открываете бота впервые)
  3. Нажмите кнопку 📋 Меню в нижней панели чата
  4. Убедитесь, что приложение открылось и загрузило меню
  5. Попробуйте открыть deep link: https://t.me/YourBot/menu?startapp=LOCATION_ID

Частые проблемы

Проблема Решение
Приложение не открывается Проверьте, что домен meni.ge разрешён через /setdomain
Белый экран Убедитесь, что Web App URL указан как https://meni.ge (HTTPS обязательно)
startapp не работает Проверьте формат: LOCATION_ID (без пробелов, спецсимволов). Разделитель для языка — двойное подчёркивание __
Тема не применяется Telegram Mini App SDK должен быть подключён (обновите клиентское приложение)

Полезные ссылки