Skip to content
SidedoorSidedoorSidedoor Docs

Embedding a widget

Once you’ve enabled a widget and copied its URL, embedding it is a matter of dropping an iframe onto your site. This page walks through the snippet and how to add it in the common website builders.

The basic steps

Section titled “The basic steps”
  1. In Settings → Marketing → Widgets, enable the widget you want and select Copy to grab its embed URL (https://thesidedoor.co/widget/<public_id>).
  2. Paste that URL into an iframe on your page (snippet below).
  3. Publish your page.
  4. Check it on desktop and mobile, and adjust the width or height if needed.

The iframe snippet

Section titled “The iframe snippet”

Paste this wherever you want the widget to appear, replacing the URL with your own:

<iframe
  src="https://thesidedoor.co/widget/<public_id>"
  style="width:100%; max-width:600px; min-height:720px; border:0;"
  loading="lazy"
  title="Book with us">
</iframe>

A few notes on the attributes:

  • width:100%; max-width:600px - the widget fills the space it’s given up to a sensible maximum. Set max-width to match the widget width you chose in the designer.
  • min-height - give it enough room so the content isn’t cut off. Booking and combo flows need more height than a simple voucher form; start around 720px and increase if you see an inner scrollbar.
  • border:0 - removes the default iframe border so it blends into your page.

Adding it in your website builder

Section titled “Adding it in your website builder”

The widget is a standard iframe, so it works anywhere you can add an embed or custom HTML block.

Platform How to add it
Squarespace Add an Embed block (or a Code block on Business plans) and paste the iframe snippet.
Wix Add Embed a Widget → Embed HTML (the HTML iframe element) and paste the snippet.
Webflow Drop an Embed element onto the page and paste the snippet, then publish.
WordPress Add a Custom HTML block (block editor) and paste the snippet. Avoid the plain URL - some setups auto-convert it.
Plain HTML Paste the snippet directly into your page’s markup where you want it.

Sizing

Section titled “Sizing”

Because bookings, events and vouchers each render different amounts of content, there’s no single perfect height:

  • If you see a scrollbar inside the widget, increase min-height.
  • If there’s a big empty gap below it, reduce min-height.
  • Keep width:100% so it stays responsive on mobile, and cap it with max-width to match your chosen designer width (narrow / medium / wide).

Troubleshooting

Section titled “Troubleshooting”
Symptom Likely cause and fix
Widget shows a “turned off” message The widget type is disabled. Re-enable it in Settings → Marketing → Widgets.
Nothing appears The embed was pasted as plain text, not HTML. Use a Custom HTML / Embed block, not a text block.
Content is cut off or has an inner scrollbar Increase the iframe’s min-height.
Colours or logo look wrong Widgets inherit your branding and the designer settings - check those, not the iframe.
The voucher widget won’t enable Gift vouchers aren’t switched on. See Gift vouchers.