How to add a popup to Framer
Framer makes a fixed overlay easy to design, but a designed overlay is not a lead capture system. It has no exit intent, no frequency rules, no multi-step form and nowhere to send the email. PopupForge supplies that layer through one script tag in Framer's custom code settings.
Framer only runs custom code on the published site, so plan for a publish after every change to the settings. This guide also covers the plan note: Framer has historically limited custom code to paid plans, so check the pricing page before debugging a missing popup on a free site.
The script tag
<script src="https://getpopupforge.com/lead-modal.js?appId=YOUR_APP_ID&configId=YOUR_CONFIG_ID" async defer></script>Replace YOUR_APP_ID and YOUR_CONFIG_ID with the values from the install panel of your published popup. The tag is the same on every platform; only where you paste it changes.
Step by step
- 01
Build and publish the popup in PopupForge
Create a free account, generate or design the popup in the visual editor, set the trigger and frequency, then publish it. The install panel shows your script tag with the appId and configId already filled in. Copy that exact tag; the placeholder version on this page will not load a popup.
- 02
Open Project Settings > Custom Code
In the Framer project, open Project Settings and select the Custom Code tab in the left sidebar. Click Add Script (or the + icon if snippets already exist).
- 03
Add the PopupForge script at the end of the body
Name the snippet PopupForge, paste the PopupForge script tag, choose the end-of-body placement so it loads after the page content, leave it on all pages, and set it to run Once. Save the snippet.
- 04
Optional: install on one page only
Per-page scoping lives in the same Custom Code panel: instead of leaving the snippet on all pages, pick the pages it should load on from the page list. Site-wide plus PopupForge URL targeting is usually simpler, because you can change the rules later without republishing Framer.
- 05
Publish the site
Click Publish in the top right. Custom code does not run in the Framer preview or the canvas; only the published URL loads it.
- 06
Check the plan if nothing loads
Framer has historically limited custom code to paid plans; at the time of writing, check the pricing page before debugging a missing popup on a free site. If the tag is saved and the site is published but the page source has no lead-modal.js, the plan is the first thing to rule out.
- 07
Test the popup and check the lead arrives
Open the live site in a private browsing window so a previous session does not suppress the popup, trigger it the way you configured (wait for the delay, scroll, or move the pointer out through the top of the window), submit a test lead, then confirm it shows in the PopupForge lead list.
Framer notes and gotchas
- Framer sites use client-side navigation between pages. The script loads once on the first page; test the popup both on a direct load and after clicking an internal link.
- Framer's own sticky navigation and overlays can carry high z-index values. If the navbar covers the popup, reduce the navbar's z-index in the layer settings.
- The Framer Embed component also accepts script tags, but it is meant for widgets inside a section. For a site-wide script, Project Settings is the right place.
- If you connect a custom domain later, custom code carries over; no changes are needed.
Verify the install
Confirm the popup shows and the lead arrives
- 1.Open the published site in a private window and search the page source for lead-modal.js.
- 2.Trigger the popup, submit a test lead.
- 3.Open PopupForge and confirm the lead and the analytics counts.
Official Framer documentation
Platform menus and plan rules change. If a step here no longer matches what you see, the official page above is the source of truth.
FAQ
Frequently asked questions
Does Framer custom code work on the free plan?
Framer has historically limited custom code to paid plans; at the time of writing, check Framer's pricing page before debugging a missing popup on a free site. A plan without custom code is the most common reason a saved tag does not appear on a published Framer site.
Can I use a Framer overlay instead?
For a static announcement, yes. For lead capture you would still need a form destination, exit intent and frequency rules, which Framer overlays do not provide. PopupForge covers those with the one tag described here.
Why do I not see the popup on the canvas?
Framer never runs custom code inside the editor or the preview. Publish and open the live URL in a private window.
Which placement should I choose?
End of body. The tag is async and defer, so any placement works, but loading after the content keeps it out of the way of Framer's own hydration.
Get your script tag
Generate a popup for your site, then paste one tag into Framer.
The free generator shows three brand-matched directions from your URL, no account needed. Creating an account gives you the visual editor, triggers, URL targeting and the install panel with your real appId and configId.