How to add a popup to Magnolia CMS

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

To add a popup to Magnolia CMS, paste Popupsmart's embed code into a new tag in Magnolia's Marketing Tags app, set it to load at the end of the body on every page, and publish the tag. Popupsmart then runs every popup from its dashboard, with no template edit.

On the Community Edition, which has no Marketing Tags app, the code goes into your page template instead.

Add a popup to Magnolia

Setup at a glance

Runs on: Magnolia
Where the code goes: Tools → Marketing Tags → end of the body
Add-on: No extra module needed

Before you start

Adding a popup to Magnolia takes three things:

Access to Magnolia with permission to use the Marketing Tags app and to publish. The app comes with DX Core; on the Community Edition, you need access to your page templates instead.
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 for the public site, which Popupsmart verifies after the install.

The embed code goes onto every page once, through a marketing tag. After that, you build and change popups in Popupsmart without opening Magnolia again.

Step 1: Create your Popupsmart account

Create a free Popupsmart account, or sign in to the one you have.

Step 2: Copy your embed code

Open the Embed Code section of your dashboard.

getting the embed code

Click Copy to 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.

copying the embed code

Step 3: Add a tag in the Marketing Tags app

In Magnolia, open the App launcher and click Marketing Tags in the Tools group.

marketing tags on magnolia

In the action bar on the right, click Add tag.

adding new tag on magnolia

Step 4: Set the tag location and paste the code

On the Properties tab, give the tag a name, such as popupsmart, and set Tag location to end of the body. That puts the code just before the closing </body> tag, where Popupsmart recommends it.

setting tag location on magnolia

Open the Content tab and paste your embed code into Tag code.

pasting the embed code to the tag code on magnolia

Step 5: Choose the pages, save and publish the tag

Open the Pages tab, tick Insert in subpages and enter /, the root of your site, so the tag goes on every page. Click Save changes.

selecting pages to add tag on magnolia

Then publish the tag from the Marketing Tags app. Until you do, it exists only on the author instance, and visitors on the public site won't load the code.

Step 6: 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

Enter your public site's address, not the author instance's, and click Save.

enter your website and click save

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.

Click New Campaign, name the campaign and choose your Magnolia website.

creating a new campaign

Pick a template, change its copy, colours and form fields to match your site, and click Save.

saving and publishing magnolia popup

Go to the builder's Publish step and click Publish. Then open your public site in a private window; the popup appears when its trigger fires.

publish part of a magnolia popup

Or add the embed code to your page template

The Marketing Tags app is part of DX Core, so the Community Edition doesn't have it. There, the embed code goes into your page template script, usually a FreeMarker .ftl file under templates/pages/ in your light module. Paste it just before </body>, and repeat for each page template your site uses. Then carry on from Step 6.

Use one method, not both. The embed code should be on a page once.

No. Magnolia doesn't document a popup builder. According to Magnolia's Marketing Tags app documentation, the app is a central place for code snippets such as web analytics, third-party content and advertising tags, which is why it suits Popupsmart's embed code. As of September 2026, the light modules on the Magnolia Marketplace include carousels, accordions, tabs and maps, but no popup.

A developer can still build a modal as a component in a light module. That keeps everything inside Magnolia and adds no third party, and for one fixed message it may be all you need. Each new offer, trigger or audience rule on that component is development work followed by a deploy, though. Popupsmart keeps that work in a dashboard, where marketers build, target and publish popups themselves.

A Magnolia popup reaches only the pages you pick when the tag stays on every page and each campaign carries its own targeting in the builder's Segment step. URL targeting limits a popup to addresses that contain or match what you set, such as /tours. The Pages tab can narrow the tag to one branch too, but I'd leave it on /: targeting in Popupsmart lets a marketer move a popup later without another tag change and publish.

The page is one half of the rule and the moment is the other. 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 default, so set the trigger while you set the pages.

A Magnolia popup works best when it matches the job of the page it sits on:

Newsletter signups on stories and articles: the email popup guide.
Callback requests on service and product pages: the callback popup recipe.
Feedback from visitors on key pages: the survey popup recipe.

Popupsmart sends every email address and phone number a popup collects to the tool you already use. 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 a Magnolia page: the embed code loads asynchronously (async defer) at the end of the body, so the browser finishes building your page before it fetches Popupsmart. Magnolia only adds one line to the page; the visitor's browser fetches the script itself.

The tag isn't published. A tag saved on the author instance doesn't reach the public site until you publish it. Check its status in the Marketing Tags app.
The tag isn't on that page. On the Pages tab, check that Insert in subpages is ticked and the path is /, or the branch the page sits in.
The website isn't verified, or the address doesn't match. Add the public site's address, the one your visitors use; www.example.com and example.com are different sites to a browser.
A cache is serving the old page. If your public instance or a CDN caches pages, clear the cache after publishing the tag.
The code is on the page twice. If a template also contains the embed code, remove one copy.
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: What I check first on a Magnolia site is whether the tag was published. A tag saved on the author instance looks finished in the Marketing Tags app, but the public site doesn't load it until you publish it. My advice is to publish the tag straight after saving it, then search the public page's source for cdn.popupsmart.com before you build the popup.

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 Magnolia site.

The Popupsmart pricing page compares it with the paid plans.

No, if you use the Marketing Tags app: you paste one line of code into a form and choose the pages. Everything else, from the design to the targeting, happens in Popupsmart's visual editor.

Does it work with Magnolia's Community Edition?

Yes. The Marketing Tags app comes with DX Core, so on the Community Edition you paste the embed code into your page template instead, just before the closing body tag. The popups work the same way.

The Magnolia side is one marketing tag, saved and published; 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 Magnolia alone.

Can I create form popups for a Magnolia site?

Yes. Add email, name, phone or other form fields to any popup in the drag-and-drop editor. Submissions appear under Leads in Popupsmart and can be sent on to your email or CRM tool.

How to add a popup to Magnolia CMS

Before you start