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

Создание и встраивание виджетов бронирования из widget creator рабочего пространства — конфигурация, предпросмотр и устранение неполадок.

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

У каждого рабочего пространства ServEase есть свой Widget creator:

{workspace-id}.widgets.servease.io

Замените {workspace-id} на идентификатор арендатора. Войдите с учётными данными администратора, затем создайте и настройте столько виджетов, сколько нужно — у каждого свой код встраивания.

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

Типы виджетов

При создании или редактировании виджета выберите тип в разделе Widget:

Тип	Лучше всего для
Calendar	Сетка месяца, недели или двух недель — просмотр доступности по времени
Timetable	Колонки дневного расписания — просмотр слот за слотом
List	Прокручиваемый список или сетка бронируемых услуг или слотов
Map	Представление по локациям — полезно, когда важны расстояние и география

У каждого типа свои опции (вид по умолчанию, формат времени, макет, настройки карты и т. д.), описанные ниже.

Пять разделов конфигурации

Боковая панель widget creator содержит пять основных разделов. Изменения применяются к редактируемому виджету; создавайте несколько виджетов для разных страниц или аудиторий.

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-виджетах)

Используйте фильтры при встраивании виджета на лендинг кампании («Book yoga only») или сайт конкретной локации.

Display

Показывайте или скрывайте элементы интерфейса вокруг процесса бронирования:

Переключатель	Эффект
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 — семейство шрифтов и размер (small / medium / large).
Layout — border radius, плотность отступов, внешний margin.

Предпросмотр перед встраиванием

Используйте preview panel на больших экранах, чтобы проверить виджет перед публикацией:

Desktop — полная ширина
Tablet — ширина планшета
Mobile — ширина телефона

Обновите или откройте в новой вкладке для проверки на live или demo data. Подтвердите фильтры, slot columns и тему на маленьких экранах — большая часть трафика встраиваний приходится на mobile.

Встраивание на сайт

Когда конфигурация готова, нажмите зелёную кнопку Embed.

Диалог Copy into your site предоставляет:

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

Вставьте оба — iframe и loader script — туда, где должен появиться виджет. Используйте Copy embed code, чтобы скопировать полный фрагмент.

Ссылка Troubleshooting открывает типовые решения (также кратко описаны ниже).

Устранение неполадок встраивания

Если услуга отсутствует, проверьте режим доступности. Использовать расписание услуги требует корректного расписания. Всегда доступна — без расписания услуги может отображаться без него, но часы команд/ресурсов, локация, бронирования, буферы и лимиты всё равно должны давать доступное время.

Быстрые проверки

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

Самое важное правило

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

Типичные проблемы

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

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

Страницы обзора услуг

Страницы обзора услуг — это опциональные лендинги одной услуги на хосте виджетов — полезны для маркетинговых деталей, постов в соцсетях и ссылок «забронировать эту процедуру».

Включите их в разделе Widget widget creator (Enable service overview + шаблон по умолчанию). Клиенты могут открыть Overview из модального окна бронирования, или вы можете сгенерировать ссылки из Service details → Customer page and booking link → Generate page.

Каждая активная страница обзора включает Link share — посетители копируют короткую ссылку (https://{workspace-id}.api.servease.io/o/{code}), которая перенаправляет на полную страницу на {workspace-id}.widgets.servease.io.

См. Страницы обзора услуг для шаблонов, Generate page, link share и структуры коротких ссылок.