Як працює віджет
Віджет — це невеликий вибір часу з Reservuj, вставлений у ваш сайт. Клієнт вибирає в ньому філію (якщо їх у вас кілька), послугу, день і вільний час на 28 днів наперед. Натискання на час відкриває нове вікно Reservuj, де він входить або реєструється і підтверджує бронювання. Сам віджет нічого не записує і не використовує cookies.
Що потрібно
- Заклад приймає бронювання: він запущений і має підтверджений e-mail.
- Принаймні одна послуга в прайс-листі й робочі години, щоб було що запропонувати.
- Сайт на https, у який можна вставити шматок HTML-коду.
1. Увімкніть віджет
В адмініструванні відкрийте Klienti → Widget na web і позначте Zapnout widget na web (увімкнути віджет). Віджет компанія вмикає сама. Поки ви його не ввімкнете, жоден сайт його не покаже.
2. Дозвольте адресу свого сайту
У полі Povolené weby (дозволені сайти, по одному в рядку) вкажіть адресу сайту, куди вставите віджет, — тільки адресу, без шляху. Якщо сайт працює з www і без нього, вкажіть обидва варіанти. Дозволити можна щонайбільше 10 адрес, тільки з https; порт дозволений. Потім натисніть Uložit (зберегти).
https://www.vas-salon.cz
https://vas-salon.czВіджет показується лише на дозволених адресах. Інакше будь-хто міг би вставити його до себе й видавати себе за вас.
3. Вставте код на сайт
Під налаштуваннями є Kód k vložení (код для вставлення). Виберіть варіант (кнопка з вікном або форма прямо на сторінці), текст і колір кнопки та натисніть Kopírovat (копіювати). Вставте код туди, де має бути кнопка чи форма. Вигляд не зберігається, він лише в коді: після зміни вставте код знову. Попередній перегляд під кодом показує, що побачить клієнт.
Власний сайт (HTML)
Кнопка, яка відкриває вікно з вибором часу. Вставте обидва рядки туди, де має бути кнопка; скрипт потрібен на сторінці лише один раз, навіть якщо віджетів кілька.
<script src="https://reservuj.cz/js/widget/v1.js" async></script>
<div data-reservuj-widget="vas-podnik" data-variant="button" data-label="Rezervovat" data-color="#0e7c8c"></div>Форма прямо на сторінці; її висота підлаштовується під вміст.
<script src="https://reservuj.cz/js/widget/v1.js" async></script>
<div data-reservuj-widget="vas-podnik" data-variant="inline" data-label="Rezervovat" data-color="#0e7c8c"></div>WordPress
У редакторі сторінки додайте блок Довільний HTML (Custom HTML) і вставте в нього код. Якщо WordPress після збереження видалить скрипт (обліковий запис без дозволу вставляти нефільтрований HTML або тариф, що не дозволяє скрипти), використайте варіант без скрипту або лише посилання.
Webnode, Wix та інші конструктори
Конструктори сайтів зазвичай мають елемент для вставлення HTML-коду (Вставити код, HTML, Embed). Деякі вставляють його у власну рамку на своїй адресі: вікно кнопки тоді відкривається лише всередині рамки, а якщо адреси рамки немає серед дозволених сайтів, замість вибору зʼявиться тільки посилання на бронювання. У такому конструкторі виберіть форму прямо на сторінці й задайте рамці висоту щонайменше 700 px або поставте посилання з варіанта лише посилання на кнопку конструктора.
Без скрипту і лише посилання
Якщо сайт не пропускає чужий скрипт, використайте варіант без скрипту (чистий iframe). Він має фіксовану висоту 700 px і не підлаштовується під вміст.
<iframe src="https://reservuj.cz/uk/company/vas-podnik/widget" title="Rezervovat" style="width:100%;height:700px;border:0" loading="lazy" sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox"></iframe>Якщо сайт не пропускає навіть iframe, лише посилання веде прямо до бронювання у вашій компанії.
<a href="https://reservuj.cz/uk/company/vas-podnik/rezervovat?utm_source=web&utm_medium=booking_link&utm_campaign=vas-podnik" target="_blank" rel="noopener">Rezervovat</a>Налаштування
Віджет налаштовується атрибутами елемента div з коду для вставлення. Інших атрибутів версія 1 не знає.
| Атрибут | Значення |
|---|---|
data-reservuj-widget |
Адреса вашої компанії в Reservuj, як у посиланні /company/vas-podnik. Обовʼязковий; лише малі латинські літери без діакритики, цифри й дефіси. |
data-variant |
button = кнопка, що відкриває вікно (за замовчуванням); inline = форма прямо на сторінці. |
data-label |
Текст кнопки, за замовчуванням Rezervovat. Програми зчитування з екрана прочитають його й як назву вікна. |
data-color |
Колір кнопки у форматі #rgb або #rrggbb, за замовчуванням #0e7c8c. Інший запис не використовується. На вигляд вибору всередині вікна не впливає. |
- Параметри кампанії utm_source, utm_medium, utm_campaign, utm_content і utm_term з адреси вашої сторінки віджет передасть далі, аж до вікна, де клієнт завершує бронювання.
- Якщо сторінка вставить елемент пізніше (наприклад, після натискання), викличте:
window.ReservujWidget && window.ReservujWidget.scan(); - Під час відкриття вікна або показу форми елемент викликає подію reservuj:open (у detail.slug адреса компанії) — це зручно для власної аналітики.
document.addEventListener('reservuj:open', (event) => {
console.log('Reservuj widget', event.detail.slug);
});Що побачить клієнт
- Кнопку з вашим текстом і кольором. Після натискання відкривається вікно з вибором, на телефоні на весь екран; закривається хрестиком, клавішею Esc або натисканням поруч.
- Послідовно вибирає філію (лише якщо їх кілька), послугу, день і час. Ціни у віджеті базові, остаточну ціну клієнт побачить і підтвердить під час завершення.
- Натискання на час відкриває нове вікно Reservuj. Хто не увійшов, побачить Máte vybraný termín (ви вибрали час) і після входу чи реєстрації завершить бронювання. Вибір дійсний 30 хвилин, потім клієнт вибирає час знову.
Поширені проблеми
Замість вибору часу є лише кнопка, що відкриває бронювання в новому вікні
Віджет не озвався за кілька секунд, і код показав запасне посилання. Найчастіше адреси сторінки немає серед дозволених сайтів: перевірте https, варіант з www і без нього та друкарські помилки. У консолі браузера тоді є помилка frame-ancestors. Так само віджет поводиться, коли він вимкнений або заклад не приймає бронювання (див. нижче).
На сайті нічого не зʼявляється
Сайт або конструктор видалили код під час збереження, або скрипт блокує політика безпеки вмісту (CSP) вашого сайту. Якщо сайт надсилає заголовок Content-Security-Policy, додайте до своїх правил адресу порталу:
Content-Security-Policy: script-src 'self' https://reservuj.cz; frame-src https://reservuj.czДля варіанта без скрипту достатньо frame-src. Якщо CSP змінити не можна, використайте лише посилання.
Віджет повідомляє, що онлайн-бронювання тут зараз недоступне
Заклад зараз не приймає бронювання через віджет: віджет вимкнений, e-mail закладу не підтверджений, заклад не запущений або призупинений. На вашому сайті тоді замість вибору зʼявиться посилання на бронювання; повідомлення ви побачите, якщо відкриєте віджет окремо. Чого бракує, скаже адміністрування на сторінці Widget na web.
Немає послуги або вільного часу
Онлайн зараз не можна забронювати жодної послуги: у прайс-листі немає чинної послуги для основної категорії клієнтів. Найближчими тижнями немає вільного часу: перевірте робочі години, зміни працівників і за скільки наперед можна бронювати послугу.
Зараз забагато запитів одночасно
Віджет гальмує понад 60 запитів за хвилину з однієї IP-адреси (наприклад, з одного офісу). За хвилину все пройде саме.