# Responsive iframe (/docs/embeds/iframe)



The iframe is the fastest and most isolated integration. Pollaris renders the form, handles branching and validation, and ships updates without changes to your site.

## Add the embed [#add-the-embed]

Copy the deployment-specific snippet from **Share → Embed**. It follows this shape:

```html
<iframe
  src="https://forms.example.com/embed/FORM_SLUG?theme=auto"
  title="Customer feedback"
  loading="lazy"
  data-pollaris-embed
  style="width: 100%; border: 0; min-height: 420px"
></iframe>
<script type="module" src="https://cdn.example.com/embed/v1/iframe.js"></script>
```

The helper script securely listens for versioned messages from that exact iframe and updates its height as the form changes. Without it, the form still loads, but you must choose a fixed height and may see internal scrolling.

## Configure the form [#configure-the-form]

1. Publish the form and copy its generated snippet.
2. Paste the code where the form should appear.
3. If the same site also uses one-page submission, add its exact origin in Pollaris.
4. Test from a served website rather than opening the HTML file directly.

The hosted route accepts `theme=light`, `theme=dark`, or `theme=auto`. Use the Share screen's generated URL so it remains consistent with your deployment.

## Multiple forms on one page [#multiple-forms-on-one-page]

Give each iframe `data-pollaris-embed` and load the helper once, after the iframes. The helper tracks each iframe window and instance ID independently.

## Completion events [#completion-events]

For JavaScript control instead of the auto-starting browser bundle, import the helper:

```js
import { autoResizePollarisIframes } from 'https://cdn.example.com/embed/v1/index.js';

const stop = autoResizePollarisIframes({
  formsOrigin: 'https://forms.example.com',
  minHeight: 320,
  onComplete({ form, responseId }) {
    console.log(`Form ${form} completed`, responseId);
  },
});

// Call stop() if your page removes the embeds.
```

Do not treat `responseId` as proof of identity or include it in public analytics payloads unless you have a clear need and privacy basis.

## Troubleshooting [#troubleshooting]

* **Form not found:** Publish the form and confirm its slug.
* **Origin not allowed in one-page mode:** Add the parent page's exact origin, including its port in development.
* **Height does not change:** Load `iframe.js` once and retain `data-pollaris-embed` on the iframe.
* **Wrong message origin:** Ensure `formsOrigin` matches the iframe URL's origin exactly.
* **CSP error:** Your site's `frame-src` policy must allow the Pollaris forms origin; `script-src` must allow the embed CDN.