Booking widgets
Create and embed booking widgets from your workspace widget creator — configuration, preview, and troubleshooting.
Booking widgets let customers book services on your website without visiting the full customer portal.
Each ServEase workspace has its own Widget creator:
{workspace-id}.widgets.servease.io
Replace {workspace-id} with your tenant identifier. Sign in with your admin credentials, then create and configure as many widgets as you need — each with its own embed code.
Settings → Customer portal widget in the admin panel mirrors the same configuration for preview and saves. For day-to-day website embeds, most teams use the standalone widget creator at {workspace-id}.widgets.servease.io. See Customer portal widget.
Widget types
When you create or edit a widget, choose a type under the Widget section:
| Type | Best for |
|---|---|
| Calendar | Month, week, or fortnight grid — browse availability over time |
| Timetable | Daily schedule columns — slot-by-slot view |
| List | Scrollable list or grid of bookable services or slots |
| Map | Location-based view — useful when distance and geography matter |
Each type has its own options (default view, time format, layout, map settings, etc.) described below.
Five configuration sections
The widget creator sidebar has five main sections. Changes apply to the widget you are editing; create multiple widgets for different pages or audiences.
Settings
- Language — default locale for visitors (for example English, Polish, German).
- API base URL — resolved for your tenant environment (read-only).
- Preview data source — Live data (real services and slots) or Demo data when your catalog is still empty or you want a safe preview without enough published services.
Widget
Core behaviour and booking flow:
- Widget type — Calendar, Timetable, List, or Map (see above).
- Enable service overview pages — lets customers open a styled service overview before booking (see Service overview pages).
- Overview template — when overview is enabled, pick a layout style (Professional, Luxury, Simple, Friendly, Minimal, Bold, Nature, Retro, etc.).
Type-specific options (when relevant):
| Type | Examples |
|---|---|
| Calendar | Default view (week / fortnight / month), services vs time-slots presentation, week starts on Monday or Sunday, time format (12h / 24h), slot columns (start time, name, option, team, employees, price, location — text or icons) |
| Timetable | Time format, highlight available slots |
| List | Layout: grid or list |
| Map | Optional Google Maps API key, distance unit (km / mi) |
Filters
Predefine what the widget shows so visitors see a focused catalog instead of everything at once:
- Services, teams, search term
- Start / end date (with presets such as today, next week, next month)
- Min / max price, distance (on map widgets)
Use filters when embedding a widget on a campaign landing page (“Book yoga only”) or a location-specific site.
Display
Show or hide UI chrome around the booking experience:
| Toggle | Effect |
|---|---|
| Filters bar | Predefined filter controls visible to visitors |
| Search / date / price / distance | Individual filter controls (when the filters bar is on) |
| Calendar view switcher | Calendar type only — week / month controls |
| List layout switcher | List type only — grid vs list toggle |
| Widget top bar | Header inside the widget frame |
| Outer frame | Border/frame around the widget |
Theme
Visual design independent of the customer portal Frontend theme key:
- Colour presets — built-in palettes (default light, dark, ocean, forest, and others).
- Custom colours — primary, secondary, surfaces, borders, and related tokens.
- Typography — font family and size (small / medium / large).
- Layout — border radius, spacing density, outer margin.
Preview before embed
Use the preview panel on larger screens to check the widget before publishing:
- Desktop — full width
- Tablet — constrained tablet width
- Mobile — phone width
Refresh or open in a new tab to test against live or demo data. Confirm filters, slot columns, and theme on small screens — most embed traffic is mobile.
Embed on your website
When configuration is ready, click the green Embed button.
The Copy into your site dialog provides:
- An iframe snippet (
data-servease-widget="true") pointing at your widget URL. - The
embed-loader.jsscript — resizes the iframe and handles modal viewport on the host page.
Paste both the iframe and the loader script where the widget should appear. Use Copy embed code to copy the full snippet.
A Troubleshooting link opens common fixes (also summarised below).
Troubleshooting embeds
Quick checks
- Confirm the iframe has
data-servease-widget="true". - Confirm
embed-loader.jsloads (visible in the browser Network tab). - Confirm
window.ServeaseEmbedLoaderexists in the browser console. - After host-side fixes, paste the newest snippet from the widget creator.
Most important rule
Do not rely on script tags inside dangerouslySetInnerHTML. Treat the widget iframe as a real component in React, Next.js, or your CMS — not as raw HTML alone.
Common issues
| Issue | What to try |
|---|---|
| Widget is cut off | Bottom missing on first load or mobile — use the latest loader snippet; confirm embed-loader.js runs; in React/Next, render a real <iframe />, not injected HTML |
| Refresh fixes it | Wrong on first visit, correct after reload — loader skipped during client-side navigation; load embed-loader.js programmatically on mount |
| Loader not running | Script missing or ServeaseEmbedLoader undefined — replace with a fresh snippet; ensure the host page does not strip script tags |
| Modal hidden by page chrome | Booking modal under sticky header — keep current loader for viewport messages; add vertical space around the iframe |
| React / Next / CMS | Inconsistent in HTML blocks — extract iframe src, render <iframe /> in JSX, load loader via document.createElement('script'), call ServeaseEmbedLoader.refresh() on mount |
Widgets require published services with valid schedules. An empty widget usually means no bookable slots, filters that exclude everything, or demo mode while services are still in draft.
Service overview pages
Service overview pages are optional single-service landing pages on your widgets host — useful for marketing detail, social posts, and “book this treatment” links.
Enable them in the widget creator Widget section (Enable service overview + default template). Customers can open Overview from the booking modal, or you can generate links from Service detail → Generate page.
Each live overview page includes Link share — visitors copy a short link (https://{workspace-id}.api.servease.io/o/{code}) that redirects to the full page on {workspace-id}.widgets.servease.io.
See Service overview pages for templates, Generate page, link share, and short-link structure.