Log in
Log in
ANAPixelsAttributionAnalyticsAds
ReachPopupsEmails
Z1
AI Storefront Builder
Z1 X
Creator Commerce
All products →
WorkServicesPricingAboutHelp
Get in Touch

Triggers

/

3 min read

Create your first popup

Launch a popup with the Zalify Pixel — no code. Popups are declarative and load only when they're triggered.

Popups in Zalify are configuration-driven. You design them and set their triggers in your dashboard, and the Zalify Pixel renders them on your site. There's no popup() command to call and no popup code to maintain — if the Pixel is installed, popups just work.

Before you begin

Make sure the Zalify Pixel is live on your site. See Add the Zalify Pixel to your site or, on Shopify, Install the Zalify Pixel on Shopify.

How popups load

Popups stay out of your page weight until they're actually needed:

  • The first time a show_popup trigger fires, the Pixel lazy-loads the popup runtime (popup.js, ~4 kB gzipped).
  • The runtime fetches your popup's content from Zalify and mounts it inside a Shadow DOM on the page.

Why Shadow DOM matters

Mounting inside a Shadow DOM isolates the popup from your site: your storefront's CSS won't leak in and break the popup's styling, and the popup's styles won't affect your page. One consequence — inline <script> tags inside popup HTML don't execute, so popups stay safe and predictable.

Build a popup

1

Create a popup in Zalify

In your dashboard, create a new popup and design its content — headline, body, image, and buttons.

2

Choose a display mode

Pick modal (a centered card over a dimmed overlay) or corner (a smaller card that sits in a corner, e.g. bottom-right). Modal is the default and best for high-intent offers; corner is less interruptive.

3

Set a trigger

Decide when it appears — for example on page load, after a time delay, on exit intent, or on a specific page. This is the show_popup trigger the Pixel listens for.

4

Publish

Publish the popup. The next time a visitor meets the trigger, the Pixel loads the runtime and shows it.

Test it before you ship

Use Preview Mode to watch popups fire and to replay them without clearing cookies by hand — the replay toolbar re-fires any popup on demand. See Test your setup with Preview Mode.

Add more to your popup

Beyond a simple message, popups support richer actions:

  • spin_to_win — a lucky-wheel game (loaded as its own chunk only when used)
  • copy_text — copy a coupon code to the clipboard with inline feedback
  • grant_consent — let a visitor opt into tracking straight from a button (see Configure consent)

To author popup HTML and configure these actions in depth, see Zalify's popup authoring schema.

CSP note

If your site enforces a Content Security Policy, allow script-src https://cdn.zalify.com so the popup runtime can load.

Next steps