> ## Documentation Index
> Fetch the complete documentation index at: https://docs.servicebooked.ca/llms.txt
> Use this file to discover all available pages before exploring further.

# Embed on your site

> Drop a ServiceBooked form into your website with an iframe or a hosted link.

Once you've [created a form](/forms/create-a-form) and published it, you have three ways to get it in front of visitors.

## Option 1 — Hosted page

Every form has a public URL: `https://servicebooked.ca/f/<your-form-id>`. Share it as a link from anywhere — your Instagram bio, a Google Ads "destination URL", an email signature, a QR code on a yard sign.

**Best for:** ad campaigns, email links, social media, anywhere you don't have a website to embed into.

## Option 2 — iframe (recommended for most websites)

Copy the ready-made snippet from **Forms → \[your form] → Share** — it already has your form ID and the matching origin filled in. It looks like this:

```html theme={null}
<iframe
  id="sb-form-YOUR-FORM-ID"
  src="https://app.servicebooked.ca/f/YOUR-FORM-ID"
  width="100%"
  height="640"
  frameborder="0"
  style="border: none;"
></iframe>
<script>(function(){var i=document.getElementById("sb-form-YOUR-FORM-ID");if(!i)return;var o="https://app.servicebooked.ca";window.addEventListener("message",function(e){if(e.origin!==o)return;if(e.source!==i.contentWindow)return;var d=e.data;if(d&&d.type==="servicebooked:form-resize"&&typeof d.height==="number"){i.style.height=d.height+"px";}});})();</script>
```

Paste the **whole** snippet, including the `<script>` — that's what auto-sizes the iframe to the form's height (the `height` attribute is just the starting value). Without the script the iframe stays at a fixed height and you get scrollbars or empty space.

**Dark backgrounds:** add `?theme=dark` to the `src` (e.g. `…/f/YOUR-FORM-ID?theme=dark`) to render the form in dark mode — or set the form's default theme in the builder.

**Best for:** WordPress, Squarespace, Wix, Webflow, plain HTML — anywhere you can paste HTML.

### Per-platform iframe install

* **WordPress** — paste into a Custom HTML block on any page.
* **Squarespace** — Add Block → Code → Paste.
* **Wix** — Add → Embed Code → HTML iframe.
* **Webflow** — Drag in an Embed element, paste the iframe HTML.
* **Shopify** — paste into a page's HTML source via the rich-text editor's `<>` button.

## Option 3 — Custom render (advanced)

If you want full control over the form's appearance, we expose the form definition as JSON:

```
GET https://app.servicebooked.ca/api/public/forms/YOUR-FORM-ID
```

Returns the field schema, success message, redirect URL, and styling. You render the fields yourself in your site's design system, then POST submissions back:

```
POST https://app.servicebooked.ca/api/public/forms/YOUR-FORM-ID
Content-Type: application/json

{
  "first_name": "Alex",
  "phone": "...",
  "service_needed": "..."
}
```

**Best for:** developers who want pixel-perfect brand consistency and don't mind doing more work.

Most owners stick with the iframe — it gives you 90% of the customization with zero code.

## Forwarding parameters (UTM tracking)

You can pass URL parameters to the form for analytics. For example:

```
https://servicebooked.ca/f/YOUR-FORM-ID?utm_source=google&utm_campaign=summer-promo
```

The submission's metadata includes any URL parameters that were on the form's page when it was submitted. Useful for attributing leads to specific campaigns.

## Multiple forms on one page

You can embed multiple forms on a single page. Each gets its own iframe. They don't share state.

## Mobile

The hosted form page is responsive by default — works on every screen size. The iframe inherits whatever width you give it; on mobile, set `width="100%"` and the form will fit cleanly.

## What if my form isn't loading?

* **404 page**: form isn't published. Go to **Forms → \[your form]** and toggle the **Published** switch.
* **Empty iframe**: check your iframe's `src` URL has the correct form ID. Form IDs look like 8–10 random characters (e.g., `f/abc12def`).
* **Scrollbars or a cut-off form**: you pasted the `<iframe>` but not the `<script>` next to it. The script auto-resizes the frame — paste the whole snippet.
* **CSS conflicts**: rare with iframes (they're sandboxed) but if you're using Option 3 (custom render), your site's CSS may interfere. Inspect element to debug.

## Next

<Card title="auto-reply" icon="sparkles" href="/forms/ai-auto-reply">
  The AI replies to every submission within seconds — keeping leads warm.
</Card>