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

Что это?#

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

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

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

Самый быстрый путь — мастер в панели#

В админ-панели: Магазин приложений → карточка «Магазин в Telegram» → «Настроить» (окно открывается прямо на витрине, уходить никуда не нужно). Мастер проведёт вас за четыре шага и большую часть работы сделает сам:

1. Название магазина.
2. Создание бота в @BotFather и проверка токена — токен вы просто вставляете в мастер.
3. Автоматическая настройка бота: имя, короткое описание, кнопка «Меню» с ссылкой на ваше меню, вебхук и команды — Meni выставляет всё через Telegram Bot API, вручную нажимать ничего не нужно.
4. Создание Mini App (/newapp в BotFather) и ссылка вашего магазина.

Прогресс сохраняется: мастер можно закрыть и продолжить позже.

Ниже — ручной путь: то же самое целиком через BotFather. Он пригодится, если бот уже настроен по-своему или вы хотите понимать, что именно происходит.

Быстрый старт (вручную)#

Шаг 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. Если вы делаете всё вручную через BotFather (шаги 2–4), он не требуется.

Токен нужен, чтобы отдать бота Meni — тогда панель настраивает его сама и бот начинает работать на вас:

• Приветствие и кнопка «Меню» — бот здоровается на языке гостя, с учётом вертикали (ресторан, салон, отель, магазин), и открывает витрину как Mini App
• Напоминания о записи — гость подписывается на напоминание о визите и подтверждает или отменяет его кнопкой «✅ Приду» / «❌ Отменить» прямо в чате
• Уведомления владельцу — новые записи и отмены приходят в ваш личный чат с ботом. Подписка включается приватной ссылкой вида t.me/{бот}?start=admin_…: она показывается в мастере на шаге «Готово» и в карточке интеграции. Ссылку не публикуйте — уведомления начнёт получать любой, кто её откроет. (Гость, в свою очередь, может посмотреть свои предстоящие записи командой /bookings в чате с ботом.)
• Переписка с гостями — отдельным каналом в разделе «Рабочий чат» → секция «Гости»: сообщения из Telegram падают в общий инбокс вместе с чатом сайта, WhatsApp, Instagram и почтой (для этого нужен свой бот — у одного бота может быть только один вебхук)

А ещё токен пригодится, если вы захотите автоматизировать что-то своё: отправлять сообщения клиентам, добавлять inline-кнопки в сообщения бота (см. раздел ниже) или подключить его к своей системе.

🔒 Не публикуйте 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://cenaly.ru

7. Short Name — короткое имя для ссылки (например, menu)

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

https://t.me/YourBot/menu

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

Отправьте BotFather:

/setmenubutton

1. Выберите бота
2. Отправьте URL:

https://cenaly.ru

3. Введите текст кнопки (например, Open Menu или 📋 Меню)

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

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

Отправьте BotFather:

/setdomain

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

cenaly.ru

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

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

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

Примеры#

Если 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 — это идентификатор вашей локации в cenaly.ru. Вы можете найти его в админ-панели или в URL вида https://LOCATION_ID.cenaly.ru.

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

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

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

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

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

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

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

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

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

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

Для дополнительной интеграции с 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

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

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

• Документация Telegram Mini Apps
• BotFather
• Telegram Bot API — Web App кнопки