Clasora

Встраивание расписания на ваш сайт

Интеграции

Раздел Настройки → Интеграции позволяет посетителям бронировать у вас прямо на вашем сайте через встроенное расписание, а не переходя сюда.

1. Разрешите свой домен

В блоке Разрешённые домены укажите точный источник сайта, на котором появится расписание, то есть только схему и хост, без пути и без слеша в конце:

https://apply.acme.com     ✓
https://acme.com:8443      ✓
acme.com                   ✗  нет схемы
https://acme.com/book      ✗  содержит путь
https://acme.com/          ✗  слеш в конце

https://www.acme.com и https://acme.com считаются разными источниками. Если посетители могут попасть на сайт обоими способами, добавьте оба.

Этот список одновременно и переключатель: пока он пуст, расписание нельзя встроить нигде. Можно добавить до 50 доменов; удаление вступает в силу сразу.

2. Вставьте фрагмент кода

У каждой одобренной услуги свой фрагмент кода. Скопируйте его и вставьте на страницу туда, где должно появиться расписание:

<div class="scheduling-embed" data-service="SERVICE_ID"></div>
<script src="https://embed.example.com/embed.js" async></script>

<div> задаёт место; тег script может стоять в любом месте страницы, и его достаточно один раз, даже если расписаний несколько. Если вы видите сообщение, что одобренных услуг для встраивания пока нет, услуга ещё на проверке. Её фрагмент появится после одобрения.

3. Задайте язык

Язык виджета на этой странице определяет, что видят посетители. Оставьте вариант как язык страницы, и расписание прочитает атрибут lang из тега <html> вашей страницы. Это тот же атрибут, на который опираются поисковые системы и программы чтения с экрана, так что грамотно локализованному сайту не нужна дополнительная настройка:

<!doctype html>
<html lang="es">      <!-- расписание отображается на испанском -->
  <head>…</head>
  <body>…</body>
</html>

Региональные метки работают: lang="pt-BR" сводится к ближайшему поддерживаемому языку, а не отклоняется.

Чтобы переопределить язык страницы для одного расписания, добавьте data-locale к div встраивания. Он важнее и языка страницы, и настройки на этой странице:

<div class="scheduling-embed" data-service="SERVICE_ID" data-locale="de"></div>

Если на вашей странице есть собственный переключатель языка, попросите расписание следовать за ним. Смена происходит на месте, поэтому всё, что посетитель уже заполнил, сохраняется:

window.SchedulerEmbed.setLocale("sr");

Коротко: побеждает первое заданное из списка, то есть data-locale, затем <html lang> вашей страницы, затем Язык виджета, затем браузер посетителя, затем английский.

Другие параметры

Добавьте их к div встраивания:

data-mode="popup" показывает кнопку, открывающую расписание поверх страницы, вместо встраивания в поток.

data-label="Записаться" задаёт текст кнопки во всплывающем режиме.

data-min-height="480" задаёт высоту в пикселях до того, как расписание сообщит свой реальный размер. Увеличьте её, если при загрузке заметен скачок.

Есть ещё два вызова, если ваш сайт добавляет содержимое динамически или считает конверсии:

// Повторно просканировать страницу после добавления div расписания
window.SchedulerEmbed.refresh();

// Срабатывает, когда посетитель завершает бронирование
window.SchedulerEmbed.onBooking(function (e) {
  console.log(e.bookingId, e.serviceId);
});

Если расписание не загружается

Источник страницы отсутствует в списке разрешённых или не совпадает точно: достаточно http вместо https или пропущенного www.

Фрагмент попал туда, где скрипт не может выполняться, например в блок обычного текста или ограниченного HTML в конструкторе сайта.

Значение data-service было изменено. Вставляйте фрагмент как есть, не набирая идентификатор заново.

Услуга снята с публикации или больше не одобрена.