Embedded Form

The Embedded Form is the same signup experience as the floating Website Popup widget, but delivered without the corner launcher or modal shell. You embed a hosted page in an <iframe> so visitors see only the form (and success states)—ideal for CMS blocks, landing pages, narrow columns, or environments where third-party scripts are restricted.

Together with the floating widget, it is part of a lightweight integration: React and Tailwind, CSS injected by the script, and a separate form-only bundle (firstlist-form-embed*.iife.js) plus firstlist-form-embed.html for iframe use.

	Floating widget (Website Popup)	Embedded form (iframe)
Mechanism	Single `<script>` on your page	`<iframe src="…firstlist-form-embed.html?…">`
UX	Corner button + popup modal	Only the form (no launcher)
Best for	Full-site promos	CMS embeds, narrow columns, no third-party scripts

Registration API: `EmbeddedForm`

Pass at least apiKey in the query string (unless you replace the hosted page and set window.popupConfig before the bundle loads—see Advanced).

The embed bundle always sends signupType: "EmbeddedForm" to the registration API. Any signupType you put in the URL or in window.popupConfig is ignored for that request (it does not switch the embed to WidgetComingSoon / WidgetAssignment; use the floating widget for those).

CDN URLs

After deploy, the embed page is served from the CDN:

Production (from the live branch build):
https://cdn.firstlist.co/firstlist-form-embed.html
(loads firstlist-form-embed.iife.js under the hood.)
Demo / staging (from the main branch build):
Same path firstlist-form-embed.html—the HTML points at the demo script (firstlist-form-embed-demo.iife.js) when a demo build was last deployed to the bucket.

Minimal iframe

<iframe
  title="FirstList embedded signup"
  src="https://cdn.firstlist.co/firstlist-form-embed.html?apiKey=YOUR_API_KEY"
  width="100%"
  height="420"
  style="border:0;max-width:28rem;"
></iframe>

title on <iframe> is an accessibility label (screen readers). It is not the marketing headline—that comes from the title or titleText query parameter.

Example with headline, tab title, and button

https://cdn.firstlist.co/firstlist-form-embed.html?apiKey=YOUR_API_KEY&title=Join%20the%20waitlist&pageTitle=Signup%20%7C%20FirstList&cta=Get%20early%20access

Build the src URL with encoded query parameters (e.g. encodeURIComponent in JavaScript, or manual %20 for spaces).

Query parameters

Parameter	Purpose
`apiKey`	Required (unless fully configured via a custom host page)—widget API key
`signupType`	Ignored for registration—embed always uses `EmbeddedForm` (see above)
`title` or `titleText`	Form heading above the fields (omit for no default marketing line in embed; use empty `title=` for no heading)
`pageTitle`	Title of the browser tab inside the iframe (if omitted but `title` / `titleText` is set, the tab can use that headline)
`cta` or `buttonText`	Submit button label (default in embed if omitted: Get Early Access, same as the popup launcher; optional fallback `initialCTAText` from `popupConfig`)
`footerText`, `googleFont`	Footer copy and font
`backgroundColor`, `fontColor`, `roundedSize`, …	Visual overrides
`successTitle`	Headline on successful sign-up (iframe embed only; has built-in defaults)
`successMsg` or `successText`	Body text under that headline
`successTitleExisting`	Headline when the API reports the user is already registered (`302`) — default: `User already registered`
`successMsgExisting`	Optional body for the “already registered” state

Query parameters override any window.popupConfig object on the hosted embed page for keys that are present in the URL.

Success message defaults (iframe only)

The floating widget still uses the original inbox / verification copy after submit. The embedded form uses these defaults unless you override them:

	Default
Headline	`Success! You're on the list.`
Body	`You are now set up to receive coming soon alerts. Click Continue to customize your search and browse current "Coming Soon" inventory.`
Already registered (`302`)	Title: `User already registered` (no body unless you set `successMsgExisting`)

Short overrides: query string, e.g. &successTitle=Thanks!&successMsg=We will be in touch.
Long copy: use window.popupConfig on a page you host (recommended)—URLs have practical length limits.

Recommended when you need long success copy or many options at once:

<script>
  window.popupConfig = {
    apiKey: "YOUR_API_KEY",
    successTitle: "Success! You're on the list.",
    successMsg:
      'You are now set up to receive coming soon alerts. Click Continue to customize your search and browse current "Coming Soon" inventory.',
    successTitleExisting: "Already on the list",
    successMsgExisting: "Try signing in with that email instead.",
  };
</script>
<script src="https://cdn.firstlist.co/firstlist-form-embed.iife.js"></script>

Use the production or demo script name to match your environment (firstlist-form-embed-demo.iife.js on staging).

The built firstlist-form-embed.html loads only the bundle. For full control, host HTML that mirrors the template: set window.popupConfig = { … }, then include the same firstlist-form-embed*.iife.js script. URL query params still win for keys that appear in the URL.

Deployment checklist (integrators)

CORS: The form posts to the API base URL from the iframe document origin (for example https://cdn.firstlist.co). That origin must be allowed by the API’s CORS policy or the browser will block the request.
Framing: Bucket or CDN responses must not combine Content-Security-Policy / X-Frame-Options in a way that forbids embedding on your customers’ origins. Adjust GCS metadata or CDN frame-ancestors (or equivalent) so embedding works where the iframe is used.

Website Popup (floating widget) — script tag, signupType: WidgetComingSoon or WidgetAssignment, corner launcher + modal.