Personyze Wiki Personyze Wiki docs
English
Open Personyze
Docs/ Content & Design/ Personyze Popup & Banner Action Guide
Content & Design

Personyze Popup & Banner Action Guide

This guide walks you through setting up a Popup or Banner Action in Personyze. These actions allow you to present promotional messages, notifications, reviews, and other key content using templates or custom HTML/CSS. Templates…

10 min read Updated 2 days ago

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

  1. In a Targeting & Personalization campaign, open the Content step and click Add action.
  2. 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.
Popup template gallery
The gallery, filterable by tag. Every template is documented in depth in the template sections of this knowledge base. Click to enlarge.

The families in the gallery (each links to its own detailed article):

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.
The Popup, Banner & HTML Builder's Design step with a Center Modal, the Text group open: each field's tools are tiles on its label line
The Design step of a Center Modal with the Text group open: each field’s tools are tiles on its label line — Variable, HTML editor, Variations with its count, Write with AI and CSS. Click to enlarge.

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.
The Close group of a popup's Design step: Light design and Dark design, This design's own, the groups Over a photo, Modern on a light card, Phones and slide-ins, With auto-close and Words, Custom, and the Position pad reading 4px right, beside the preview
Design step › Close: pick Light design or Dark design, keep This design’s own ✕ or pick one from Over a photo, Modern on a light card, Phones and slide-ins, With auto-close or Words, or Custom. The Position pad moves it (here 4px right); a preset the design would clip is switched off, with the reason under it. Click to enlarge.

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).
Set Display Rules & Placement folded into rows, each with a picture and a summary: Where on the page, How the popup behaves, When it opens, How often marked Needs a look, Where it is allowed to run, While it shows, External assets and When event takes place (advanced)
Set Display Rules & Placement, folded: each row has a picture and a summary in plain words (here A floating popup, bottom right), How often is marked Needs a look, and External assets sits below. The last row in this picture, the event row, is now a step of its own: Track & follow up. Click to enlarge.

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.
The desktop detector cannot fire on a phone — it watches a cursor, and there isn’t one. If exit intent is your whole campaign, ticking only the desktop option silently skips every mobile visitor. Turn on Mobile — Back tap to reach them.
The Back-tap detector installs only on devices with no pointer, so a laptop with a touchscreen still gets the desktop trigger rather than both. To test it: open the page, scroll a little, then press Back — without that first scroll it is not yet armed.

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.

Typing 0 into a trigger’s value clears it and switches that tile off — there is no “on, with a delay of zero” state to get stuck in.

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.

Campaign performance General tab
The Performance step’s General tab: visits, impressions, clicks, conversions and audience revenue, with a per-action side-by-side table. Click to enlarge.
Get an AI plan for your site

Inspire me reads your website and suggests the personalization campaigns to run first, and who should see each one. Free.

Scan your site
Did this page answer your question?
Thank you — that goes to whoever maintains this page.