Установка Bnovo состоит из двух этапов: сначала ставим на сайт расширенный модуль онлайн-бронирования, а потом (при необходимости) — интегрируем мини-виджет с выбором дат и количеством гостей.

Большой модуль бронирования

Выглядит он следующим образом:

Инструкция по установке:

1. Создайте на сайте отдельную страницу для модуля бронирования. Она может содержать шапку, подвал и другие элементы сайта, а адрес может быть, например, таким: /booking.

Примечание:

Рекомендую перед установкой модуля подключить свой домен к Тильде и SSL сертификат, т.к. ссылка на страницу бронирования в дальнейшем понадобится целиком вместе с доменом.

2. В личном кабинете Bnovo оформляете внешний вид модуля: заходите в меню -> Модуль бронирования на сайте.

Далее заходите во вкладку «Оформление», редактируете настройки и нажимаете «Сохранить»:

3. Скопируйте себе ваш идентификатор модуля Bnovo (UID). Для этого зайдите в меню -> Канал продаж, код будет напротив надписи «Модуль онлайн-бронирования»:

4. Скачайте код для вставки на сайт iframe по этой ссылке (официальная ссылка от Bnovo).

В выделенную строку
uid: "",
между кавычек вставьте ваш UID.

5. Получившийся код айфрема вставьте на ранее созданную страницу на Тильде либо в блок Т123, либо в HTML-элемент в zero-блоке. Опубликуйте страницу, модуль должен работать.

Примечание:

После изменения внешнего вида модуля в личном кабинете Bnovo переопубликация страницы на Тильде не требуется, все изменения вступят в силу на сайте автоматически.

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

Пример стилей:


<style>
#booking_iframe {
    max-width: 1160px;
    margin: auto;
    border: solid 1px #DDE3EB; /*обводка*/
}
#booking_iframe, #booking_iframe > iframe {
    border-radius: 30px; /*скругления*/
}
@media (max-width: 960px) {
#booking_iframe {
    max-width: 940px !important;
    width: auto !important;
    margin-left: 20px !important;
    margin-right: 20px !important;
    border: none;
}
#booking_iframe, #booking_iframe > iframe {
    border-radius: 20px;
}
}
</style>

Мини виджет бронирования

Пример отображения:

Инструкция по установке:

1. Зайдите по ссылке в конфигуратор виджета (регистрация не нужна).

2. Вставьте в верхнее поле UID ваш уникальный идентификатор модуля Bnovo.

В поле «Адрес страницы бронирования» вставьте полную ссылку (начиная с https://) на ранее созданную страницу для большого модуля.

Отредактируете настройки по внешнему виду виджета и нажмите «Применить изменения». В правом нижнем углу экрана у вас сгенерируется код для вставки виджета, скопируйте его.

3. Вставьте полученный код виджета в Тильду на любую страницу (кроме той, что вы создали специально для большого модуля) либо в блок Т123, либо в HTML-элемент в zero-блоке. Опубликуйте страницу, виджет должен работать.

Примечание:

Горизонтальный виджет автоматически адаптируется под мобильные устройства и станет вертикальным.

После выбора дат в мини виджете и клика на кнопку «Показать наличие» откроется ваша отдельная страница с большим модулем с уже выбранными датами и доступными предложениями.

Дополнительно

Чтобы открыть страницу с модулем Bnovo и выбранным определенным номером или категорией, сформируйте специальную ссылку вида:

адрес страницы с большим модулем + ?onlyrooms= + id категории

Например:
https://названиесайта.ру/booking?onlyrooms=329673

Такую ссылку можно разместить на кнопке «Забронировать» в каталоге номеров, например.
Список всех ID категорий и номеров запросите у менеджера Bnovo.

Заключение

За дополнительной информацией можно обратиться к базе знаний Bnovo.

Если у вас есть комментарии или вопросы к данной инструкции, напишите мне, и я обязательно вам отвечу

Понравилась статья?

Будьте в курсе

Подписывайтесь на мой ТГ канал

Там я пишу о разработке сайтов на Тильде, дизайне и делюсь полезными ресурсами, статьями и модификациями.

Перейти в канал