# Embed your form

> Add a Caramel form to any website with a snippet, or share a direct hosted link.

Publish a form anywhere by pasting an embed snippet into your site, or by sharing its hosted link. Submissions flow straight into [Customers](../customers/index) and any connected automations.

## Before you begin

- Create and publish a form. See [Create a form](create-a-form).
- To use the snippet embed: have edit access to your website's HTML, or a page builder that supports custom code blocks.

## Hosted link

Every published form has a hosted link at `https://app.caramelme.com/f/{slug}`. Share it in an email, bio link, QR code, or anywhere you can paste a URL — no code needed.

To find your form's link:

1. Go to `/business/:id/forms` and open your form.
2. Select the **Embed** tab.
3. Click **Preview** to open the hosted link in a new window, or copy the URL directly from your browser's address bar.

## Embed snippet

For a form embedded directly in a web page, use the embed snippet. The **Embed** tab generates the correct code based on the embed type you choose.

### Choose an embed type

| Type | Behavior |
|---|---|
| **Inline** | The form appears in place, inside your page content |
| **Popup** | A modal overlay that appears based on a trigger |
| **Slide-in** | A corner widget that slides in based on a trigger |
| **Iframe** | A plain iframe — no triggers, works in any environment |

### Configure trigger settings (Popup and Slide-in only)

For Popup and Slide-in, choose when the form appears:

| Trigger | When it fires |
|---|---|
| **Delay** | After a set number of seconds (0–300) |
| **Scroll** | When the visitor scrolls past a percentage of the page (0–100%) |
| **Exit intent** | When the visitor moves to leave the page |
| **Click** | When the visitor clicks a specific element on your page |

Additional options for Popup:
- **Show once per session** — prevents the popup from appearing again during the same browser session (default: on).
- **Dismiss duration** — hours before the popup re-shows after being dismissed (default: 24).

### Set a default language

Choose the language for UI strings (button labels, error messages) from the **Default language** dropdown. Options: Auto-detect (uses the visitor's browser language), English, Español, Français, Deutsch, Italiano.

### Get the snippet

1. Open your form and select the **Embed** tab.
2. Choose an embed type.
3. Configure any trigger or language settings.
4. Click **Copy** to copy the generated snippet.

<!-- screenshot: the Embed tab with the Popup type selected, trigger set to Delay, and the snippet in the code box -->

### Add the snippet to your site

Paste the snippet into your site's HTML at the location where you want the form to appear. For a page builder, use a custom HTML or code block.

**Inline example snippet:**
```html
<div data-caramel-form="your-form-slug"></div>
<script src="https://app.caramelme.com/widget/caramel-forms.js"
  data-form-id="your-form-slug"
  data-type="inline">
</script>
```

**Popup example snippet:**
```html
<script src="https://app.caramelme.com/widget/caramel-forms.js"
  data-form-id="your-form-slug"
  data-type="popup"
  data-trigger="delay"
  data-delay="30"
  data-show-once="true"
  data-dismiss-hours="24">
</script>
```

> **Note** For a click-triggered popup, the snippet includes a sample `<button>` element. Replace it with any element on your page and update the `data-trigger-selector` attribute to match your element's CSS selector.

## Restrict which domains can embed your form

By default, your form can be embedded on any domain. To limit it:

1. In the **Embed** tab, find the **Domain Allowlist** card.
2. Add each domain that's allowed to embed the form (for example, `yourdomain.com`).
3. Click **Save Changes**.

Requests from unlisted domains are blocked.

## Test a submission

1. Visit the hosted link or open a page where you embedded the form.
2. Fill in the form and submit it.
3. Go to `/business/:id/forms`, select your form, and open the **Submissions** tab to confirm the test submission appeared.

> **Tip** URL query parameters matching field IDs pre-fill those fields automatically. For example, `?email=hello@example.com` pre-fills an email field with the id `email`. Useful for passing known data from your site into the form.

## Next steps

- [Where submissions go](where-submissions-go) — See how submissions route to Customers and automations.
- [Spam protection](spam-protection) — Enable spam protection to block bot submissions.
- [Form analytics](form-analytics) — Track views and conversion after going live.