BookingMachine

Help Center

Getting Started

Core Features

Payments & Analytics

Team & Scheduling

Integrations

White-Label

Reference

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 Dashboard > Settings. The widget loads automatically, fetches your services and pricing, and handles the entire booking flow.

Tip: Find your business slug in Dashboard > Settings > General, or copy the full embed code from Dashboard > Widget.

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>

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.

Wix Embed Special Instrcutions

If you don't have the Wix app installed, you can embed the booking widget manually using an HTML iframe element.

In the Wix Editor, click "+" → "Embed Code" → "HTML iframe"

Click the element and select "Enter Website Address"

Paste your embed URL

https://bookingmachine.io/wix-embed?slug=your-business-slug&widget=main

*Replace your-business-slug with your slug from Dashboard > Settings, and main with your widget slug if using multiple widgets.

Drag the element to full width and at least 700px tall

Publish your site

Important: Do not use "Code" mode — use "Website Address" mode. The Website Address approach works reliably on all Wix sites including custom domains.

You can see the full wix app and embed instructions here.

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 Dashboard > Settings > Payments.

Previous← Getting Started

NextServices & Pricing →

Still have questions? Contact support