Help Center
Getting Started
Core Features
Payments & Analytics
Settings
Team & Scheduling
Integrations
White-Label
Getting Started
Widget & Embedding
Add the BookingMachine booking widget to any website with one line of code.
Quick Start
Copy this script tag and paste it anywhere on your website where you want the booking widget to appear:
<script src="https://bookingmachine.io/embed.js" data-business="your-business-slug" async></script>Replace your-business-slug with your slug from Settings. The widget loads automatically, fetches your services and pricing, and handles the entire booking flow.
Configuration Attributes
Customize the widget using data-* attributes on the script tag:
| Attribute | Required | Description |
|---|---|---|
| data-business | Yes | Your business slug (e.g. "sparkle-detail-co") |
| data-mode | No | Display mode: "inline" (default), "floating", or "modal" |
| data-primary-color | No | Primary color hex (e.g. "#6366f1"). Defaults to your dashboard brand color |
Display Modes
Inline (Default)
The widget renders directly where you place the script tag. Best for dedicated booking pages or sections.
Floating Button
A "Book Now" button appears in the bottom-right corner. Clicking it opens the widget in a slide-out panel.
<script src="https://bookingmachine.io/embed.js"
data-business="your-slug"
data-mode="floating"
async></script>Modal
The widget opens as a full-screen overlay. Currently triggered via the floating button interaction. Place the embed code with data-mode="modal" on your page.
Platform Guides
WordPress
Use a Custom HTML block in the WordPress editor. Paste the script tag. Works with Elementor (HTML widget), Divi (Code module), Beaver Builder, and WPBakery (Raw HTML element).
Wix
Click "+" > "Embed" > "Embed HTML". Paste the script tag. Set the element height to at least 600px for the best experience.
Squarespace
Use a Code Block in the Squarespace editor. Paste the script tag. Disable "Display Source" if shown.
Any HTML site
Paste the script tag directly into your HTML where you want the widget to appear. It works on any page.
Custom Events
The widget emits DOM events you can listen for with JavaScript:
| Event Name | When It Fires |
|---|---|
| bookkit:step-changed | Customer moves to a new step in the booking flow |
| bookkit:quote-calculated | A price quote is calculated (includes total and line items) |
| bookkit:booking-confirmed | A booking is successfully created (includes bookingId and total) |
| bookkit:lead-submitted | A lead is submitted in quote mode |
| bookkit:customer-info-submitted | Customer provides contact info during booking |
| bookkit:config-loaded | Widget configuration loaded (includes tracking config) |
document.querySelector("bookkit-widget")
.addEventListener("bookkit:booking-confirmed", (e) => {
console.log("Booking ID:", e.detail.bookingId);
console.log("Total:", e.detail.total);
});Shadow DOM
The widget uses Shadow DOM for complete style isolation. Your site's CSS will never affect the widget, and the widget's styles will never leak into your page. This means it works reliably on any site regardless of existing CSS.
Troubleshooting
Widget not appearing? Check that your business slug is correct and your account is active. Open browser DevTools console for error messages.
Styles look broken? The widget uses Shadow DOM — your site's CSS resets should not affect it. If you see issues, check for JavaScript errors in the console.
Payment step not showing? The payment step only appears when Stripe is connected in Settings > Payments.
Still have questions? Contact support