Install the script
Add one tag to your site. It takes care of every popup you publish from then on.
This is the tag. Your agent gives you the real one with your site key filled in, so copy that instead of this example.
<script async src="https://app.openpopup.ai/e.js" data-site="<site_key>"></script>Put it just before the closing </body> tag. You add it once per site and never touch it again. New popups and changes show up automatically.
Where to paste it
| Platform | Where |
|---|---|
| WordPress | Appearance → Theme File Editor → footer.php, right before </body>. Block themes don’t have that file, so use a plugin for header and footer scripts and paste it in the footer box. |
| Shopify | Online Store → Themes → Edit code → layout/theme.liquid, right before </body>. |
| Webflow | Project settings → Custom code → Footer code. |
| Squarespace | Settings → Advanced → Code injection → Footer. |
| Framer | Site settings → General → Custom code → End of <body> tag. |
| Wix | Settings → Custom code → Add code, placed at Body - end. |
| Google Tag Manager | A Custom HTML tag that fires on All Pages. Leave “Support document.write” unchecked. |
| Plain HTML | Right before </body> on every page where popups should appear. If you have a shared footer file, put it there. |
Next.js
Add a plain script tag at the end of <body> in app/layout.tsx:
<script async src="https://app.openpopup.ai/e.js" data-site="<site_key>" />Don’t use next/script for this. Some of its loading strategies drop attributes they don’t recognise, and without data-site the script can’t find your popups.
Astro
Same plain tag at the end of <body> in your layout. Add is:inline so Astro doesn’t try to bundle it:
<script is:inline async src="https://app.openpopup.ai/e.js" data-site="<site_key>"></script>Testing it
Add ?op-preview=<popup id> to any page of your site to see a published popup there at once, whatever its rules say and whether or not you’ve seen it before. ?op-debug=1 opens a panel that says why each popup does or doesn’t open on that page. Test and debug on your site has both, and more.
Opening a popup from your own code
Once the script is on the page, your own JavaScript can open any published popup, for example after an add-to-cart:
window.openpopup.show("<popup id>");Its trigger and page rule are skipped, but how often it shows, its schedule, device and audience still apply. To call it before the script has loaded, queue it: window.openpopup = window.openpopup || []; openpopup.push(["show", "<popup id>"]);. See Open a popup from your own code.
Will it slow my site down?
No. The script is about 5 kB and loads without blocking the page. The code that draws a popup is only downloaded when a popup is actually about to show. A visitor who never sees one downloads those 5 kB and a small list of the site’s popups, plus a few more kilobytes only when a popup on the site uses audience rules or a teaser.
The popup is drawn in its own isolated part of the page. Your site’s styles don’t affect it, and its styles don’t affect your site.
If Open Popup is ever unreachable, your site works exactly as before. The popup just doesn’t show.