Article

How to Add a Waitlist to Framer (Embed Guide)

Add a GetWaitly waitlist to Framer with the Embed component or site-wide custom code — inline form or popup. Includes the paid-plan requirement and fixes.

AAymane E.·October 4, 2026·7 min read

A designer building a Framer site on a laptop, representing embedding a waitlist form

Framer makes beautiful pre-launch pages, and its forms are fine for contact — but they are not waitlists. They do not track referrals or send broadcasts. GetWaitly's widget adds a real waitlist to Framer with two lines of code.

There is one Framer rule to know: custom code is a paid-plan feature. Here is the setup for both an inline form and a popup.

The short answer

Drop an Embed component where you want the form and paste your GetWaitly snippet, or add the script in Project Settings → Custom Code to load it site-wide. Publish to test — Framer does not run custom code in the canvas preview. Project-level custom code requires a paid Framer plan. Total time: 5 minutes.

What you need

A GetWaitly account with a waitlist created (free plan covers 100 subscribers).
Your waitlist's public ID from the Widget/Embed section of the dashboard.
A Framer project. The Embed component is available in the editor; Project Settings → Custom Code (for site-wide scripts) is a paid-plan feature.

Step 1 — Get your embed code

In GetWaitly, open the waitlist and go to Widget. Copy:

Script tag:

<script src="https://getwaitly.com/widget.js" defer></script>

Container div:

<div class="gw-widget" data-waitlist-id="YOUR_WAITLIST_ID"></div>

Use the waitlist's public ID, not the URL slug.

Step 2 — Add an inline form with the Embed component

In Framer, open the Insert menu and search for Embed.
Drag the Embed component onto the canvas where the form should appear.
In the component's HTML field, paste both lines:

<div class="gw-widget" data-waitlist-id="YOUR_WAITLIST_ID"></div>
<script src="https://getwaitly.com/widget.js" defer></script>

Give the component a width (the widget fills the width it is given) and a height of at least 350px.
Publish the site.

Framer does not render custom code in the canvas preview — open the published page to see and test the form.

Step 3 — Or load the script site-wide (optional)

If you want the widget on several pages, or a popup, load the script once.

Open Project Settings (the gear icon).
Go to the Custom Code tab.
Click Add Script, name it (e.g., "GetWaitly widget"), and choose End of body as the placement.
Paste the script tag:

<script src="https://getwaitly.com/widget.js" defer></script>

Save and publish.

Then place only the container div via an Embed component on the pages that need the form.

Step 4 — The popup variant (optional)

With the script loaded site-wide (Step 3), add an Embed component with a trigger button:

<button class="gw-trigger" data-waitlist-id="YOUR_WAITLIST_ID">Join waitlist</button>

Clicking it opens the form in a modal wherever the button appears.

Step 5 — Test it

Publish, then open the live page in a private window — not the Framer preview, which does not execute custom code. Submit a test email and confirm the success message appears and the subscriber reaches your GetWaitly dashboard.

If nothing renders, check that the code is in the published site (Framer strips custom code in preview), that your plan supports custom code, and that the ID matches exactly.

Framer-specific gotchas

Custom code needs a paid plan. Project Settings → Custom Code is a paid feature. On the free plan, the Embed component may still work for a single page, but site-wide custom code will not.
Preview hides custom code. Framer does not run custom code in the canvas or preview. Always test the published URL.
Allowed tags. Framer's custom code supports HTML, CSS, and JavaScript via <link>, <script>, <meta>, and <style>. The GetWaitly snippet is plain HTML/JS and fits.
Height matters. If the Embed component is too short, the form gets clipped. Start at 350px.
Once vs every visit. Framer custom code can run "Once" or "on every page visit." The widget script is safe either way; "Once" is fine.

Alternative: no custom code

If you would rather not upgrade to a plan that supports custom code, publish GetWaitly's hosted page at getwaitly.com/w/your-id and link to it from a Framer button. The signup happens on GetWaitly's page, and there is no code to maintain. You can also embed the hosted page URL directly with Framer's Embed component (as a URL, not a script).

FAQ

Does GetWaitly work on Framer?

Yes. Use the Embed component for an inline form, or Project Settings → Custom Code for a site-wide script and popup. Both are one script tag plus a container div.

Is custom code free on Framer?

Project Settings → Custom Code is a paid-plan feature. The Embed component is available in the editor, but site-wide custom code and reliable publishing generally require a paid plan. GetWaitly itself works on any plan, including its free tier.

Why is my Framer embed not showing?

Framer does not run custom code in the preview or canvas — publish the site and open the live URL. Also confirm the Embed height is at least 350px and the data-waitlist-id matches your waitlist.

Can I make the waitlist a popup in Framer?

Yes. Load the widget script via Project Settings → Custom Code (End of body), then add an Embed component with a gw-trigger button. Clicking it opens the form in a modal.

Will it match my Framer design?

It uses your GetWaitly accent color and font, not your Framer styles. You control the width and placement from the Embed component. For full control, use GetWaitly's no-JavaScript form action and design your own form.