Embedding a widget

Once you’ve enabled a widget, you can add it to your site in one of two ways:

• Embed code (recommended) - a one-line <script> snippet you paste into your page. No iframe to size, and for the Table Reservations, Guest List and Events widgets it draws the first step right on your own page so the pickers are never clipped.
• Standalone URL - the hosted link to the widget’s own page. Use it to open the widget in a new tab, or drop it into a plain iframe if a script tag isn’t an option.

Both are generated for you in the portal.

The basic steps

1. In Settings → Marketing → Widgets, enable the widget you want.
2. Open Show widget code on that widget’s row. It reveals two options, each with its own copy button:
   • Embedded - a ready-made <script> snippet. Select Copy embed code.
   • Standalone - the hosted link (https://thesidedoor.co/widget/<public_id>). Select Copy URL, or Preview to open it in a new tab.
3. Paste your chosen snippet into your website (see below).
4. Publish your page, then check it on desktop and mobile.

The embed code (recommended)

Copy embed code gives you a one-line snippet. Copy it straight from the portal: along with your widget’s ID it includes a short version tag (?v=...) that pins the snippet to the current release, so paste the exact code the portal gives you rather than retyping it. It looks like this:

<script src="https://thesidedoor.co/widget-embed.js?v=..."
        data-sidedoor-widget="<public_id>" async></script>

Paste it wherever you want the widget to appear. The script fetches your widget’s settings automatically, so there’s nothing else to configure:

• No iframe sizing. The script sizes itself to your page, so you don’t have to guess a min-height or worry about an inner scrollbar.

• Pickers are never clipped. For the Table Reservations, Guest List and Events widgets, the first step is drawn directly on your own page, so its dropdowns and calendars can open freely instead of being cut off inside a small box:

  • Table Reservations - date, party size and time.
  • Guest List - date and party size.
  • Events - a date picker for the venue’s upcoming dates.

  Once the guest continues, the rest of the flow opens in a full-screen overlay.

• Other widgets (Vouchers, Waitlist, Experiences and the All-in-one widget) open in that full-screen overlay from the start.

The standalone URL and iframe

If you can’t add a script tag, or you’d rather keep the widget inline in a fixed-size box instead of expanding to full screen, use the Standalone URL in a plain iframe instead. 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. A max-width of around 600px comfortably fits every widget; lower it if you’re dropping the widget into a narrow column or sidebar.
• min-height - give it enough room so the content isn’t cut off. Table Reservations and All-in-one 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

Both the script snippet and the iframe are plain HTML, so they go in the same embed or custom HTML block wherever you’d add one:

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

Note

Some page builders only offer an “embed a URL” block rather than a raw HTML block. Those can’t run the script snippet - use the Standalone URL in an iframe there instead.

Sizing

The script embed sizes itself to your page, so you don’t need to tune its height. Sizing only applies to the iframe route. Because Table Reservations, 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 (around 600px) so it isn’t stretched too wide on large screens.

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 snippet 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 (iframe route)	Increase the iframe’s min-height, or switch to the script embed, which sizes itself.
Colours or logo look wrong	Widgets inherit your branding and the designer settings - check those, not the snippet.
The voucher widget won’t enable	Gift vouchers aren’t switched on. See Gift vouchers.

Tip

The live preview in the Widgets panel is the real widget. If it looks right in the portal but wrong on your site, the difference is almost always the block type you pasted into (or, on the iframe route, its sizing) - not the widget itself.