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 було змінено. Вставляйте фрагмент як є, не набираючи ідентифікатор заново.

Послугу знято з публікації або вона більше не схвалена.