Embedded Form

The Embedded Form is the same FirstList signup experience as the Website Popup, delivered without the floating corner button or popup shell. You embed a hosted page in an <iframe> so visitors see only the form (and success states)—ideal for CMS blocks, landing pages, sidebars, or sites with strict script policies.

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

Hosted assets load from the same CDN as the widget. CSS is injected by the script; you typically only reference the HTML page in the iframe src.

Prerequisites

A Premium FirstList plan (same as the Website Popup).
Your API key and chosen signup type from Settings → Website Popup (or your team’s configured widget settings).

CDN URLs

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

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

Always pass at least apiKey and signupType in the query string unless you host your own HTML and set window.popupConfig before the bundle loads (see Advanced: window.popupConfig).

Minimal iframe

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

Use a descriptive title on the <iframe> for accessibility (screen readers). That attribute is not the form headline—the heading comes from the title or titleText query parameter.

Example with headline and button labels

https://cdn.firstlist.co/firstlist-form-embed.html?apiKey=YOUR_API_KEY&signupType=WidgetComingSoon&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).

Query parameters

Parameter	Purpose
`apiKey`	Required — widget API key
`signupType`	Required — `WidgetComingSoon` or `WidgetAssignment`
`title` or `titleText`	Form heading above the fields (omit for no default marketing line in embed; use empty `title=` for no heading)
`pageTitle`	Browser tab title 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; optional fallback `initialCTAText` from `popupConfig`)
`footerText`, `googleFont`	Footer copy and font
`backgroundColor`, `fontColor`, `roundedSize`, …	Visual overrides (full set aligns with widget / merge logic in the extension)
`successTitle`	Headline after successful sign-up (iframe embed; optional overrides)
`successMsg` or `successText`	Body text under the success headline
`successTitleExisting`	Headline when the user is already registered (`302`) — default: `User already registered`
`successMsgExisting`	Optional body for the “already registered” state

Query parameters override any window.popupConfig you define on a custom host page for keys that appear in the URL.

Success message defaults (iframe only)

The floating widget keeps 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: add parameters such as &successTitle=Thanks!&successMsg=We will be in touch.

Long copy: prefer defining window.popupConfig on a page you host (see below)—URLs have practical length limits.

On your own HTML page you can set configuration before loading the form bundle:

<script>
  window.popupConfig = {
    apiKey: "YOUR_API_KEY",
    signupType: "WidgetComingSoon",
    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). You can mirror the hosted firstlist-form-embed.html pattern: set window.popupConfig, then include the matching .iife.js script.

Deployment checklist (integrators)

CORS: The form posts to the API 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: Assets must not send Content-Security-Policy / X-Frame-Options (or equivalent) that forbids embedding on your customers’ origins. Coordinate CDN or bucket metadata so embedding works where the iframe is used.

Website Popup — floating script tag, full modal flow, and shared popupConfig options.