Widget and embed

The BookFlow embed widget is a small JavaScript snippet you drop on your existing website. It opens a booking modal in-place — customers never leave your site. Use it on every page where you want a "Book now" button.

Get the snippet

Go to /dashboard/widget. The actual widget attributes (read in apps/widget/src/embed.ts) are:

• data-bookflow-slug: your business slug (e.g. "demo-salon"). Required.
• data-bookflow-mode: "popup" (default) or "inline".
• data-bookflow-base-url: override the API base URL. Optional.
• data-bookflow-color: any hex color. Matches your brand.

Place the attributes on any element on the page. The widget scans the DOM for elements with data-bookflow-slug on load. There is no data-bookflow-open, data-bookflow-inline, data-text, or data-position attribute; the mode is chosen per element by the data-bookflow-mode value.

Popup mode (most common)

<button data-bookflow-slug="demo-salon">Book now</button>
<!-- or -->
<a href="#" data-bookflow-slug="demo-salon">Book now</a>

When the user clicks the element, the booking flow opens in a popup. The full flow happens without leaving your site. On completion, the popup shows the confirmation card.

Inline mode

<div data-bookflow-slug="demo-salon" data-bookflow-mode="inline"></div>

The full booking page renders inside this div. Useful if you have a dedicated /book page on your site and want the BookFlow experience to live there.

Custom domain

If you have a custom domain (e.g. book.yoursalon.com), the widget automatically detects it and shows your business's branding. You don't need a different snippet.

What the widget respects

• Your business's services, staff, hours (same data as the public booking page)
• Your template + accent color (looks like an extension of your site)
• Mobile, tablet, desktop — fully responsive
• Your customer's session — if they have a BookFlow account, it pre-fills
• Your cancellation policy
• Your deposit requirement (charges via Stripe)

What the widget doesn't do

• Doesn't bypass your services/staff/hours setup
• Doesn't work on a customer's own domain (only on yours)
• Doesn't expose a public CSS theme API; styling is governed by the tenant's widget_color and template_accent fields.

Tracking conversions

The widget's public emitter API uses BookFlow.on(event, fn) and emits:

• booking:confirmed — fired when the customer completes a booking (payload is the booking object).

The window-level bookflow:open, bookflow:step, bookflow:booking, and bookflow:close events are NOT fired by the current widget. Subscribe via the JS API instead:

BookFlow.on("booking:confirmed", (booking) => { /* GA, Mixpanel, etc. */ });