BookingMachine
Help Center
Getting Started
Core Features
Payments & Analytics
Team & Scheduling
Integrations
Integrations
Advanced Widget Config
Multiple widgets, display modes, custom events, and Shadow DOM architecture.
Widget Architecture
The BookingMachine widget consists of two parts:
Embed loader (
embed.js, ~2KB gzipped) — Readsdata-*attributes, creates the<bookkit-widget>element, and lazy-loads the main bundle.Widget bundle (
widget.js, <40KB gzipped) — The full Lit Web Component with Shadow DOM. Loaded only when needed.
All Data Attributes
| Attribute | Type | Description |
|---|---|---|
| data-business | string (required) | Your business slug |
| data-mode | string | "inline" (default), "floating", or "modal" |
| data-primary-color | hex string | Override the primary brand color (e.g. "#6366f1") |
| data-widget | string | Widget configuration slug (for multiple widget configs) |
| data-source | string | Attribution source for tracking where bookings come from |
| data-directory | string | Directory slug (for directory integration bookings) |
| data-listing | string | Listing slug (for directory integration bookings) |
Display Modes
| Mode | Behavior |
|---|---|
| inline | Renders in the page flow where the script tag is placed |
| floating | "Book Now" button in the bottom-right corner, opens a slide-out panel on click |
| modal | Reserved for programmatic triggering (coming soon) |
Multiple Widgets
You can place multiple widget instances on the same page. Each <script> tag creates an independent widget with its own configuration. Use different data-widget slugs to show different widget configurations.
Custom Events
All events are dispatched on the <bookkit-widget> element:
| Event | Detail Payload | Use Case |
|---|---|---|
| bookkit:config-loaded | { trackingConfig } | Widget initialized with business config |
| bookkit:step-changed | { step } | Track funnel progression |
| bookkit:quote-calculated | { total, lineItems } | Track quote values for remarketing |
| bookkit:booking-confirmed | { bookingId, total, service } | Track conversions and revenue |
| bookkit:lead-submitted | {} | Track lead generation |
| bookkit:customer-info-submitted | {} | Track form completions |
Shadow DOM
The widget uses Shadow DOM for complete CSS isolation. This means:
Your site's CSS never affects the widget
Widget CSS never leaks into your page
Works reliably on any site regardless of CSS frameworks or resets
The only way to customize appearance is via
data-primary-color
Tracking Integration
When a business has tracking configured (GA4, GTM, Facebook Pixel), the widget automatically injects the necessary scripts and fires events. See the Analytics & Tracking guide for details.
Still have questions? Contact support