Embed widget API

Installation and Composer auth are covered in Installation. This page is the reference for developers wiring embeds into custom platforms, SPAs, or CMS templates beyond copy-pasting the Share snippet.

Assets

embed.js runs on the host page (your website); embed-child.js runs inside the fill iframe and reports things like content height back to the parent for auto-resize. Both are registered loadedOnRequest() — they never load globally in the Filament admin panel.

Standard iframe embed

string

required

The full public fill URL for the form, including the /embed suffix and any query flags. This is what embed.js reads to lazily set src on load.

<iframe
  data-flex-form-src="https://your-app.test/forms/contact-us/embed"
  loading="lazy"
  width="100%"
  height="800"
  frameborder="0"
  title="Contact us"
  allow="fullscreen"
></iframe>
<script async src="https://your-app.test/vendor/flex-forms/embed.js"></script>

// Call after injecting new iframes dynamically (e.g. client-side routing)
window.FlexForms.loadEmbeds();

Query flags (iframe src)

<script async src="https://your-app.test/vendor/flex-forms/embed.js"></script>
<button
  type="button"
  data-flex-form-open="contact-us"
  data-flex-form-layout="modal"
  data-flex-form-width="376"
  data-flex-form-position="bottom_right"
>
  Open form
</button>

<script async src="https://your-app.test/vendor/flex-forms/embed.js"></script>
<a href="#flex-form-open=contact-us&flex-form-layout=modal&flex-form-width=376&flex-form-position=bottom_right">
  Open form
</a>

Show Full-page HTML (self-contained)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script async src="https://your-app.test/vendor/flex-forms/embed.js"></script>
  </head>
  <body style="margin:0;padding:0;">
    <iframe
      data-flex-form-src="https://your-app.test/forms/contact-us/embed"
      loading="lazy"
      title="Contact us"
      frameborder="0"
      allow="fullscreen"
      style="width:100%;height:100vh;border:0;display:block;"
    ></iframe>
  </body>
</html>

Always resolve the exact host, slug, and script URL from your own app’s Share tab or FormEmbedBuilder output — the samples above use placeholder hosts and will 404 as-is.

APIs & config

Extensibility

Architecture

Assets

Standard iframe embed

Query flags (iframe src)

​Assets

​Standard iframe embed

​Query flags (iframe src)

​Popup mode (button or link trigger)

Assets

Standard iframe embed

Query flags (iframe src)

Popup mode (button or link trigger)