The Popup, Banner & HTML Builder is the workhorse action for showing content: promos, announcements, coupon popups, spin-the-wheel games, hero sliders, floating chat buttons, progress trackers — anything built from a template or your own HTML, shown as a popup, a bar, a full-screen takeover, or inline in the page.
Adding one
- In a Targeting & Personalization campaign, open the Content step and click Add action.
- Pick Popup, Banner & HTML Builder. The template gallery opens. You can also Start blank and paste your own HTML, or copy from an action you already built.

The families in the gallery (each links to its own detailed article):
- Coupon Popup — promo code with click-to-copy / blur-reveal.
- Spin Wheel (stacked and side-by-side/full-screen) — gamified prize wheel.
- Hero Slider — up to four rotating slides.
- Announcement Bar and Rotating Announcement Bar — top/bottom strips.
- Status Tracker and tiered progress bars — live goal / loyalty progress from profile values.
- Hover Bubble CTA — floating corner button that opens a message bubble (start a chat, book a call).
- Center Modal, Full-Screen Overlay, Corner Toast, System Message, vertical drawers and banners.
- Multi-Step Quiz — guided-selling questionnaire.
The editor
Step 1 — Design Your Banner or Popup. Click any element directly in the live preview, or expand its group in the sidebar.
- Each field’s tools are small tiles on its label line: Variable (put something you know about the visitor in it), HTML editor, Variations, Write with AI and CSS — whichever the field takes. A button or badge with a style of its own also has Position, which moves it a few pixels (up to 40px each way; not in email designs).
- Variations are audience-based cases (language, country, returning visitor, CRM field…) with a default fallback, exactly as described in the countdown guide. Once a field has some, its tile shows how many.
- A text field fits its text, with an expand button that opens a big editor. An image field shows its picture.
- The first section, Languages, gives the design’s words a version for each language your site speaks — see Languages.
- Every text a visitor reads in the sidebar has a Write with AI tile, and every picture setting a Create with AI icon; a design with a picture also offers Make this banner with AI in its Edit with AI box — see Write and draw with AI.

What the groups hold (Coupon Popup shown; other templates vary):
- Style — color preset, image layout, corners, entrance animation (pop…), card shadow, advanced card CSS.
- Coupon Code — the code itself and its Reveal Style: copy (click to copy to clipboard), reveal (blurred until clicked), display (always shown).
- Text — eyebrow, title, body, fine print; each with a show/hide toggle, its own CSS hook and Variations.
- Button — text, then Open link (Same tab or New tab) or Run JavaScript; Count clicks here (click target) marks it as the CTR click target; optional animation.
- Close — the close button: its look from a gallery, its position, and Don’t show again for N sessions — see The close button.
- HTML Source (advanced) — the full markup, for developers.
Toolbar: Preview as on phone / tablet / desktop, Change template, Add to your templates (saves your customized version for reuse), and Edit action with AI — describe the change in plain language and the AI restyles or rewrites the action.
The close button
The Close group (on some designs, Close Button) chooses what the visitor clicks to close the popup. The looks are grouped by where a close button sits:
| Group | Looks |
|---|---|
| Over a photo | Glass, Dark glass, Gradient ring — they stay readable on a picture. |
| Modern on a light card | Thin, Squircle, Label, Spin (turns on hover). |
| Phones and slide-ins | Grabber, Arrow down. |
| With auto-close | Countdown: its ring runs over the auto-close seconds set on the placement step and the popup closes when it empties. The ring stands full while the mouse is over the popup, and stays full with no auto-close. |
| Words | Not now, Maybe later, Close + Esc (it also closes on the Escape key), Don’t show this again, No thanks, Close pill. |
- Light design / Dark design above the gallery picks the version of each look for the design’s background.
- Current is the close button the design has, which keeps working until you pick another; a design that draws its own ✕ shows it as This design’s own.
- Custom fine-tunes the icon: border, padding, circle, size, thickness, and the ✕, circle and hover colours.
- The same gallery is in the Canvas Builder’s close-button block, and a part of it in Book a Meeting.

