Embedding the booking widget on your website — StudioOps Help

If you already have a website, sending customers to studioops.uk/your-slug/book breaks the flow — they leave your site, your branding, your back button stops feeling right. The embed widget fixes that: paste a short snippet into your site's HTML and the StudioOps booking flow renders inside your page in an iframe.

The widget is the same booking flow as the standalone page — same slots, same staff cards, same payment rails, same confirmation emails. From the customer's point of view, they never leave your site.

Setup takes about five minutes once you have the snippet.

1. Generate your snippet

In StudioOps, go to Settings → Booking page → Embed widget and click Copy snippet.

The snippet looks something like this:

<div id="studioops-booking"></div>
<script src="https://studioops.uk/embed/widget.js"
        data-studio="your-slug"
        defer></script>

The data-studio value matches your studio's URL slug. Everything else is fixed — every studio's snippet shape is identical apart from that one attribute.

A Copy snippet button copies the whole block to your clipboard. A live preview below the snippet shows how the widget will render on a sample page.

2. Paste it into your website

Wix

Wix editor → Add → Embed Code → Embed HTML. Paste the snippet, click Update, then drag the embed block onto the page where you want the booking widget to live. Resize the block to be at least 600px tall so the booking flow has room.

Squarespace

Squarespace editor → click the + to add a block → Code. Paste the snippet, click Apply. The widget will render in the block on save.

WordPress

If your theme supports Custom HTML blocks (most modern themes do), add a Custom HTML block to your page and paste the snippet. If your theme is older, paste it into a Code Editor view of the page content.

Avoid the Visual editor on WordPress — it sometimes mangles the <script> tag. Switch to Code editor (top-right menu) and paste there.

Shopify

Shopify admin → Online Store → Pages → Add page (or edit an existing page). Click Show HTML (<> icon in the editor toolbar) and paste the snippet.

Raw HTML / static site

Paste the snippet anywhere you want the widget to appear in your page's HTML. The widget renders in place of the <div id="studioops-booking"> element.

3. How it works

The snippet does two things:

The <div id="studioops-booking"> is the placeholder where the widget appears.
The <script src="...widget.js" data-studio="your-slug"> loads our embed script, which finds the placeholder and renders an iframe into it pointing at studioops.uk/your-slug/book?embed=1.

The ?embed=1 query string tells the StudioOps booking page to render in embed mode — no site header, no site footer, no top-level navigation, just the booking flow. This makes the iframe blend cleanly with the surrounding page rather than looking like a website-within-a-website.

A small height-adjuster runs in the iframe: when the booking flow's content grows (e.g. the customer expands the staff selector or fills in a long form), the iframe resizes itself so there's no internal scrollbar. Your host page scrolls naturally instead.

4. What customers see

A customer landing on your website page sees:

Your site header and navigation (unchanged)
The booking flow inline — service picker, slot grid, customer details form, payment step
Your site footer (unchanged)

When they confirm a booking, they stay on your page — the post-booking "thank you" content renders inline in the iframe. No redirect, no popup.

The confirmation email still comes from your StudioOps studio address (your-slug@studioops.uk), and the appointment lands in your StudioOps diary exactly the same as if they'd booked from studioops.uk/your-slug/book directly.

5. Mobile responsiveness

The iframe is responsive — it adapts to the width of the container it's pasted into. On Wix / Squarespace / WordPress with a standard responsive theme, it renders fine on mobile out of the box.

A few things to watch for:

Container width — if your hosting page wraps the iframe in a narrow column (e.g. a Squarespace block sized to half-width), the booking flow gets cramped. Best practice: give the iframe a full-width container, or at least 80% page width on desktop.
Container height — the height-adjuster handles this automatically, but some site builders set a minimum height that's too small. If you see the widget cut off on first load, manually set the block's min-height to 600px.
iOS Safari — some older iOS versions struggle with iframe sizing on the first page-paint. The widget recovers within a second; if you want to be defensive, leave a brief loading message in the placeholder div ("Loading booking…") so the moment of resize isn't visible.

6. CSP / Content Security Policy

If your site has a Content Security Policy header (most don't — Wix / Squarespace / WordPress out-of-the-box don't), you may need to add studioops.uk to your frame-src directive.

Symptoms of a CSP block: the iframe renders blank, and your browser's console shows a "Refused to frame" message.

Fix: add frame-src https://studioops.uk; to your site's CSP. On WordPress with a security plugin, this is usually a checkbox under "Allow iframes from".

Most studios don't need to think about this. If your site does something custom, your hosting platform's docs will explain.

7. Updates and version management

The widget script loads from our domain (https://studioops.uk/embed/widget.js). When we ship UI improvements to the booking flow, your embed gets them automatically — no need to re-paste the snippet or update anything on your site.

If we ever ship a breaking change to the embed contract (rare), we'll email all studios with embed snippets installed and document the upgrade path before deprecating the old version. Backward compatibility is taken seriously here because every studio with an embedded widget on their site is effectively asking us not to break their booking flow.

8. When NOT to use the embed widget

A few cases where the standalone booking page works better:

Your site builder doesn't support custom HTML — some older Wix / Weebly templates lock down HTML embedding. In that case, just link out to studioops.uk/your-slug/book from a button on your site. Customer experience is slightly worse but works.
You don't have a website at all — use the studio profile page at studioops.uk/your-slug as your homepage instead (see the dedicated article). Cheaper, faster, and looks better than a half-built embed on a half-built website.
You want a single landing URL with no host page chrome — same answer: use the studio profile or the booking page directly.