Venue & Settings
Embed Widget (Booking & Gift Cards on Your Website)
Last updated 19 May 2026
Embed Widget (Booking & Gift Cards on Your Website)
Drop your OpenChair booking flow or gift-card purchase onto any website with a 2-line script tag. Inline, popup, or floating-button mode. Conversion events bubble up via DOM CustomEvents for your analytics. Works in Squarespace, Wix, WordPress, Webflow, Shopify, React, anywhere.
Where to find it — Web: Storefront → Embed widget. Owner / Manager configures; the snippet is paste-and-go on any website.
TL;DR
- 2-line script tag, paste anywhere on your site.
- Three modes: inline, button + popup, floating button.
- Two widget types: booking (default) and gift cards (requires Stripe Connect).
- Conversion events bubble up via
openchair:booking-completeandopenchair:gift-card-purchasedDOM events. - All plans for embed itself. "Hide OpenChair branding" toggle requires PRO.
Getting your embed snippet
- Open Storefront → Embed widget.
- Pick Booking or Gift cards widget type.
- Pick a mode (Inline / Popup button / Floating button).
- Customise label, colour (popup/floating modes).
- Copy the 2-line snippet.
- Paste it into your website where you want the embed.
The snippet looks like:
<script
async
src="https://openchairpro.com/embed.js"
data-venue="your-slug"
></script>
<div data-openchair-embed="inline"></div>
The <script> loads the host script (1-hour cache). The <div> is the mount point — replace the data-openchair-embed value depending on mode.
The three modes
Inline
Renders the booking or gift-card flow in-place, auto-resizing as the customer progresses through steps.
<div data-openchair-embed="inline"></div>
- Min-height: 600px (booking), 480px (gift cards)
- Auto-resize: postMessage signals the host script to adjust height as content changes
- Best for: dedicated booking pages on your website
Button + popup
A standard button that opens a modal overlay containing the booking flow.
<button data-openchair-embed="popup">Book online</button>
- Modal: full-screen overlay with click-outside or Escape to close
- z-index: 2147483647 (highest)
- Body scroll: stashed and restored on close
- Best for: existing site headers or any "Book now" call-to-action
Floating button
A fixed-position pill in the bottom-right corner of every page on your site.
<div
data-openchair-embed="floating"
data-label="Book online"
data-color="auto"
></div>
- Position: fixed bottom-right
- Customisable label: any short text
- Brand-matched colour:
data-color="auto"pulls your storefront accent colour; otherwise pass a hex - Best for: persistent CTA across every page (Wix sites, blogs)
The two widget types
| Widget | data-venue value |
Requires |
|---|---|---|
| Booking | Your venue slug | Nothing special — works on every plan |
| Gift cards | Same slug + data-widget="gift-cards" |
Stripe Connect active (locked until connected) |
The settings page lets you toggle between widget types and the right snippet auto-generates.
Conversion events
When a customer completes an action inside the embed, the iframe sends a postMessage to the host script, which dispatches a DOM CustomEvent on the host page:
| Event | When |
|---|---|
openchair:booking-complete |
Booking confirmed |
openchair:gift-card-purchased |
Gift card purchase succeeded |
Hook them into your analytics:
window.addEventListener("openchair:booking-complete", (event) => {
// event.detail contains booking metadata
ga4Tracker("conversion", { id: event.detail.bookingId });
metaPixel("Purchase", { value: event.detail.value });
});
The embed itself also has its own conversion tracking running inside the iframe — these DOM events let your host site track too.
Plus openchair-embed:resize postMessage for inline auto-sizing (the host script handles this for you).
Live preview in the settings page
The settings page loads embed.js itself, so you can click the popup or floating button preview to see exactly what your customers will see — not a mock, the actual modal.
Install instructions
Collapsible accordion in the settings page with copy-paste instructions for:
- Squarespace — add via Code Block in any section
- Wix — use the HTML embed widget
- WordPress — paste in a Custom HTML block or the theme footer
- Webflow — Embed component in any page
- Shopify — Custom Liquid or theme.liquid
- React / Next.js —
<Script src="..." strategy="afterInteractive" />+ a div in your component
If your platform isn't listed, the 2-line snippet works wherever you can paste HTML.
Customisation
| Setting | What it controls |
|---|---|
| Hide OpenChair branding | Removes the "Powered by OpenChair" footer in the embed iframe. PRO only (sets ?branding=0 on the embed URL) |
| Sections | Booking widgets can show only selected sections with data-sections="services,team,contact" |
| Match storefront colour | Floating button mode pulls your accent colour and computes a contrasting text colour automatically |
| Custom label | Floating and popup modes accept a data-label for the button text |
| Custom colour | Override the auto-matched colour with a hex value |
Security
| Concern | What we do |
|---|---|
| Origin validation | embed.js rejects postMessages from origins other than openchairpro.com |
| X-Frame-Options | Bypassed only for /embed/* and /embed.js* routes. The rest of the app stays framable-blocked |
| Cookie consent | The embed iframe handles its own consent if needed; the host site's consent isn't required for the booking flow itself (no third-party scripts run inside the embed unless you've configured tracking) |
Tier
- Embed itself: all plans
- Hide branding: PRO only
- Gift cards widget: all plans (requires Stripe Connect)
Mobile
Embed loads in any browser, mobile or desktop. The iframe is responsive and adapts to whatever width the host site gives it.
Common mistakes
| Problem | What to check |
|---|---|
| Embed doesn't appear | Confirm the <script> tag is in your site's HTML and the <div data-openchair-embed> is also present. Check browser console for errors. |
| "Powered by OpenChair" still showing on PRO | Hard-refresh the host page (Ctrl+Shift+R / Cmd+Shift+R). The embed script is cached for 1 hour. |
| Inline embed isn't resizing | The postMessage handler in your host site might be blocked. Confirm no CSP rule rejects messages from openchairpro.com. |
| Conversion DOM events not firing | Make sure your addEventListener is on window, not document. The events bubble from the host script's window. |
| Floating button overlaps my site's chat widget | Both want bottom-right. Choose one or use inline/popup mode for OpenChair. |
| Gift cards widget locked | Stripe Connect isn't active on your venue. Complete Stripe onboarding first. |
FAQ
How do I embed booking on my own website?
Copy the 2-line snippet from Storefront → Embed widget and paste it into your site (Squarespace, Wix, WordPress, Webflow, Shopify, React, anywhere). The embed script handles the iframe; you control where it lands via a div with data-openchair-embed attribute.
What modes does the embed support?
Three: inline (renders in-page with auto-resize), button + popup (modal overlay), or floating button (fixed bottom-right pill). Same script, different rendering mode.
How does conversion tracking work for embedded bookings?
The embed dispatches DOM CustomEvents on completion: openchair:booking-complete and openchair:gift-card-purchased. Hook them into your own analytics. The embed iframe is sandboxed and uses postMessage to bubble events up.
Does the embed work for gift cards too?
Yes — same snippet pattern with data-openchair-embed='gift-cards'. Requires Stripe Connect to be active (you'll see a lock until it's connected).
Can I embed individual services or just the whole booking flow?
The embed shows the whole booking flow — service selection, staff, time, customer details, deposit, confirmation. The customer picks from your full menu inside the embed. For a single-service deep-link, use Quick Book Links instead.
Does the embed work on iOS PWAs?
Yes — the iframe loads in any browser context, including iOS PWA. Mobile Safari needs the standard third-party cookie permissions for payment processing to work; this is automatic in normal browsing.