Мы используем файлы cookie для обеспечения наилучшего взаимодействия с сайтом.
Мы направим доступы в личный кабинет KC Booking на почту или Telegram
Оставьте заявку на получение доступов
Мы направим доступы в личный кабинет KC Delivery на почту или Telegram
Оставьте заявку на получение доступов
Настроить виджет готовой формы резерва
1. Основные определения
- Что такое виджет формы резерва
Виджет формы резерва — это готовая форма для сбора заявок на резервы, которая встраивается на ваш сайт с помощью скрипта. Дизайн и контент формы настраивается в личном кабинете KC Booking, в конструкторе форм резерва.
- Что такое конструктор форм резерва
Конструктор форм резерва — это подраздел в настройках, откуда вы управляете всеми виджетами форм резерва организации. Из конструктора возможно регулировать дизайн, тексты, доступные слоты для брони.
- Преимущества готовой формы резерва от KC Booking перед обычной формой на сайте
- Можно настроить приём заявок только в свободные слоты: не получать заявки на дату и время, когда все столы заняты.
- Можно закрыть любую дату и время, на которые не хотите получать заявки и не привлекать для этого разработчиков сайта.
- Можно встраивать виджет формы на любые платформы в виде открытой формы или pop-up (всплывающего окна).
- Можно не создавать сайт, а воспользоваться готовой ссылкой от KC Booking, по которой будет открываться страница с формой резерва.
2. Настройка формы резерва в конструкторе KC Booking
Разберёмся, как создать и управлять виджетом формы резерва. Мы рекомендуем пользоваться этим разделом на компьютере.
- Действия над формой резерва
Перейдите в «Настройки» — «Конструктор форм резерва». На открывшейся странице:
- Нажмите на «Создать форму» для создания новой формы резерва.
- Нажмите на окно существующей формы для её редактирования.
- Нажмите на 3 точки в окне существующей формы и выберите действия: дублировать или удалить.
- Обзор конструктора формы резерва
- Указать название формы
2. Управлять контентом формы
Для управления контентом, нажмите на значение из списка «Поля формы» и определите его контент в появившемся внизу блоков «Настройки поля».
Доступно управление:
Для управления контентом, нажмите на значение из списка «Поля формы» и определите его контент в появившемся внизу блоков «Настройки поля».
Доступно управление:
- Заголовком формы: отключить заголовок или прописать в него любой текст.
- Полем «Адрес ресторана»: выбрать один или несколько ресторанов для выпадающего списка поля. *Если выбран 1 ресторан, поле скрывается.
- Плейсхолдером поля «Имя гостя».
- Номером для связи, который указывается в дисклеймере: указать ваш номер на случай вопросов или неполадок.
3. Управлять поведением формы
По умолчанию форма показывает доступные для брони слоты на основе расписания ресторана, настроенного в «Настройки» — «Данные о ресторанах» — карточка ресторана.
Но вы можете наложить поверх этого ещё ряд условий поведения формы:
По умолчанию форма показывает доступные для брони слоты на основе расписания ресторана, настроенного в «Настройки» — «Данные о ресторанах» — карточка ресторана.
Но вы можете наложить поверх этого ещё ряд условий поведения формы:
- Блокировать при отсутствии мест в зале на выбранное гостем время — форма не покажет слот, если на эти дату и время все столы ресторана заняты.
- Блокировать форму по дате и времени — форма не покажет слот на дату и время, которые вы настроили как недоступные.
- Блокировать форму для компаний от заданного количества гостей — при выборе числа гостей сверх установленного, форма заблокирует возможность оставить заявку.
4. Управлять дизайном формы
Нам важно, чтобы форма резерва полностью отвечала фирменному стилю ресторана, поэтому в конструкторе доступно управление шрифтами, размерностью текстов в разных адаптациях, цветами, видами полей, скруглениями формы.
Нам важно, чтобы форма резерва полностью отвечала фирменному стилю ресторана, поэтому в конструкторе доступно управление шрифтами, размерностью текстов в разных адаптациях, цветами, видами полей, скруглениями формы.
Важно
Если вы не нашли в списке своего шрифта — напишите в поддержку KC Booking, мы поможем и добавим.
Если вы не нашли в списке своего шрифта — напишите в поддержку KC Booking, мы поможем и добавим.
5. Проверить внешний вид формы для компьютеров и мобильных.
- Дополнительные возможности конструктора форм
- Страница с формой резерва по ссылке от KC Booking
Можно не создавать сайт, а воспользоваться готовой ссылкой от KC Booking: нажмите на кнопку «Скопировать ссылку» и вставьте на нужную платформу.
*Вы можете управлять фоном страницы и выбрать:
- Однотонную заливку фона: выключите переключатель поля и выберете цвет в появившемся поле «Цвет фона».
- Заливку фона изображением: включите переключатель поля и укажите ссылку на изображение для фона.
2. Интеграция формы резерва с Яндекс Метрикой
Для передачи событий-целей из формы в Яндекс Метрику включите переключатель «Интеграция с Яндекс Метрикой» и заполните поле ID метрики номером счётчика.
После сохранения настроек формы события будут отправляться в Яндекс Метрику автоматически.
Для передачи событий-целей из формы в Яндекс Метрику включите переключатель «Интеграция с Яндекс Метрикой» и заполните поле ID метрики номером счётчика.
После сохранения настроек формы события будут отправляться в Яндекс Метрику автоматически.
3. Интеграция формы резерва с UIS
Для передачи обращений из формы в UIS включите переключатель «Интеграция с UIS» и заполните поле ID счётчика.
Для передачи обращений из формы в UIS включите переключатель «Интеграция с UIS» и заполните поле ID счётчика.
Чтобы найти ID счётчика в новом личном кабинете UIS, перейдите в «Настройки» — «Сайты» — провалитесь в редактирование сайта. На открывшейся странице в фрейме со скриптом выделите часть после k= и скопируйте — это и есть ID счётчика UIS.
3. Внедрение формы на сайт на Tilda
Виджет формы резерва в виде открытой формы
1. На страницу, где находится форма, добавьте блок T123: в списке готовых блоков перейдите в группу «Другое» и найдите блок «HTML-код», либо воспользуйтесь поиском по блокам.
2. В контент блока вставьте скрипт из «Код вставки» из KC Booking.
2. В контент блока вставьте скрипт из «Код вставки» из KC Booking.
3. Если размещаете виджет формы резерва в zero-блоке, нажмите Add HTML и в появившийся блок вставьте HTML-тег из блока «Открытая форма (внутри контента)» из KC Booking.
*Для управления шириной формы добавьте параметр width="N%"
Для управления радиусом открытой формы добавьте параметр style = 'border-radius: Npx'
Для управления радиусом открытой формы добавьте параметр style = 'border-radius: Npx'
<iframe name="kc_reservation_form_1" width="100%" style = 'border-radius: 25px' frameBorder="0" src="https://booking-stage.keep-calm.ru/public-access/reservation/form?formId=1&apiKey=48d60208d44645011c4a09500207"></iframe>
**При желании избежать работы с zero-блоком выберите готовый блок T123 и вставьте html-тег в контент блока — форма будет отображаться по умолчанию с базовым дизайном.
Виджет формы резерва в виде pop-up
1. На страницу, где находится форма, добавьте блок T123: в списке готовых блоков перейдите в группу «Другое» и найдите блок «HTML-код», либо воспользуйтесь поиском по блокам.
2. В контент блока вставьте скрипт из «Код вставки» из KC Booking.
2. В контент блока вставьте скрипт из «Код вставки» из KC Booking.
В этот же блок в следующей строке вставьте следующий скрипт
<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>
3. Вместо «//в эту строку вставьте» пропишите значение window.KcReservationFormN.show () из блока Pop-up форма (поверх контента) для действия «Показать форму» (вместо N указывается идентификатор формы).
4. На страницу добавьте блок кнопкой, по клику на которую должен открываться pop-up с формой.
Оформите кнопку в фирменном стиле Вашего сайта.
В разделе Block CSS Class Name в настройках кнопки укажите KcReservation, чтобы получилось как на изображении:
Оформите кнопку в фирменном стиле Вашего сайта.
В разделе Block CSS Class Name в настройках кнопки укажите KcReservation, чтобы получилось как на изображении:
В настройках контента в «ссылке для кнопки» поставьте пробел, чтобы появился плейсхолдер «Ссылка». Она нам не нужна.
Важно
Кнопка, которая открывает форму, должна быть одна на странице.
Кнопка, которая открывает форму, должна быть одна на странице.
4. Внедрение формы на сайт с иной CMS
Виджет формы резерва в виде открытой формы
1. На страницу, где находится форма, вставить общий скрипт в <body> или <head>.
2. Вставить html-тег iframe туда, где надо отобразить открытую форму
*Для управления шириной формы добавьте параметр width="N%"
<iframe name="kc_reservation_form_1" width="100%" frameBorder="0" src="https://booking-stage.keep-calm.ru/public-access/reservation/form?formId=1&apiKey=48d60208d44645011c4a09500207"></iframe>
Виджет формы резерва в виде pop-up
1. На страницу, где находится форма, вставить общий скрипт в <body> или <head>.
2. На кнопку, по клику на которую должна открываться и закрываться форма, добавить обработчик.
5. Интеграция с Яндекс Метрикой
Поле «Интеграция с Яндекс Метрикой» вы включаете и заполняете номером счётчика:
- Если используете форму по сгенерированной в Booking ссылке (доступна по клику на «Скопировать ссылку» в блоке «Итоговая форма» в разделе «Код вставки»).
- Если вы внедряете виджет формы на свой сайт, где уже внедрены скрипты счётчика Яндекс Метрики (в поле «ID метрики» важно вставить код того же счётчика, который внедрён на сайте).
События, которые считывает метрика для форм KC Booking:
Чтобы найти URL виртуальных событий ваших форм, перейдите в «Отчёты» —> «Содержание» —> «Страницы входа».
Чтобы отслеживать конверсии по событиям с формы резерва, настройте цели. Для этого перейдите в «Цели», нажмите «Добавить цель» с типом условия «Посещение страниц». В условии выберите «url регулярное выражение» и вставьте регулярное выражение .*\/keepcalm\/.*\/reservation_form_\d+\/.*submitted
- Форма-pop-up: открытие (opened), закрытие (closed), отправка заявки (submitted).
- Открытая форма: отправка заявки (submitted).
Чтобы найти URL виртуальных событий ваших форм, перейдите в «Отчёты» —> «Содержание» —> «Страницы входа».
Чтобы отслеживать конверсии по событиям с формы резерва, настройте цели. Для этого перейдите в «Цели», нажмите «Добавить цель» с типом условия «Посещение страниц». В условии выберите «url регулярное выражение» и вставьте регулярное выражение .*\/keepcalm\/.*\/reservation_form_\d+\/.*submitted
Если хотите отслеживать события по каждой из форм, замените часть регулярного выражения reservation_form_\d+ на конкретный ID формы reservation_form_15
ID формы вы найдёте, перейдя в «Настройки» — «Конструктор форм резерва» — редактирование формы.
Если вы открыли Booking на компьютере в браузере, ID формы можно увидеть в ссылке страницы.
ID формы вы найдёте, перейдя в «Настройки» — «Конструктор форм резерва» — редактирование формы.
Если вы открыли Booking на компьютере в браузере, ID формы можно увидеть в ссылке страницы.
Если вы открыли Booking на планшете, ID формы удобнее найти в скрипте блока «Код вставки» — как значение параметра siteId
6. Ролевая система
Раздел «Конструктор форм резерва» доступен для пользователей с ролями:
Пользователю доступны только те формы, у которых есть хотя бы один ресторан из тех, к которым пользователю выдан доступ в учётке.
Для форм с выбором несколько ресторанов, к части из которых нет доступа, действуют ограничения в интерфейсе.
- Владелец организации (редактирование, создание, дублирование, удаление).
- Менеджер организации (редактирование, создание, дублирование, удаление).
- Менеджер ресторана (редактирование).
Пользователю доступны только те формы, у которых есть хотя бы один ресторан из тех, к которым пользователю выдан доступ в учётке.
Для форм с выбором несколько ресторанов, к части из которых нет доступа, действуют ограничения в интерфейсе.
Если у вас не получилось настроить интеграцию, напишите нам — мы поможем 🧠
