Как создать Telegram Mini App для виджета бронирования Restoplace
Пошаговое руководство по добавлению кнопки бронирования в telegram боте заведения, через tg mini apps, при нажатии на которую будет открываться виджет бронирования прямо в телеграм
ВАЖНО: Рекомендуем устанавливать виджет, когда уже созданы и заполнены столы, создана схема зала, настроены условия работы и депозиты, оформлен дизайн виджета, а ваши сотрудники обучились работе с книгой резервов Restoplace
Что такое Telegram Mini App и как он работает с Restoplace
Telegram Mini App (WebApp) — это мини‑приложение, которое открывается по кнопке прямо внутри Telegram, без перехода в браузер. Можно создать в телеграм боте вашего заведения.
Для Restoplace это означает, что ваш гость сможет:
Технически миниапп — это тот же URL виджета, открытый через механизм web_app в Telegram.
Для Restoplace это означает, что ваш гость сможет:
- открыть Telegram‑бота вашего заведения
- нажать на кнопку «Бронь»
- увидеть тот же виджет Restoplace, что и по ссылке (пример: https://riba-myaso.restoplace.ws), но прямо внутри Telegram
- оформить бронь, банкет, купить билет или сертификат, как в обычном виджете
Технически миниапп — это тот же URL виджета, открытый через механизм web_app в Telegram.
Что подготовить заранее
Перед настройкой Telegram Mini App убедитесь, что у вас есть:
1️⃣ Прямая ссылка на виджет Restoplace
Пример формата: https://ИМЯ-БРЕНДА.restoplace.ws/
Где взять ссылку:
Где взять ссылку:
- в админке Restoplace, на экране заведений и адресов скопируйте ссылку (смотрите скриншот ниже)
- Переименовать ссылку на виджет можно в общих настройках заведения
2️⃣ Аккаунт в Telegram
Личный аккаунт, с которого вы будете создавать бота через @BotFather.
3️⃣ Название и аватарка бота (Опционально)
Чтобы бот выглядел как бренд заведения:
- логотип PNG/JPG (квадратный, 512×512 или больше)
- короткое имя и описание бота
Как создать Telegram‑бота через @BotFather
Все боты в Telegram создаются через специального бота @BotFather.
Если у вас уже есть созданный бот вашего заведения — пропустите этот пункт
Если у вас уже есть созданный бот вашего заведения — пропустите этот пункт
Создаём нового бота
1️⃣ Перейдите в бота @BotFather по ссылке https://t.me/botfather .
2️⃣ Нажмите Start / Запустить.
3️⃣ Отправьте команду: /newbot
4️⃣ BotFather попросит:
2️⃣ Нажмите Start / Запустить.
3️⃣ Отправьте команду: /newbot
4️⃣ BotFather попросит:
- Название бота — то, что видит пользователь (например: Рыба и Мясо бронь столов)
- Username (логин) бота — должен быть уникальным и заканчиваться на bot, например: riba_myaso_bot_booking_bot
- ссылку на бота вида https://t.me/riba_myaso_bot_booking_bot
- токен вида: 1234567890:AA...XXXX (Токен нужен для разработки, но для базовой настройки WebApp‑кнопки не обязателен, если вы не пишете свой код)
- Можно изменить командами /setname (имя) /setdescription (описание) /setuserpic (фото)
- либо нажмите на голубую кнопку «Open» откроется окно управления ботами → перейдите в вашего бота → произведите настройки → Edit info
Как привязать виджет Restoplace к боту через Mini App (кнопка)
Наша цель: при нажатии на кнопку в боте открывается виджет Restoplace по ссылке: https://ИМЯ-БРЕНДА.restoplace.ws/
Как создать кнопку
1️⃣ Перейдите в бота @BotFather по ссылке https://t.me/botfather .
2️⃣ Нажмите на голубую кнопку «Open» → откроется окно управления ботами → перейдите в вашего бота → Mini Apps
3️⃣ Выберите тип кнопки: Menu Button
4️⃣Вставьте ссылку на ваш виджет Restoplace (например: https://riba-myaso.restoplace.ws/ ) и назовите кнопку (лучше коротко, например «Бронь»)
5️⃣ Нажмите кнопку «Save» для сохранения
2️⃣ Нажмите на голубую кнопку «Open» → откроется окно управления ботами → перейдите в вашего бота → Mini Apps
3️⃣ Выберите тип кнопки: Menu Button
4️⃣Вставьте ссылку на ваш виджет Restoplace (например: https://riba-myaso.restoplace.ws/ ) и назовите кнопку (лучше коротко, например «Бронь»)
5️⃣ Нажмите кнопку «Save» для сохранения
После этого в вашем боте должна появиться кнопка, нажав по которой открывается виджет бронирования прямо в telegram.
Если кнопка не появилась — подождите несколько минут, может потребоваться время и перезапустите телеграм
Прочитайте ещё
Пошаговое руководство по установке виджета бронирования RESTOPLACE в группу вашего заведения в Вконтакте
Как добавить и изменить столы и залы в редакторе Restoplace
Как создать схему зала со стенами, столами и декором, в редакторе сервиса бронирования столов Restoplace
Где включаются и настраиваются депозиты? Как задать размеры депозитов и добавить исключения?
Как изменить цветовое оформление виджета для гостей, который устанавливается на вашем сайте и в соцсетях
Как произвести интеграцию UDS с Restoplace. Как настроить UDS
В этой инструкции вы узнаете, как установить HTML-код виджета бронирования Restoplace на Ваш сайт