Position
Under the gallery, the Position pad moves the ✕: each arrow moves it 2px (10px with Shift, or use the arrow keys), the dot puts it back in its place, and a line says where it is in words — 4px right · 2px up. Three presets place it at once: Inside corner, On the edge and Half outside.
- You can also drag the ✕ in the preview. Shift snaps to 10px, Escape cancels, and one Undo takes the whole move back. A plain click still opens the Close group.
- Some gallery designs cut off whatever reaches past their edge. On those, On the edge and Half outside are off, and a line under the pad says why.
- The position is kept when you switch to another look.
Don’t show again
Don’t show again for N sessions: after a visitor clicks the ✕ to close it, it stays hidden for that many browsing sessions. 0 lets it return on their very next visit; 999 effectively never shows it to them again. A popup can also leave a small tab behind when it is closed, which opens it again — see After it’s closed.
Display rules & placement
Step 2 — Set Display Rules & Placement:
- Inline element — renders inside one or more placeholders; stacks with your page content. Pick them from the placeholder tiles, or make one there with + New — see Picking placeholders.
- Floating popup — pick a screen position; then entrance animation, optional dimmed modal backdrop, scroll behaviour, close button, auto-close, and After it’s closed: just close, or leave a tab that opens it again. Settings that only apply to popups show disabled for inline — the screen keeps its shape.
- Until you choose a placement, the action has nowhere to render — the step says so explicitly, so an invisible action is never a mystery.
- Triggers — when the action opens. There are eleven, grouped by what the visitor is doing — see Triggers below.
- Frequency caps — stop after closing / clicking / N impressions, burst mode, spacing after other popups — each rule restated in plain language with your numbers.
- After it shows — the editor’s last step, Track & follow up: what Personyze already counts, tagging your session recordings, reporting to your analytics and adding people to a list, with every setting of each event under More, for developers (don’t show it again, set profile data, run your own code, set a goal).

Triggers — when the popup opens
A trigger decides the moment an action appears, once the campaign’s audience rules have already decided who sees it. Tick as many as you like: whichever happens first opens it.
On arrival
- On page enter — as soon as the page loads. This is also the fallback: with nothing else ticked, the action opens on load.
- Show after delay — a number of seconds, counted from page load whatever the visitor does.
- When idle for — no mouse movement, no click, no key press. Any one of the three restarts the count, so this fires after a genuine pause rather than at a fixed time.
On engagement
- After scrolling to — a percentage of the whole page height.
- If rescrolled to top — they went down and came back up.
- When text copied — they used Cmd/Ctrl+C.
- When text selected — highlighting a phrase, before they copy it. It waits about half a second after the selection stops changing so a drag finishes first, and needs ten characters or more — a stray double-tap on one word does not count.
- When they stop scrolling for — parked mid-page, reading rather than skimming. Only a real scroll starts the clock, so a page nobody scrolls never fires this; every further scroll restarts it.
On exit intent — on phones too
Exit intent is two independent detectors, because leaving looks completely different on a mouse and on a touch screen. Tick either, or both.
- Desktop — cursor leaves. Fires when the pointer crosses the top edge of the window, where the close button, the tabs and the address bar are. Leaving by the sides or the bottom does not count, because those are not exits.
- Mobile — Back tap. They tap Back on a touch device. It arms only after the visitor engages — a scroll, a tap or a keystroke — never on a bare page load, so someone who bounces straight out keeps their Back button. Once armed, one press of Back opens the action instead of leaving and the page stays put; the press after that leaves normally. Reloading arms it again.
From your own code
- On an event from your site — call
_S_T.trigger("add_to_cart")from anywhere on your page at the moment the thing happens, or push{event: "add_to_cart"}to your data layer and use the name you already have in your tag manager. Names are matched exactly, capitals included. Firing it before the action has loaded is safe — the action opens as soon as it arrives.
Opening it from something on the page
Separately from the triggers above, an action can be launched by the visitor: on click or hover of an element you point at, on an element Personyze adds for you, or as a minimizable popup that sits collapsed as a tab until it is opened.
Measuring it
The button marked click target feeds the action’s CTR; impressions, clicks and closes report to the campaign’s Performance step by themselves. To send them to your own tools too, tick the tools under Report it to your analytics on the action’s Track & follow up step (Google Analytics 4, GTM data layer, Google Analytics, Segment, Klaviyo, Tealium): they arrive as personyze_shown, personyze_clicked and personyze_closed. See also the Google Analytics integration. To test designs against each other, activate A/B testing on the Content step.
