Telegram Mini App — Покрокова інструкція

Що це?#

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

Переваги#

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

Швидкий старт#

Крок 1 — Створіть бота#

Відкрийте @BotFather в Telegram і відправте:

/newbot

1. Введіть ім'я бота (наприклад, Cenaly Menu Bot)
2. Введіть username (наприклад, MeniMenuBot) — має закінчуватися на Bot
3. Збережіть отриманий Bot Token (формат: 123456789:ABCdefGHI...)

Навіщо потрібен Bot Token?#

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

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

Крок 2 — Створіть Mini App#

Відправте BotFather команду:

/newapp

1. Виберіть бота зі списку
2. Title — назва додатку (наприклад, Cenaly)
3. Description — опис (наприклад, Digital restaurant menu)
4. Photo — завантажте зображення 640×640 px (іконка додатку)
5. GIF — анімація (необов'язково). Щоб пропустити, відправте /empty
6. Web App URL — вкажіть адресу вашого клієнтського додатку:

https://cenaly.com

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

Після цього у вас з'явиться робоче посилання виду:

https://t.me/YourBot/menu

Крок 3 — Додайте кнопку «Меню» в чат бота#

Відправте BotFather:

/setmenubutton

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

https://cenaly.com

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

Тепер при відкритті чату з ботом внизу екрану з'явиться кнопка, яка відкриває ваш додаток.

Крок 4 — Дозвольте домен#

Відправте BotFather:

/setdomain

Виберіть бота і вкажіть домен:

cenaly.com

Це дозволить Telegram Web App працювати на вашому домені і всіх його піддоменах (наприклад, locationid.cenaly.com).

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

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

Якщо ваш бот відправляє повідомлення клієнтам, ви можете додати inline-кнопку, яка відкриє меню:

Варіант 1 — Web App кнопка (відкривається одразу)#

{
  "inline_keyboard": [[{
    "text": "📋 Відкрити меню",
    "web_app": {
      "url": "https://LOCATION_ID.cenaly.com/ru"
    }
  }]]
}

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

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

Що працює автоматично#

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

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

Вже існуючі QR-коди з URL виду https://lnc2w74z.cenaly.com продовжать працювати як зазвичай — через браузер.

Для додаткової інтеграції з 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 кнопки