Popups
A popup is a widget that opens in the center of the screen over a dimmed backdrop, so the visitor focuses on it until they act or close it. Popups are the usual choice for exit-intent offers, email and SMS capture, spin-to-win wheels and announcements that need full attention.
Available on: all platforms.
How it works
- When a trigger fires and the widget's rules pass, the backdrop fades in and the popup opens with its animation.
- Keyboard focus moves to the popup's first form field, or to the popup itself. While it's open, Tab and Shift+Tab stay inside the popup.
- The visitor closes it with the close button, Esc, a click on the backdrop (if the backdrop's action is Close widget), a button whose action is Close widget, or a close trigger.
- If the popup has a teaser with On close on, closing it without converting minimizes it to the teaser instead.
On screens up to 480 px wide, an Ergonomic popup docks to the bottom of the screen, where it's easier to reach with a thumb.
Configuration
Popup settings are in the builder: select the widget (the top item under Structure) and open the Settings and Style tabs. The backdrop and close button are separate items under Structure.
Option | What it does | Values / default |
|---|---|---|
Animation | How the popup opens and closes | None, Fade, Slide up, Slide down, Slide left, Slide right, Bounce vertical, Bounce horizontal, Zoom in, Zoom out |
Duration | Animation length | 0.1–2 s. Default 0.6 s, or 0.2 s for bounce animations |
Close on Esc | Closes the popup when the visitor presses Esc | On |
Ergonomic | On screens up to 480 px wide, docks the popup to the bottom of the screen instead of the center | On |
Width / Height | Popup size | Width 600 px, height auto. Units px, %, vw or auto |
Overflow | What happens when content is taller than the popup | Visible, Hidden, Auto. Default auto (scrolls inside) |
Margin | Minimum space between the popup and the screen edges | 0–100 px, default 10 px |
Background, border, radius, shadow | Popup surface | From your branding |
Backdrop
Option | What it does | Values / default |
|---|---|---|
Backdrop on/off | Shows or hides the backdrop behind the popup | On |
Action | What a click on the backdrop does | No action, Close widget. Templates use Close widget |
Background | Backdrop color, gradient or image | From your branding's Page overlay style (Dim, Blur or Light) |
Opacity | Backdrop transparency | 0–100% |
Blur | Blurs the page behind the backdrop | px |
Close button
See Widget display options for the close button's position, size, label and style.
Behavior details and limitations
- Popups never overflow the screen. Width and height are capped at the screen size minus the margin on each side. With Overflow set to Auto, long content scrolls inside the popup.
- Ergonomic only changes position. The popup keeps its width (capped to the screen) and docks to the bottom edge. Combine it with mobile-specific edits in the builder's Mobile view for a bottom-sheet look. See Mobile behavior.
- The backdrop blocks the page. While a popup with a backdrop is open, visitors can't click the page behind it. With the backdrop off, there's no dimmed overlay and nothing to click to close the popup outside it.
- The popup appears above everything on the page when it opens, including sticky headers and chat bubbles.
- On phones the close button moves closer to the corner (8 px from the edge) so it stays reachable.
- Two popups at once. Nothing stops two popups from opening together. Add a Widget interaction rule, "Don't show if a popup is already open", to prevent it.
Examples
- Exit-intent discount: a popup with a coupon element, triggered by exit intent, with Frequency set to stop once converted.
- Email capture with a thank-you step: step 1 has a form whose action is Go to step "Thank you"; step 2 shows the code. Ergonomic on, so phone visitors get a bottom sheet.
- Age gate: a popup on landing with the backdrop action set to No action, no close button and Close on Esc off, so visitors must click a button.