Віджети бронювання

Створення та вбудовування віджетів бронювання з конструктора віджетів робочого простору — конфігурація, попередній перегляд і усунення несправностей.

Віджети бронювання дозволяють клієнтам бронювати послуги на вашому сайті без відвідування повного порталу клієнта.

Кожен робочий простір ServEase має власний Конструктор віджетів:

{workspace-id}.widgets.servease.io

Замініть {workspace-id} на ідентифікатор орендаря. Увійдіть з обліковими даними адміністратора, потім створюйте та налаштовуйте стільки віджетів, скільки потрібно — кожен зі своїм кодом вбудовування.

Settings → Customer portal widget в адмін-панелі дублює ту саму конфігурацію для попереднього перегляду та збереження. Для щоденного вбудовування на сайт більшість команд використовують окремий конструктор віджетів за адресою {workspace-id}.widgets.servease.io. Див. Віджет порталу клієнта.

Типи віджетів

Під час створення або редагування віджета оберіть тип у розділі Widget:

Тип	Найкраще для
Calendar	Сітка місяця, тижня або двох тижнів — перегляд доступності в часі
Timetable	Щоденні колонки розкладу — перегляд слот за слотом
List	Прокручуваний список або сітка послуг або слотів для бронювання
Map	Перегляд за локацією — корисно, коли важливі відстань і географія

Кожен тип має власні опції (типовий вигляд, формат часу, макет, налаштування карти тощо), описані нижче.

П’ять розділів конфігурації

Бічна панель конструктора віджетів має п’ять основних розділів. Зміни застосовуються до віджета, який ви редагуєте; створюйте кілька віджетів для різних сторінок або аудиторій.

Settings

Language — типова локаль для відвідувачів (наприклад, English, Polish, German).
API base URL — визначається для середовища вашого орендаря (лише для читання).
Preview data source — Live data (реальні послуги та слоти) або Demo data, коли ваш каталог ще порожній або ви хочете безпечний попередній перегляд без достатньої кількості опублікованих послуг.

Основна поведінка та процес бронювання:

Widget type — Calendar, Timetable, List або Map (див. вище).
Enable service overview pages — дозволяє клієнтам відкрити стилізований огляд послуги перед бронюванням (див. Сторінки огляду послуг).
Overview template — коли огляд увімкнено, оберіть стиль макету (Professional, Luxury, Simple, Friendly, Minimal, Bold, Nature, Retro тощо).

Опції для конкретного типу (за потреби):

Тип	Приклади
Calendar	Типовий вигляд (week / fortnight / month), представлення services vs time-slots, початок тижня в понеділок або неділю, формат часу (12h / 24h), slot columns (час початку, назва, опція, команда, співробітники, ціна, локація — текст або іконки)
Timetable	Формат часу, підсвічування доступних слотів
List	Макет: grid або list
Map	Необов’язковий Google Maps API key, одиниця відстані (km / mi)

Filters

Попередньо визначте, що показує віджет, щоб відвідувачі бачили сфокусований каталог, а не все одразу:

Services, teams, search term
Start / end date (з пресетами, наприклад today, next week, next month)
Min / max price, distance (на віджетах map)

Використовуйте фільтри при вбудовуванні віджета на landing page кампанії («Book yoga only») або сайті для конкретної локації.

Display

Показати або приховати UI-елементи навколо процесу бронювання:

Перемикач	Ефект
Filters bar	Попередньо задані елементи керування фільтрами видимі відвідувачам
Search / date / price / distance	Окремі елементи керування фільтрами (коли filters bar увімкнено)
Calendar view switcher	Лише для типу Calendar — елементи керування week / month
List layout switcher	Лише для типу List — перемикач grid vs list
Widget top bar	Заголовок всередині рамки віджета
Outer frame	Рамка навколо віджета

Theme

Візуальний дизайн, незалежний від Frontend theme key порталу клієнта:

Colour presets — вбудовані палітри (default light, dark, ocean, forest та інші).
Custom colours — primary, secondary, surfaces, borders та пов’язані токени.
Typography — font family і size (small / medium / large).
Layout — border radius, spacing density, outer margin.

Попередній перегляд перед вбудовуванням

На великих екранах використовуйте preview panel, щоб перевірити віджет перед публікацією:

Desktop — повна ширина
Tablet — обмежена ширина планшета
Mobile — ширина телефона

Оновіть або відкрийте в новій вкладці, щоб протестувати з live або demo даними. Перевірте фільтри, slot columns і тему на малих екранах — більшість трафіку вбудовування — мобільний.

Вбудовування на ваш сайт

Коли конфігурація готова, натисніть зелену кнопку Embed.

Діалог Copy into your site надає:

Фрагмент iframe (data-servease-widget="true") з посиланням на URL вашого віджета.
Скрипт embed-loader.js — змінює розмір iframe і обробляє modal viewport на host-сторінці.

Вставте обидва — iframe і loader script — там, де має з’явитися віджет. Використовуйте Copy embed code, щоб скопіювати повний фрагмент.

Посилання Troubleshooting відкриває типові рішення (також коротко описані нижче).

Усунення несправностей вбудовування

Швидкі перевірки

Переконайтеся, що iframe має data-servease-widget="true".
Переконайтеся, що embed-loader.js завантажується (видно у вкладці Network браузера).
Переконайтеся, що window.ServeaseEmbedLoader існує в консолі браузера.
Після виправлень на host-сторінці вставте найновіший фрагмент з конструктора віджетів.

Найважливіше правило

Не покладайтеся на script tags всередині dangerouslySetInnerHTML. Сприймайте iframe віджета як справжній компонент у React, Next.js або вашій CMS — а не як сирий HTML.

Типові проблеми

Проблема	Що спробувати
Віджет обрізано	Низ відсутній при першому завантаженні або на mobile — використовуйте останній фрагмент loader; переконайтеся, що `embed-loader.js` виконується; у React/Next рендерте справжній `<iframe />`, а не injected HTML
Оновлення виправляє	Неправильно при першому відвідуванні, правильно після перезавантаження — loader пропущено під час client-side navigation; завантажуйте `embed-loader.js` програмно при mount
Loader не виконується	Скрипт відсутній або `ServeaseEmbedLoader` undefined — замініть свіжим фрагментом; переконайтеся, що host-сторінка не видаляє script tags
Modal приховано елементами сторінки	Модальне вікно бронювання під sticky header — збережіть поточний loader для viewport messages; додайте вертикальний простір навколо iframe
React / Next / CMS	Непослідовно в HTML blocks — витягніть iframe `src`, рендерте `<iframe />` у JSX, завантажуйте loader через `document.createElement('script')`, викликайте `ServeaseEmbedLoader.refresh()` при mount

Віджети потребують опублікованих послуг з дійсними розкладами. Порожній віджет зазвичай означає відсутність слотів для бронювання, фільтри, що виключають усе, або demo mode, поки послуги ще в чернетці.

Сторінки огляду послуг

Сторінки огляду послуг — це необов’язкові landing pages для однієї послуги на хості віджетів — корисні для маркетингових деталей, дописів у соцмережах і посилань «book this treatment».

Увімкніть їх у розділі Widget конструктора віджетів (Enable service overview + типовий template). Клієнти можуть відкрити Overview з модального вікна бронювання, або ви можете згенерувати посилання з Service detail → Generate page.

Кожна активна сторінка огляду включає Link share — відвідувачі копіюють short link (https://{workspace-id}.api.servease.io/o/{code}), який перенаправляє на повну сторінку на {workspace-id}.widgets.servease.io.

Див. Сторінки огляду послуг для шаблонів, Generate page, link share і структури short link.