# Embedding & popups

Embed your form on a website or show it as a popup overlay.

## Embedding & popups

Put your form inside any webpage as an inline embed or a popup overlay. You configure it in the Share panel and paste one snippet into your site.

<p>
  Both snippets are built from the share link you have selected, so they carry that link's expiration, response limit, custom domain, and
  analytics. Create the link first — see <a href="/sharing-publishing/sharing-embedding">share links</a>. Query parameter defaults set on
  the link are the one exception: they are not added to embed or popup snippets.
</p>

<h2 id="embed">Inline embed</h2>

<p>
  An inline embed places your form directly inside a page using an iframe. Open the <strong>Share</strong> panel, click the{' '}
  <strong>Embed</strong> card, and copy the generated snippet into your site's HTML.
</p>

<h3 id="embed-layout">Layout</h3>

<h3 id="embed-display">Display</h3>

<p>
  Click <strong>View code</strong> to see the generated HTML. Use <strong>Copy embed code</strong> to copy it, then paste it into your site.{' '}
  <strong>Reset to defaults</strong> restores every setting.
</p>

<h3 id="embed-snippet">What the snippet contains</h3>

<p>
  With auto-resize off, the snippet is a single iframe pointing at your share link with <code>?embed=1</code> appended. The display options
  add their own parameters: <code>hideCover=1</code>, <code>hideLogo=1</code>, and <code>theme=dark</code> or <code>theme=light</code>.
</p>

```html
<iframe src="https://form.formbase.so/Abc12XYz?embed=1" width="100%" height="600" style="border: none;"></iframe>
```

<p>
  With auto-resize on, the iframe is wrapped in a <code>div</code> and followed by a script. The embedded form posts a{' '}
  <code>formbase:resize</code> message on every height change; the script checks the message origin and the sending frame, then sets the
  iframe height. Nothing else on your page is touched, and no external script is loaded.
</p>

<h2 id="popup">Popup</h2>

<p>
  A popup shows your form as an overlay on top of your page. Open the <strong>Share</strong> panel, click the <strong>Popup</strong> card,
  set up your options, and paste the generated code snippet into your site.
</p>

<h3 id="popup-trigger">Trigger</h3>

<p>Choose how the popup opens:</p>

<h3 id="popup-layout">Layout</h3>

<h3 id="popup-display">Display</h3>

<h3 id="popup-styling">Popup styling</h3>

<h3 id="popup-behavior">Behavior</h3>

<p>
  Click <strong>View code</strong> to see the generated snippet. Use <strong>Copy popup code</strong> to copy it, then paste it into your
  site. <strong>Reset to defaults</strong> restores every setting.
</p>

<h3 id="popup-snippet">What the snippet contains</h3>

<p>
  The popup snippet is one self-contained <code>{'<script>'}</code> block. It builds the overlay, the close button, and the iframe in plain
  JavaScript when the popup opens — nothing is added to your page before that, no stylesheet is injected, and no external script is loaded.
  The comment under the script tells you the function name to call:
</p>

```html
<!-- Call window.openFormbasePopup_Abc12XYz() to open the form popup -->
```

<p>
  A hyphen in a custom slug becomes an underscore in the function name, because a hyphen isn't valid in a JavaScript identifier. Copy the
  name from the comment rather than deriving it yourself.
</p>

<h2 id="color-scheme">Color scheme</h2>

<p>Embeds and popups share the same three options, and both override the form's own theme inside the frame:</p>

<ul>
  <li>
    <strong>Let user specify</strong> — the default. The form follows the visitor's operating system or browser dark/light preference.
  </li>
  <li>
    <strong>Dark mode</strong> — forces dark mode regardless of the visitor's preference.
  </li>
  <li>
    <strong>Light mode</strong> — forces light mode regardless of the visitor's preference.
  </li>
</ul>

> 💡 **Match your site's theme**
> <p>
>     If your website is always dark, set the embed or popup to Dark mode so the form blends in. If your site respects the visitor's
>     preference, choose Let user specify. To theme the form itself, see{' '}
>     <a href="/branding-domains/appearance-theming">appearance &amp; theming</a>.
>   </p>

<h2 id="next-steps">Next steps</h2>
<div class="not-prose grid gap-3 sm:grid-cols-2">
  - [Share links](/sharing-publishing/sharing-embedding) — Create and manage share link URLs
  - [QR codes](/sharing-publishing/sharing-embedding#qr-codes) — Generate and place scannable codes
  - [Custom domains](/branding-domains/custom-domains) — Serve forms from your own domain
  - [Appearance & theming](/branding-domains/appearance-theming) — Theme, cover, logo, dark mode
</div>