Responsive 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

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

<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

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

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

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

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

• 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.