Перейти к основному содержимому

Как создать Telegram Mini App для виджета бронирования Restoplace

ВАЖНО

Рекомендуем устанавливать виджет, когда уже созданы и заполнены столы, создана схема зала, настроены условия работы и депозиты, оформлен дизайн виджета, а ваши сотрудники обучились работе с книгой резервов Restoplace

Что такое Telegram Mini App и как он работает с Restoplace​

Telegram Mini App (WebApp) — это мини‑приложение, которое открывается по кнопке прямо внутри Telegram, без перехода в браузер. Можно создать в телеграм боте вашего заведения.

Для Restoplace это означает, что ваш гость сможет:

  • открыть Telegram‑бота вашего заведения
  • нажать на кнопку «Бронь»
  • увидеть тот же виджет Restoplace, что и по ссылке (пример: https://riba-myaso.restoplace.ws), но прямо внутри Telegram
  • оформить бронь, банкет, купить билет или сертификат, как в обычном виджете

Технически миниапп — это тот же URL виджета, открытый через механизм web_app в Telegram.

Виджет Restoplace в telegram mini 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 попросит:

  • Название бота — то, что видит пользователь (например: Рыба и Мясо бронь столов)
  • Username (логин) бота — должен быть уникальным и заканчиваться на bot, например: riba_myaso_bot_booking_bot

5️⃣ После успешного создания BotFather пришлёт:

  • ссылку на бота вида https://t.me/riba_myaso_bot_booking_bot
  • токен вида: 1234567890:AA...XXXX (Токен нужен для разработки, но для базовой настройки WebApp‑кнопки не обязателен, если вы не пишете свой код)

6️⃣ Настраиваем имя, описание и аватарку (по желанию — всё тоже через @BotFather):

  • Можно изменить командами /setname (имя) /setdescription (описание) /setuserpic (фото)
  • либо нажмите на голубую кнопку «Open» откроется окно управления ботами → перейдите в вашего бота → произведите настройки → Edit info

редактирование информации бота telegram

Как привязать виджет 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» для сохранения

добавление кнопки бронирования в telegram mini app

После этого в вашем боте должна появиться кнопка, нажав по которой открывается виджет бронирования прямо в telegram.

warning

Если кнопка не появилась — подождите несколько минут, может потребоваться время и перезапустите телеграм

Виджет Restoplace в telegram mini app

Так виджет будет открываться в браузерной версии telegram

Дополнительные материалы​

Столы и залы. Как добавить?

Редактор столов и залов, залы, столы, иконки, фотографии, объекты бронирования

Схема зала. Как создать?

Включение схемы зала, редактор схемы, столы на схеме, стены и декор, цветовое оформление

Депозиты, предоплата. Как включить и настроить размеры депозитов

Где включаются и настраиваются депозиты? Как задать размеры депозитов и добавить исключения в размеры депозитов?

Дизайн виджета – как оформить дизайн виджета?

Как изменить цветовое оформление виджета для гостей, который устанавливается на вашем сайте и в соцсетях

Установка виджета бронирования столов в группе VK

Пошаговое руководство по установке виджета в группу вашего заведения в Вконтакте

Инструкция по синхронизации UDS c Restoplace

Как произвести интеграцию UDS с Restoplace. Как настроить UDS

Установка виджета бронирования для гостей RESTOPLACE на сайт — общий принцип

В этой инструкции вы узнаете, как установить HTML-код виджета бронирования Restoplace на Ваш сайт всего за несколько минут