Модуль бронирования на сайт: установка через iframe
Как установить модуль бронирования через iframe: где взять код, куда вставить и как проверить форму на телефоне. Что делать, если редактор запрещает iframe.
Что делает iframe
Iframe открывает страницу сервиса внутри страницы вашего сайта. Сам календарь, правила расчёта и сохранение брони остаются в TOBIZ.
Поэтому заявка из виджета попадает в ту же базу, что и заявка по прямой ссылке. Установка не требует копировать таблицу занятости или отдельно обновлять даты на сайте.
Подготовьте объект
Сначала настройте номера, тарифы и условия, подтвердите email и проверьте прямую страницу бронирования. Встраивать пустой календарь неудобно для посетителя: он не поймёт, какие варианты можно выбрать.
Существующие брони должны быть внесены до размещения виджета.
Установите код
Откройте «Ссылка и виджет», нажмите «Копировать код» и вставьте его в HTML-блок редактора сайта. Опубликуйте страницу.
Код содержит адрес конкретного объекта, ширину 100% и начальную высоту. Если редактор запрещает iframe, используйте обычную кнопку со ссылкой на страницу бронирования.
Проверьте высоту и телефон
На узком экране форма становится длиннее. Убедитесь, что нижняя кнопка доступна, содержимое не обрезано стилями родительского блока, а при необходимости работает внутренняя прокрутка.
Проверьте страницу при ширине 320–390 пикселей и на планшете. Родительский блок не должен задавать фиксированную ширину больше экрана.
Проверьте сохранение
Создайте одну тестовую бронь из виджета и откройте кабинет. Даты должны стать занятыми и на прямой странице.
После отмены теста они снова доступны. Если ваш сайт использует политику Content-Security-Policy, его frame-src должен разрешать https://tobhotel.ru.
Эту настройку выполняет администратор вашего сайта.
Что попробовать после чтения
После публикации откройте страницу на телефоне и дойдите до кнопки бронирования. Если её не видно, проверьте высоту HTML-блока и прокрутку iframe.
Практический пример
| Проверка | Правильный результат |
|---|---|
| Адрес iframe | Публичная ссылка объекта из кабинета |
| Ширина | Виджет помещается в экран телефона |
| Высота | Форма и результат бронирования доступны |
| HTTPS | Сайт и календарь открываются по защищённому соединению |
| Сохранение | Бронь появляется в общем календаре |
Проверьте на своём объекте
- Откройте «Ссылка и виджет» у нужного объекта.
- Скопируйте готовый iframe из кабинета.
- Вставьте его в HTML-блок страницы и опубликуйте сайт.
- Откройте опубликованную страницу на телефоне и компьютере.
- Проведите согласованную тестовую бронь и отмените её после проверки.
Вопросы по теме
Нужен ли отдельный календарь для сайта?
Нет. Публичная ссылка и встроенная форма используют занятость того же объекта.
Можно ли менять содержимое iframe стилями сайта?
Стили внешней страницы обычно не управляют содержимым другого домена. На стороне сайта настройте контейнер: ширину, высоту и отступы.
От инструкции — к календарю
Откройте демо, чтобы увидеть поведение занятых и свободных дат. Для установки на сайт скопируйте iframe своего объекта.
Демо сохраняет учебные изменения в этом браузере. Можно добавлять номера, брони и закрытые периоды. Реальные брони не создаются.
Следующий шаг
Проверьте описанный сценарий на своём объекте. Подготовьте номера и условия до отправки ссылки гостям.
Создать календарь
