How to add a popup to a Netlify site

By Mert Özeren, Customer Success Specialist at Popupsmart · Updated September 24, 2026

To add a popup to a Netlify site, paste Popupsmart's embed code into Netlify's snippet injection, set to insert before </body>, then build and publish popups from the Popupsmart dashboard. Netlify injects the snippet without a redeploy, and Popupsmart works whatever built the site: a static site generator, a framework or Decap CMS, formerly Netlify CMS.

Add a popup to Netlify

Setup at a glance

Runs on: Netlify
Where the code goes: Project configuration → Developer settings → Post processing → Snippet injection
Add-on: No extension needed

Before you start

You need three things, and the site's code isn't one of them:

Access to the site in Netlify, with permission to change its configuration.
A free Popupsmart account. The free plan covers one website and one live popup, so you can finish this guide without paying.
The address your visitors use, your own domain or the netlify.app address, which Popupsmart verifies after the install.

A Netlify popup from Popupsmart needs one embed code in Netlify's snippet injection, added once. After that you build, change and publish popups in Popupsmart without opening Netlify or your code again.

Step 1: Create your Popupsmart account

Create your free Popupsmart account, or sign in if you already have one.

Step 2: Copy your embed code

In the dashboard, click Embed Code.

Embed Code Section

Your embed code opens in a window; copy it to your clipboard. The code is one line, <script src="https://cdn.popupsmart.com/bundle.js" data-id="…" async defer></script>, and the data-id belongs to your account.

Copy Embed Code

Step 3: Open post processing in Netlify

In Netlify, open your site, which Netlify now calls a project, and go to Project configuration → Developer settings → Post processing. Netlify's snippet injection docs give the same path. Older versions of the Netlify UI, like the one in these screenshots, had it under Site settings → Build & deploy.

Netlify Site Settings

Build & Deploy Section on Netlify

Step 4: Add the embed code as a snippet

Under Snippet injection, click Add snippet and choose Insert before </body>. Netlify also offers Insert before </head>; when I set this up with a customer, I choose the </body> position, so the page's own content comes first in the HTML and the popup script follows it.

Code Snippet Injection Section on Netlify

Name the snippet, for example "Popupsmart embed code", paste the embed code into the HTML field and click Save. Netlify injects it right away; no redeploy is needed.

Adding Embed Code to Netlify

Step 5: Add and verify your website

Back in Popupsmart, hover over the profile icon at the bottom left and click Websites.

Click + New Website.

Adding a New Website to Popupsmart

Enter your site's address in the Add a new website box and click Save.

Entering a Netlify Website and Saving

If the site shows as Unverified, click Unverified, then Verify website, and go back to the dashboard and click Refresh. The guide to verifying your website covers the other cases.

On the dashboard, click New Campaign, name it, choose your Netlify site and pick a template.

Creating a New Popup Campaign

Change its copy, colours and form fields to match your site, then click Save.

Saving and Publishing a Netlify Popup

Click Publish at the last step. Then open your site in a private window and load a page. The popup appears when its trigger fires.

Publishing a Netlify Popup

Or add the embed code to your site's template

Snippet injection only reaches static HTML pages. According to Netlify's snippet injection docs, it doesn't apply to proxy routes or to routes handled by functions, including server-side rendered pages. If your site has those, put the embed code in the HTML every page shares instead, such as your static site generator's base layout, index.html or your framework's root layout, just before </body>. Commit the change and let Netlify deploy it. Use one method, not both, so the script doesn't load twice.

No. Netlify builds and hosts sites and has no popup feature of its own, so a Netlify popup is either code in your site or a script such as Popupsmart's.

A hand-built modal is a fair answer for one fixed popup on a site you code yourself: it adds no third party, and Netlify Forms can keep its submissions. According to Netlify's forms documentation, Netlify finds forms marked data-netlify="true" by parsing your HTML when a build completes, once form detection is enabled; a form rendered by JavaScript, as most modals are, also needs a hidden HTML copy of the form so the build can detect it. Every change to the modal's text, timing or pages is then a commit and a deploy.

