Skip to content
goldenhour
Back to help

Embed booking widget

Add your booking page anywhere

A two-line snippet drops your goldenhour booking page into any website: Squarespace, Wix, WordPress, Showit, a static HTML page. The companion script auto-resizes the iframe as customers move from service → date → time → confirm, so there’s never a scrollbar or empty space.

The snippet

Two lines, paste anywhere

<iframe src="https://goldenhourhq.com/book/<your-slug>" width="100%" frameborder="0" style="border:0;display:block;width:100%;"></iframe>
<script src="https://goldenhourhq.com/embed.js" async></script>

Replace <your-slug> with your booking slug from Settings. If you’ve set up a custom domain (e.g. book.yourbrand.com), use that hostname instead of goldenhourhq.com on both lines.

Per-platform recipes

Five host platforms

  1. Squarespace

    Use a Code block to drop the iframe + script anywhere on the page. Squarespace strips some HTML in markdown blocks: the Code block lets it through.

    1. 01Edit the page where you want the widget.
    2. 02Add a Code block (Insert → More → Code).
    3. 03Paste the snippet below into the block.
    4. 04Save. The iframe loads + the embed.js script resizes it automatically.

  2. Wix

    Wix uses an HTML embed element. The Editor's component browser calls it 'Embed HTML' or 'Embed a Widget'.

    1. 01Open the page editor.
    2. 02Add → Embed → Embed a Widget → Embed HTML.
    3. 03Set the height to 800px initially (the script will resize it).
    4. 04Paste the snippet, click Update.

  3. WordPress (Block editor)

    Gutenberg has a Custom HTML block that accepts the iframe + script unchanged.

    1. 01Add a block, search for 'Custom HTML'.
    2. 02Paste the snippet into the block.
    3. 03Preview to confirm the auto-resize works (the script needs to run on the live page, not just the editor preview).

  4. Showit

    Showit's Embed Code element drops in iframe + script as a single unit. The element auto-fits the canvas width but you'll want to leave headroom for the iframe to grow.

    1. 01Drag an Embed Code element onto the canvas.
    2. 02Paste the snippet into the modal.
    3. 03Set the element height generously (1000-1400px) so the resize script has room to expand into.

  5. Generic HTML

    Any page that lets you write raw HTML. Drop the two-line snippet between your <header> and </footer> tags, ideally inside the same container as your existing content.

    1. 01Open the HTML file (or page editor in raw-HTML mode).
    2. 02Paste the snippet at the spot you want the widget to appear.
    3. 03Save + reload.

How it works

Iframe + script

The iframe loads your booking page; the script listens for height messages from inside the iframe.

Auto-resize

As customers move through service → date → time → confirm, the script grows or shrinks the iframe to fit.

Mobile-friendly

The booking page is already responsive. The script just keeps the parent iframe tight.

Set up your booking page