Нажмите «ОК», если вы соглашаетесь с условиями обработки cookie и ваших данных о поведении на сайте, необходимых для аналитики. Запретить обработку cookie можете через браузер.
Виджет формы резерва от booking
Говорим о готовой форме для сбора заявок на резервы, которая встраивается на ваш сайт с помощью скрипта и управляется (дизайн, блокировки, тексты) из сервиса booking.
01 Преимущества виджета от booking
- Можно настроить приём заявок только в свободные слоты: не получать заявки на дату и время, когда все столы заняты.
- Можно закрыть любую дату и время, на которые не хотите получать заявки и не привлекать для этого разработчиков сайта.
- Можно встраивать виджет формы на любые платформы в виде открытой формы или pop-up (всплывающего окна).
- Можно не создавать сайт, а воспользоваться готовой ссылкой от KC Booking, по которой будет открываться страница с формой резерва.
- Можно настроить приём заявок в конкретный зал и выставить в поле персон 100-200 чел. — и так принимать заявки на банкеты.
02 Настройка виджета
- Перейти в «Настройки» — «Конструктор форм резерва».
- Нажать на «Создать форму».
- Выбрать тип шаблона «Универсальный».
- Оформить контент и поведение формы на вкладке «Конструктор».
- Оформить дизайн: шрифты, цвета, скругления, фон — на вкладке «Дизайн».
ℹ️ По клику на 3 точки на плашке формы в списке всех форм доступны также действия: дублировать, редактировать, удалить форму.
💡 Панель настройки дизайна формы настолько вариативна, что допускает любые фантазии. Оцените — это без участия разработчиков и дизайнеров:
03 Подробнее о блокировке
Блокировкой мы называем закрытие виджета формы на отправку заявок на резерв. При блокировке гость не можем отправить заявку, а вы не увидите новых заявок в разделе «Неразобранное».
По умолчанию форма показывает доступные для брони слоты на основе расписания ресторана, настроенного в «Настройки» — «Данные о ресторанах» — карточка ресторана.
Но вы можете наложить поверх этого ещё ряд условий поведения формы:
Но вы можете наложить поверх этого ещё ряд условий поведения формы:
- Блокировать при отсутствии мест в зале на выбранное гостем время — форма не покажет слот, если на эти дату и время все столы ресторана заняты.
- Блокировать форму по дате и времени — форма не покажет слот на дату и время, которые вы настроили как недоступные.
- Блокировать форму от заданного количества гостей — при выборе числа гостей сверх установленного, форма заблокирует возможность оставить заявку.
04 Внедрение виджета на Tilda
Встроить виджет в тело страницы (открытая форма):
- На страницу с формой добавить блок T123 «HTML-код».
- В блок вставить скрипт из настроек виджета — вкладки «Код вставки».
- В zero-блоке с формой добавить HTML-блок (нажать на Add HTML). Вставить HTML-тег из блока «Открытая форма (внутри контента)» из настроек виджета — вкладки «Код вставки».
💡Для управления шириной формы добавить параметр width="N%"
Для управления радиусом — параметр style = 'border-radius: Npx'
Для управления радиусом — параметр style = 'border-radius: Npx'
<iframe name="kc_reservation_form_1" width="100%" style = 'border-radius: 25px' frameBorder="0"...></iframe>
💡 Если нет zero-блока — вставить html-тег в блок T123.
Встроить виджет в pop-up:
- На страницу с формой добавить блок T123 «HTML-код».
- В блок вставить скрипт из настроек виджета — вкладки «Код вставки».
- В этот же блок в следующей строке вставить скрипт:
<script>
window.onload = function() {
const button = document.querySelector('.uc-KcReservation');
button.addEventListener('click', () => {
//в эту строку вставьте
});
};
</script>
window.onload = function() {
const button = document.querySelector('.uc-KcReservation');
button.addEventListener('click', () => {
//в эту строку вставьте
});
};
</script>
Вместо «//в эту строку вставьте» вставить значение window.KcReservationFormN.show () из блока Pop-up форма (поверх контента).
4. В кнопку, по клику на которую открывается pop-up с формой, прописать «KcReservation» в Block CSS Class Name.
🔶Кнопка, которая открывает форму, должна быть одна на странице.
🔶Кнопка, которая открывает форму, должна быть одна на странице.
05 Внедрение виджета на сайт с иной CMS
Встроить виджет в тело страницы (открытая форма):
1. На страницу, где находится форма, вставить общий скрипт в <body> или <head>.
1. На страницу, где находится форма, вставить общий скрипт в <body> или <head>.
2. Вставить html-тег iframe туда, где надо отобразить открытую форму
💡Для управления шириной формы добавить параметр width="N%"
Для управления радиусом — параметр style = 'border-radius: Npx'
Для управления радиусом — параметр style = 'border-radius: Npx'
<iframe name="kc_reservation_form_1" width="100%" style = 'border-radius: 25px' frameBorder="0"...></iframe>
Встроить виджет в pop-up:
1. На страницу, где находится форма, вставить общий скрипт в <body> или <head>.
1. На страницу, где находится форма, вставить общий скрипт в <body> или <head>.
2. На кнопку, по клику на которую должна открываться и закрываться форма, добавить обработчик.
06 Интеграция с системами аналитики
Интеграция с Яндекс Метрикой
Интеграция с Яндекс Метрикой актуальна, если:
Выполнить в booking шаги:
- Используете виджет по ссылке, скопированной во вкладке «Код вставки».
- Внедряете виджет на свой сайт, где уже внедрены скрипты счётчика Яндекс Метрики
Выполнить в booking шаги:
- В настройках виджета формы на вкладке «Код вставки» найти блок «Передача событий формы в Яндекс Метрику».
- Сделать переключатель активным.
- Вписать номер счётчика в поле «ID метрики».
booking умеет передавать в метрику события:
Чтобы настроить цели:
- Для формы-pop-up: открытие (opened), закрытие (closed), отправка заявки (submitted).
- Для открытой формы: отправка заявки (submitted).
Чтобы настроить цели:
- Перейти в «Цели».
- Нажать на «Добавить цель» с типом условия «Посещение страниц».
- В условии выбрать «url регулярное выражение» и вставить регулярное выражение: .*\/keepcalm\/.*\/reservation_form_. *\/.*submitted
💡Для отслеживания конверсий отдельно по каждой из форм — заменить часть регулярного выражения reservation_form_\d+ на конкретный ID формы reservation_form_15
ID формы найти в «Настройки» — «Конструктор форм резерва» — редактирование формы — ID формы можно увидеть в ссылке страницы.
ID формы найти в «Настройки» — «Конструктор форм резерва» — редактирование формы — ID формы можно увидеть в ссылке страницы.
Интеграция с UIS
Выполнить в booking шаги:
- В настройках виджета формы на вкладке «Код вставки» найти блок «Отправка заявок в UIS».
- Сделать переключатель активным.
- Вписать номер счётчика в поле «Счётчик UIS».
Найти ID счётчика:
- Перейти в «Настройки» — «Сайты» — редактирование сайта.
- В фрейме со скриптом скопировать часть после k=
