Popup

A Popup stage renders as an overlay on top of the page. It’s the default stage type and what you’ll reach for whenever the campaign needs to interrupt the visitor (sale announcement, cookie notice, newsletter prompt). The display variant chosen at create time decides where on the screen it sits and how it animates in.

Display variants

Nine variants ship today. They all share the same canvas / layers / timeline / targeting machinery — only positioning, animation, and close behaviour differ.

modal — the default. Renders centered on the viewport over a dimmed overlay. Click on the overlay (if Close on overlay click is on) or the X to dismiss. Fades in.

Use it for: any prompt that needs to grab full attention — sale launches, newsletter forms, age gates, post-conversion thank-you. Don’t use it if the visitor is mid-flow on cart or checkout.

banner_top / banner_bottom — full-width strip pinned to the top or bottom of the viewport. The shell keeps its designed dimensions; the band around it is empty. Slides down (top) or up (bottom).

Use it for: shipping notices, free-shipping thresholds, cookie banners, low-friction announcements that should stay visible without dimming the rest of the page.

Slide-in — left / right

slide_in_left / slide_in_right — full-height strip on the left or right edge. The shell keeps its designed dimensions vertically centered inside. Slides in horizontally.

Use it for: secondary prompts that should feel less invasive than a modal but more visible than a toast. Newsletter signups, “spin to win” wheels, lead magnets.

Toast — four corners

toast_top_right / toast_top_left / toast_bottom_right / toast_bottom_left — small popup pinned to a corner, 20 px from the edge. No height constraint; the shell sizes itself. Slides in from the closest edge.

Use it for: lightweight messages — coupon codes, stock alerts, “X people just bought this” social proof. Toasts coexist with the page (no overlay, low visual weight) so the visitor can keep browsing.

Close mechanisms

Every popup variant exposes three independently-toggleable close mechanisms (configured in the Overview tab, Frequency & dismissal card):

Show close (X) button — small X in the corner of the shell. Recommended on for accessibility.
Close on overlay click — clicking outside the shell on the dimmed overlay closes the popup. Only meaningful for modal (other variants don’t have a click-target overlay).
Show permanent dismiss button — a “Don’t show again” button (.p2lab-stage__permanent). Required when frequency is Until permanently dismissed; disabled (and ignored) when frequency is Always show.

Clicking the X or overlay records a close event. Clicking permanent dismiss records a permanent_dismiss event and writes the suppression flag client-side.

How variants change the storefront

In all variants the popup is rendered inside the same .p2lab-stage root with a variant-specific modifier class (.p2lab-stage--modal, .p2lab-stage--banner_top, etc.). The plugin’s SCSS handles positioning and entrance animation per modifier. Shell scaling (transform: scale) is applied only to the modal variant — banner / slide-in / toast variants keep the shell at its designed pixel dimensions and rely on max-width: 100vw to fit the viewport.

Picking the right variant — a quick guide

Goal	Variant
Cookie / privacy notice	`banner_top` or `banner_bottom`
Major announcement that interrupts browsing	`modal`
Newsletter / lead magnet without dimming page	`slide_in_*`
Coupon delivered after action	`toast_*`
Social proof / activity feed	`toast_bottom_*`
Exit-style prompt (currently via long delay/scroll)	`modal`

Editor → Stage Settings — shell width / height, padding, border, parallax intensity (all variants).
Targeting → Triggers — when each popup fires.
Targeting → Frequency — how often the same visitor sees it.
Storefront → CSS customization — override .p2lab-stage--<variant> styles from a theme.