How to add a popup to any HTML website
If your site is hand-written HTML, a static site generator, or a template you bought years ago, you do not have a plugin ecosystem to lean on. That is fine: a popup only needs one script tag, and every HTML page has a place for it right before the closing body tag.
This guide covers the plain case (edit index.html), the shared-layout case (Hugo, Jekyll, Eleventy, Astro, a PHP footer include), and the two things that usually go wrong afterwards: a Content-Security-Policy meta tag that blocks the script, and a host cache that keeps serving the old file.
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
Find the closing body tag
Open the HTML file in your editor and search for </body>. On a one-page site that is index.html. On a site with many pages, look for the shared piece every page includes: footer.php, _includes/footer.html, layouts/baseof.html, a base layout in Astro, or whatever your generator calls it.
- 03
Paste the tag on the line above </body>
Paste the PopupForge script tag directly above </body> and save. The async and defer attributes let the browser keep parsing the page while the script downloads, so it does not slow the first paint.
- 04
Repeat for every page that has its own body tag
If your pages do not share a layout, the tag must be present in each HTML file where you want the popup. A quick grep for lead-modal.js across the folder tells you which pages still lack it.
- 05
Check for a Content-Security-Policy meta tag
If the head contains <meta http-equiv="Content-Security-Policy"> or your host sends a CSP header, add https://getpopupforge.com to script-src, connect-src and frame-src. The loader is a script, it fetches the popup config, and it injects an iframe; each needs its own directive.
- 06
Upload or deploy, then bust the cache
Upload via SFTP, push to GitHub Pages, or deploy on Netlify, Vercel or Cloudflare Pages. If the host or a CDN caches HTML, purge it or wait for the TTL; otherwise visitors receive the old page without the tag.
- 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.
HTML notes and gotchas
- Test on the deployed site, not by opening the file from disk. A file:// page is not representative of URL targeting, domain rules or caching.
- Static site generators rebuild the layout on every build, so the tag persists. If you paste it into generated output instead of the source template, the next build removes it.
- Minifiers and HTML bundlers occasionally strip or reorder unknown scripts. Check the built output for lead-modal.js after the first build.
- The popup renders in an iframe with its own styles, so your site's CSS reset and fonts do not affect it, and it does not affect them.
Verify the install
Confirm the popup shows and the lead arrives
- 1.Open the deployed page in a private window, view the page source and search for lead-modal.js.
- 2.Trigger the popup, submit a test lead.
- 3.Confirm the lead in the PopupForge lead list and the view and submission counts in analytics.
Official HTML 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
Do I need jQuery or any other library?
No. The PopupForge tag is self-contained. It loads a small loader that injects an iframe with the popup; nothing else is required on your page.
Head or before the closing body tag?
Before </body>. The tag is async and defer so it works in the head too, but end-of-body placement is the convention this guide uses on every platform and keeps the head for meta tags.
Why does the popup work locally but not on the live site?
Usually a cache serving the old HTML, or a CSP header the host adds in production. View the live page source to confirm the tag is present, then check the browser console for a CSP error.
Can I change the popup without editing the HTML again?
Yes. The tag only references the popup by appId and configId; the design, copy, trigger and targeting are published from PopupForge and update without redeploying your site.
Get your script tag
Generate a popup for your site, then paste one tag into any HTML website.
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.