How to add a popup to Webflow
Webflow can build a modal natively with a fixed-position div and an Interaction, but that modal has nowhere to store the leads, no exit intent trigger and no frequency capping. Most teams end up wiring a form to a third-party tool anyway. PopupForge collapses that into one script tag in your project's custom code.
Custom code in Webflow runs only on the published site, so the workflow is: paste, save, publish, test. Webflow also gates custom code behind a paid site plan, which this guide calls out so you do not spend an hour debugging a popup that a free staging site will never load.
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 Site settings > Custom code
From the Webflow dashboard, hover the project and click the settings gear (or open the Designer and go to the project settings). Choose the Custom code tab. You will see two fields: Head code and Footer code, each limited to 50,000 characters according to Webflow's help center.
- 03
Paste the tag into Footer code
Paste the PopupForge script tag into the Footer code field, which Webflow outputs just before the closing body tag on every page. Click Save changes. Do not wrap it in html, head or body tags; the field only accepts fragments.
- 04
Optional: limit it to one page via Page settings
If you prefer a page-level install, open the page in the Designer, click the gear on the page in the Pages panel, scroll to Custom code, and paste the tag into "Before </body> tag". Site-wide plus PopupForge URL targeting is usually simpler to maintain.
- 05
Publish the site
Custom code does not appear in the Designer preview. Click Publish in the top right and publish to your custom domain (and the webflow.io staging domain if you want to test there). The popup only exists on the published pages.
- 06
Check the plan
At the time of writing, Webflow only runs site-level and page-level custom code on paid site plans; the free Starter plan does not publish it. If the tag is saved but missing from the published page source, this is the first thing to check against Webflow's pricing page.
- 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.
Webflow notes and gotchas
- The Designer preview never runs custom code. If you are testing inside Webflow and see nothing, that is expected; open the published URL instead.
- Every edit to Site settings custom code needs a fresh Publish. Saving alone changes nothing for visitors.
- Webflow sets high z-index values on some sticky navbars and Interactions. The PopupForge iframe uses its own overlay, but if a navbar appears above the popup, lower the navbar's z-index.
- Webflow's Embed element also accepts script tags, but it renders inside a page section and is meant for widgets. For a site-wide script, Site settings is the right place.
Verify the install
Confirm the popup shows and the lead arrives
- 1.Load the published site in a private window and search the page source for lead-modal.js.
- 2.Trigger the popup, submit a test lead, and open PopupForge to confirm the lead and the view count.
- 3.If you use Webflow branching or staging, repeat the check on the production domain after the final publish.
Official Webflow 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 Webflow custom code work on the free plan?
At the time of writing, no. Webflow publishes custom code only on paid site plans. Check Webflow's pricing page for the current plan that includes custom code before you troubleshoot anything else.
Can I build the popup in Webflow instead?
You can build the visual modal with a div and an Interaction, but Webflow forms then need a separate tool for exit intent, frequency capping, multi-step logic and lead delivery. PopupForge bundles those, which is the trade-off this guide is about.
Head code or Footer code?
Footer code. The tag is async and defer so either works, but footer placement keeps it out of the head and away from the SEO and analytics tags many Webflow sites already carry there.
Why does the popup not show in the Webflow Designer?
Because custom code only runs on the published site. Publish, then test the live URL in a private window.
Get your script tag
Generate a popup for your site, then paste one tag into Webflow.
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.