Как, я уже говорила Тильда - это потрясающий конструктор, на котором можно создать абсолютно все !
Сегодня разберем на примере сайта посуточно аренды апартаментов, как подключить к странице онлайн-бронирование.
Хочется отдельно обратить внимание на такую плюшку, как домен. Онлайн-бронирование работает даже если вы НЕ сажаете сайт на домен, а оставляете например на стандартном тильдовском и просто задаете нормальное читаемое имя. Пример из статьи - https://red-glade-polyana.tilda.ws
Bnovo - это сторонний сервис https://bnovo.ru/ управления отелем, посуточно арендой одной квартиры или целым комплексом. В нем можно учесть все , и уборку номеров, и овербукинги и многое другое , но сейчас не об этом) пусть рекламой своего сервиса ребята занимаются сами! )))) А я расскажу как можно его подключить к сайту.
Сначала мы регистрируемся на сайте Bnovo. Получаем доступ к сервису.
1. Создаем на нашем сайте ОТДЕЛЬНУЮ страницу: она может содержать шапку, подвал и другие элементы сайта, а адрес может быть, например, таким: /booking.
2. В личном кабинете Bnovo оформить внешний вид модуля. Нужно зайти в меню, выбрать «Модуль бронирования на сайте», затем перейти во вкладку «Оформление», отредактировать настройки и нажать «Сохранить».
3. Скопировать идентификатор модуля Bnovo (UID). Для этого нужно зайти в меню, выбрать «Канал продаж», код будет напротив надписи «Модуль онлайн-бронирования».
4. Скачать код для вставки на сайт iframe по официальной ссылке от Bnovo. В выделенную строку uid: "", между кавычек вставить свой UID.
<div id="booking_iframe" style="position: relative; padding-bottom: 30px;">
<div id="bn_iframe" style="font-family: 'Proxima nova', 'Helvetica Neue', 'Cera Pro Medium', Arial, Helvetica, sans-serif; position: absolute; right: 0; bottom: 0; font-size: 12px; line-height: 1em; opacity: .5; z-index: 10; margin-top: 10px;">
<div style="color: #1403fc!important; background: rgba(0, 0, 0, 0)!important;">
<a style="color: #808080!important; background: #fff!important;" href="https://bnovo.ru/bnovo-mb/?utm_source=client_modul_br" id="bnovo_link" target="_blank">Система управления отелем Bnovo ©</a>
</div>
</div>
</div>
<script src="https://widget.reservationsteps.ru/iframe/library/dist/booking_iframe.js"></script>
<script type="text/javascript">
(function () {
var BnovoBookFrame = new BookingIframe({
html_id: "booking_iframe",
uid: "ВАШ UID",
lang: "ru",
width: "auto",
height: "auto",
rooms: "",
IsMobile: "0",
scroll_to_rooms: "0"
});
BnovoBookFrame.init();
})();
</script>
Внимательно посмотрите код , где UID нужно вписать ВАШ ЮИД из третьего пункта.
<div id="booking_iframe" style="position: relative; padding-bottom: 30px;">
<div id="bn_iframe" style="font-family: 'Proxima nova', 'Helvetica Neue', 'Cera Pro Medium', Arial, Helvetica, sans-serif; position: absolute; right: 0; bottom: 0; font-size: 12px; line-height: 1em; opacity: .5; z-index: 10; margin-top: 10px;">
<div style="color: #1403fc!important; background: rgba(0, 0, 0, 0)!important;">
<a style="color: #808080!important; background: #fff!important;" href="https://bnovo.ru/bnovo-mb/?utm_source=client_modul_br" id="bnovo_link" target="_blank">Система управления отелем Bnovo ©</a>
</div>
</div>
</div>
<script src="https://widget.reservationsteps.ru/iframe/library/dist/booking_iframe.js"></script>
5. Вставить получившийся код iframe на ранее созданную страницу на Tilda либо в блок Т123, либо в HTML-элемент в zero-блоке. Затем опубликовать страницу, модуль должен работать.
Для этого мы нажимаем плюс на странице где добавляем блок, нажимаем T123 блок, в него копируем блок.
Там, где хотим чтобы отображался виджет добавляем просто скрипт :
<div class="div_for__bn_widget_adaptive" id="div_for__bn_widget_adaptive">
<div id="absolute_div_for__bn_widget_adaptive">
<div class="left" id="_bn_widget_adaptive">
<a href="http://bnovo.ru/" id="_bnovo_link_" target="_blank" style="z-index: 1000;">Bnovo</a>
</div>
</div>
</div>
<div style="height: 89px; display: none;" class="div_for__bn_widget_adaptive"></div>
<script src="//widget.reservationsteps.ru/js/bnovo.js"></script>
<script type="text/javascript">
(function() {
Bnovo_Widget.init(function() {
Bnovo_Widget.open('_bn_widget_adaptive', {
type: "horizontal",
uid: "ВАШ UID",
lang: "ru",
width: "100%",
background: "#000000",
bg_alpha: "50",
padding: "20",
padding_mobile: "20",
border_radius: "0",
font_type: "inter",
title_color: "#000000",
title_size: "30",
without_title: "on",
inp_color: "#000000",
inp_bordhover: "#d6d6d6",
inp_bordcolor: "#d6d6d6",
inp_alpha: "100",
btn_background: "#ffcb8b",
btn_background_over: "#ffcb8b",
btn_textcolor: "#000000",
btn_textover: "#000000",
btn_bordcolor: "#ffcb8b",
btn_bordhover: "#ffcb8b",
adults_default: "1",
dates_preset: "on",
dfrom_tomorrow: "on",
dto_nextday: "on",
url: "ССЫЛКА НА ВАШ САЙТ",
switch_mobiles: "on",
switch_mobiles_width: "980"
});
});
})();
</script>
<style>
@media screen and (min-width: 980px) {
#div_for__bn_widget_adaptive {width: 100%; max-width: 1160px; margin: auto;}
#absolute_div_for__bn_widget_adaptive {position: absolute; width: 100%; max-width: 1160px; z-index: 10;}
.div_for__bn_widget_adaptive {height: 89px;}
}
@media screen and (max-width: 980px) {
#div_for__bn_widget_adaptive {width: 100%; max-width: 640px; margin: auto;}
#absolute_div_for__bn_widget_adaptive {position: relative; width: 100%; max-width: 640px; z-index: 10;}
.div_for__bn_widget_adaptive {height: 280px;}
}
</style>
Внимательно посмотрите код , там необходимо ввести адрес вашего сайта и UID. Там где это нужно сделать подписано!
Если у вас что-то не получается вы всегда можете обратиться к менеджерам Bnovo и они обязательно вам помогут. Или просто написать мне и я постараюсь вам помочь)
Если моя статья была вам полезна я очень прошу поставить мне лайк, это очень важно для продвижения моего канала!