How to add a popup to TYPO3

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

To add a popup to TYPO3, add two lines of TypoScript to your root page's Setup that print Popupsmart's embed code before the closing body tag, then flush the frontend caches. Popupsmart then builds, targets and publishes every popup from its dashboard, so there's no extension to install or carry through TYPO3 upgrades.

Add a popup to TYPO3

Setup at a glance

Runs on: TYPO3
Where the code goes: TypoScript record → Setup → page.footerData
Add-on: No extension needed

Before you start

Adding a popup to TYPO3 takes three things, and the first is usually an administrator account:

A TYPO3 backend account with access to the TypoScript module, or to the site package if your TypoScript lives in files.
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 site, which Popupsmart verifies after the install.

The embed code goes into your site's TypoScript, once. After that you build, change and publish popups in Popupsmart without editing TYPO3 again.

Step 1: Create your Popupsmart account

Popupsmart register page with the status automatically on

Step 2: Copy your embed code

In the dashboard, click Embed Code in the left menu.

Popupsmart 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.

Popupsmart Embed Code Copy

Step 3: Open your site's TypoScript record

In the TYPO3 backend, open the TypoScript module. In TYPO3 12.4 and 13 it is Site Management → TypoScript; in the older version in the screenshots it is Web → Template. The overview lists the pages that carry TypoScript: pick your root page, the one marked as root.

Typo3 admin panel with the Template part highlighted

Open the record's Setup field. In TYPO3 12.4 and 13, choose Edit TypoScript Record from the menu at the top and click Edit the whole TypoScript record; in the older module, click Setup.

Step 4: Add the embed code to Setup and flush the caches

At the end of the Setup field, add these two lines, with your own embed code as the value:

page.footerData.100 = TEXT

page.footerData.100.value = <script src="https://cdn.popupsmart.com/bundle.js" data-id="…" async defer></script>

footerData prints its content just before the closing </body> tag, where Popupsmart's code belongs. If your TypoScript already uses the number 100 under footerData, pick one it doesn't use. The screenshot puts the code in page.headerData instead, which works too, because the code loads asynchronously. Click Save.

Pasting the Popupsmart Embed Code to Typo3 website

TYPO3 caches the pages it renders, so flush them: click the lightning-bolt icon in the top bar and choose Flush frontend caches. I do this every time I change this TypoScript, before I test anything else.

If your site keeps its TypoScript in a site package or site set rather than a TypoScript record, the approach TYPO3 recommends from version 13, add the same two lines to the package's setup.typoscript and deploy it, or ask whoever maintains the site package.

Step 5: Add and verify your website

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

Popupsmart dashboard with Websites section highlighted

Click + New website.

Popupsmart New Website button

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

Adding Typo3 site to Popupsmart

Popupsmart checks the site for your embed code, and a site with the code live shows as Verified.

Popupsmart Verified Typo3 website

If it 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 on the Campaigns page. Name the campaign, choose your TYPO3 website, then pick a template and change its copy, colours and form fields to match your site.

Popupsmart New Campaign button

Save the popup and open the Publish step. The targeting summary shows who will see the popup and when; click Publish. Then open your site in a private window and load a page. The popup appears when its trigger fires.

Publishing Typo3 popup campaign in Popupsmart

No. According to the Fluid Styled Content documentation, TYPO3's default content elements run from headers, text and images to tables, menus, plugins and HTML, and none of them is a popup. Popups come from community extensions, which you find in the TYPO3 Extension Repository or on Packagist. As of September 2026, the latest release of one of them, Popup Power, supports TYPO3 12.4 and 13.4 and points to a paid Pro version.

For one fixed message, an extension can do the job. An extension lives inside your TYPO3 install: it's installed through Composer or Admin Tools → Extensions, has to keep up with each major TYPO3 upgrade, and is set up again on every installation you run. Popupsmart lives outside it: two lines of TypoScript per site, then templates, targeting rules and lead delivery are managed from one dashboard, where a marketer can change a popup without backend access.

A TYPO3 popup reaches only the pages you pick when the TypoScript stays on the root page, so every page loads the code, and each campaign carries its own targeting rule, such as "the URL contains /news" or "the visitor is about to leave". You could scope the TypoScript to one branch of the page tree instead, but then every change of plan means editing TypoScript and flushing caches again.

The trigger is the other half of that rule. 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 set it in the same step as the pages.

On a large TYPO3 site, tie each popup to the section it serves:

Newsletter signups on news and blog pages: the email popup guide.
Callback requests on product and service pages: the callback popup recipe.
Visitor feedback on help and content pages: the survey popup recipe.

Popupsmart can send every email address and name a popup collects to the tool you already use. 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 a TYPO3 page: the embed code loads asynchronously (async defer), so the browser finishes building your page before it fetches Popupsmart. The TypoScript prints one line into the page, which TYPO3 caches like the rest of it, and no extension runs when a page is rendered.

The caches weren't flushed. TYPO3 keeps serving the cached page until you choose Flush frontend caches.
The TypoScript is on the wrong page. A TypoScript record applies to its page and the pages below it. Put the lines on your root page's record; a site with several root pages needs them on each.
The number is already taken. Another footerData entry with the same number replaces yours. The Active TypoScript view of the TypoScript module shows what page.footerData holds.
The website isn't verified. A campaign runs only on a verified website; see Step 5.
The address doesn't match. www.example.com and example.com are different sites to a browser. Add the address your visitors actually use.
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 TYPO3 site is the Active TypoScript view, under page.footerData. If another entry uses the same number as yours, it replaces the Popupsmart line, and the code never reaches the page. My advice is to pick a number that view shows as free, save, and flush the frontend caches before you test.

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

The Popupsmart pricing page compares it with the paid plans.

Very little. You paste two lines of TypoScript into your site's setup once, and they are given in this guide. Everything else, from the design to the targeting, happens in Popupsmart's visual editor.

Do I need a TYPO3 extension for popups?

No. Popupsmart runs from the embed code your TypoScript prints on every page, so there is no extension to install and nothing to update when you upgrade TYPO3.

The TYPO3 side is two lines of TypoScript and a cache flush; 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 TYPO3 alone.

Yes. Popupsmart popups are responsive, the editor has a mobile view for checking the layout, and a device rule can show a popup on desktop, on mobile or on both.

How to add a popup to TYPO3

Before you start