Popupsmart moves the popup out of that cycle. Templates, targeting rules such as exit intent or URL, and lead delivery to the help center's 19 destinations change in a dashboard, so whoever runs marketing can change a popup without a build.

A Netlify popup from Popupsmart is limited to some pages by a targeting rule on the campaign, not by a second snippet. The snippet only loads Popupsmart; each campaign's URL targeting rule, such as "the URL contains /blog", decides where it shows. You can move a popup to other pages without touching Netlify or your code.

Pages are half of the rule, and timing is the other half. Across 500 Popupsmart campaigns analysed in 2026, 95.4% fire as soon as the page loads and only 2.0% use exit intent, according to the exit-intent study. When a popup fires is the setting most people leave on its default, so choose the trigger in the same step as the pages.

Start from the job the page has:

Newsletter signups on blog posts and docs: the email popup guide.
Lead forms on landing pages: the lead collection popup recipe.
A last offer for visitors about to leave: the exit-intent popup recipe.
A launch or event, with a countdown and a signup: the countdown popup recipe.

Netlify popup leads from Popupsmart go to the email tool you already use, so they don't sit in a spreadsheet. Popupsmart can send every email address and phone number a popup collects to that tool; you connect it in the campaign's Integration section. The HubSpot popup guide and the Brevo popup guide walk through a connection; the help center lists 19 destinations, and a webhook, Zapier or Make covers a tool that isn't one of them.

A Popupsmart popup doesn't hold up your Netlify pages: the embed code loads asynchronously (async defer), so the browser finishes building your page before it fetches Popupsmart. Nothing changes in your build or your code: snippet injection adds one script tag to your HTML, and you can remove it the same way.

When a Netlify popup doesn't appear, work down this list; the first two causes are specific to Netlify.

The page is rendered on request. Snippet injection skips routes handled by functions, server-side rendered pages and proxy routes; use the template method above.
You're testing a deploy preview. Deploy previews and branch deploys have their own addresses, which don't match the website you verified. Test on your production address.
The website isn't verified. A campaign runs only on a verified website; see Step 5.
The address doesn't match. If you connected your own domain, add that domain in Popupsmart, not the netlify.app address.
A Content Security Policy blocks the script. If your _headers file or netlify.toml sets a CSP, add Popupsmart's domains, starting with cdn.popupsmart.com.
The trigger hasn't fired yet. An exit-intent or scroll trigger waits for the visitor to leave or scroll; test in a private window and behave like a visitor.

💬

From the support queue: When a popup shows on some pages of a Netlify site and not others, what I check first is whether the missing pages are static HTML. Snippet injection reaches static pages only, so a route rendered by a function never receives the code while the rest of the site works. My advice is to open the source of a page where the popup is missing and search for cdn.popupsmart.com; if it isn't there, move the code into your site's template.

Yes. Popupsmart's free plan is permanent, not a trial: one website, one live popup and 5,000 pageviews a month, with Popupsmart branding. It is enough to install the code and run your first popup on a site hosted on Netlify.

The Popupsmart pricing page compares it with the paid plans.

No. Snippet injection is a form in the Netlify UI: you paste one line of code and save. Everything else, from the design to the targeting, happens in Popupsmart's visual editor.

Do I have to redeploy my site after adding the code?

No. Netlify injects a snippet as soon as you save it, without a redeploy. If you add the code to your site's template instead, it goes live with your next deploy.

Does it work with Decap CMS, formerly Netlify CMS?

Yes, if the site is hosted on Netlify. Decap CMS edits the content in your Git repository; Netlify serves the pages your site builds from it, and snippet injection adds the embed code to them.

The Netlify side is one snippet in one form; the rest is building the popup. Among people who published a campaign in the 90 days to 16 September 2026, the median time from signup to the first published campaign was 32.5 minutes, and 287 of 332 published within a day, according to Popupsmart's own product data. That figure covers every platform, not Netlify alone.

How to add a popup to a Netlify site

Before you start