How to add a popup to a Vercel site

Q: Does it work with Next.js?

Yes. Add the code to your root layout, app/layout.tsx, with the Script component from next/script and keep the data-id attribute. Next.js passes the attribute on to the script tag it renders.

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

To add a popup to a site on Vercel, paste Popupsmart's embed code into the layout every page shares, such as app/layout.tsx in Next.js, and deploy once. Vercel has no popup feature of its own; after that one deploy, Popupsmart runs every popup from its dashboard, and you build, target and publish without another commit.

Add a popup to Vercel

Setup at a glance

Runs on: Vercel
Where the code goes: Your project's root layout (app/layout.tsx in Next.js), then deploy
Add-on: No integration needed

Before you start

You need three things:

Access to the project's code and a way to deploy it: a Git repository connected to Vercel, or the Vercel CLI.
A free Popupsmart account. The free plan covers one website and one live popup, so you can finish this guide without paying.
Your production domain, which Popupsmart verifies after the install.

A Vercel popup from Popupsmart needs one embed code in your project's shared layout, shipped with one deploy. After that you build, change and publish popups in Popupsmart without touching the code again.

Step 1: Create your Popupsmart account

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

Popupsmart Registration Page

Step 2: Copy your embed code

In the dashboard, click Embed Code.

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.

Embed Code Window

Step 3: Add the code to your root layout

Put the embed code where every page renders through, so it loads on the whole site. Where that is depends on how the project is built:

Plain HTML or a static site generator: paste it just before </body> in the shared template, or in each HTML file.
Vite and other single-page apps: paste it just before </body> in index.html.
Next.js (App Router): in app/layout.tsx, import Script from next/script and add <Script src="https://cdn.popupsmart.com/bundle.js" data-id="…" /> inside <body>, after {children}, with the data-id from your own code.
Other frameworks: use the layout component or HTML template that wraps every route.

According to the Next.js guide to scripts, a script in the root layout loads on every route, and extra attributes, custom data attributes included, are forwarded to the final <script> tag. When I help with a Next.js project, I copy the data-id straight from the embed code window into the Script tag, because that attribute is what ties the script to your Popupsmart account.

Step 4: Deploy the change

Commit the change and push it to your production branch. According to Vercel's Git deployment docs, a merge or push to the production branch creates a production deployment, and a push to any other branch creates a preview deployment with its own address. Without Git, deploy with the Vercel CLI (vercel --prod).

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.

Enter your production domain in the Add a new website box and click Save.

Adding a New Website

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 site and pick a template. Change its copy, colours and form fields to match your site, and save.

Click Publish in the left-hand panel.

Publishing Your Campaign

Popupsmart confirms that the campaign has been published.

Campaign Successfully Published

Then open your production domain in a private window and load a page. The popup appears when its trigger fires.

No. Vercel builds and hosts your code and has no popup feature, so a popup on a Vercel site is either a component you write or a script such as Popupsmart's.

A modal component in your own code is a fair answer for one fixed popup: it adds no third party and goes through the same review as the rest of the code. On Vercel, each change to it is a push, a preview deployment to check it and a merge to the production branch to ship it. For a popup whose text, timing and pages stay the same for months, that cycle costs little.

Popupsmart earns its install when the popup changes more often than the code does. 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 commit, a review or a build.

A Vercel popup from Popupsmart is limited to some pages by a targeting rule on the campaign, not by moving the embed code. The code stays in the root layout and only loads Popupsmart; each campaign's URL targeting rule, such as "the URL contains /blog", decides where it shows. In Next.js you could put the script in a nested layout so it loads for one section only, but then moving a popup elsewhere takes a commit and a deploy; a targeting rule doesn't.

Pages are half of the rule, and timing is the other half. In Popupsmart's 2026 benchmark, popups that wait before appearing convert 0.83% against 0.61% for popups shown the instant the page loads (median campaign), a lean rather than a proven gap, and exit intent shows no statistically reliable advantage. When a popup fires is worth deciding on purpose, so choose the trigger in the same step as the pages.

Start from the job the page has:

Newsletter signups on the blog and changelog: the email popup guide.
Demo or callback requests on product pages: the callback popup recipe.
Feedback from users on docs and pricing pages: the survey popup recipe.
A launch, with a countdown and a signup: the countdown popup recipe.

Vercel popup leads from Popupsmart go to the email tool you already use, so they don't sit in a spreadsheet or your own database. 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 SendGrid 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 Vercel pages: the embed code loads asynchronously (async defer), so the browser finishes building your page before it fetches Popupsmart. According to the Next.js Script component reference, the default strategy, afterInteractive, loads a script early but after some hydration on the page, so it doesn't hold up your own code. Nothing runs on Vercel's side: the script loads in the visitor's browser from Popupsmart's CDN.

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

The change isn't in production. A push to a branch other than production creates a preview deployment; merge it, or promote the deployment.
You're testing a preview URL. Preview deployments have their own vercel.app addresses, which don't match the website you verified. Test on your production domain.
The script is in a nested layout. Then it loads only for that part of the site; move it to the root layout.
The data-id was lost. When you turn the tag into JSX, keep the data-id attribute exactly as copied.
A Content Security Policy blocks the script. If next.config.js, middleware or vercel.json sets a CSP header, add Popupsmart's domains, starting with cdn.popupsmart.com.
The website isn't verified. A campaign runs only on a verified website; see Step 5.

💬

From the support queue: What I check first on a Vercel project is which deployment is being tested. A push to any branch other than production creates a preview deployment with its own vercel.app address, and that address isn't the website verified in Popupsmart. My advice is to merge the layout change, wait for the production deployment to finish, and test on your own domain in a private window.

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 deployed on Vercel.

The Popupsmart pricing page compares it with the paid plans.

A little. You add one line to your project's layout and deploy it, so you need access to the code. After that, every popup is built in Popupsmart's visual editor without code.

Do I need a Vercel integration for popups?

No. The embed code in your layout is all Popupsmart needs, so there is nothing to install from the Vercel Marketplace.

Does it work with Next.js?

Yes. Add the code to your root layout, app/layout.tsx, with the Script component from next/script and keep the data-id attribute. Next.js passes the attribute on to the script tag it renders.

No. Only the embed code lives in your project. The copy, design, targeting and publishing of every popup happen in Popupsmart and take effect without a new deployment.

The Vercel side is one line in a layout and one deploy; 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 Vercel alone.

How to add a popup to a Vercel site

Before you start