Popup element

The Popup element creates modal overlays that capture user attention and guide them through focused interactions. Unlike inline content, popups create a dedicated space for important messages, forms, or mini-funnels within your main flow.

When to Use

Strategic popup moments:

Email capture - Exit intent or timed popups
Special offers - Limited-time deals
Confirmations - “Are you sure?” dialogs
Mini-funnels - Multi-step processes
Notifications - Success/error messages
Content gates - “Sign up to continue”

Use popups sparingly. Too many interruptions frustrate users and increase abandonment. One well-timed popup beats three random ones.

How Popups Work

Popups are containers that:

Start hidden by default
Triggered by user actions or conditions
Overlay the main content
Can contain any other elements
Dismissed by close button or actions

Main Page
└── Popup (hidden)
    ├── Headline
    ├── Text Input
    └── Submit Button
    
Trigger: Show popup after 5 seconds

Configuration

Display Options

Show Close Button Toggle the X button:

Yes - Users can dismiss
No - Force interaction

Removing the close button increases completion but can frustrate users. Use only for critical flows like payment confirmation.

Modal Behavior

True - Blocks page interaction
False - Allows background clicks

Animation Type

Choose entrance style:

Animation	Effect	Use Case
Fade	Smooth opacity	Professional, subtle
Slide	Slides from edge	Modern, dynamic
None	Instant appear	Fast, simple

Placement

Control popup position:

Position	Location	Best For
Auto	Browser decides	General use
Top	Top of viewport	Notifications
Center	Middle of screen	Forms, offers
Bottom	Bottom edge	Cookie consent

Triggering Popups

Show/Hide Actions

Popups require triggers to appear: Common Triggers

On page load - After X seconds
On scroll - At certain depth
On exit intent - Mouse leaving
On click - Button press
On form submit - After action

Set up triggers on other elements:

Button element:
- On Click → Show → Select popup ID

Timing Strategies

Immediate (0-3 seconds)

Welcome messages
Important notices
Gate content

Delayed (5-10 seconds)

Newsletter signup
Special offers
Engagement check

Exit Intent

Last chance offers
Abandonment prevention
Feedback request

Test popup timing with your audience. B2C can handle earlier popups (5-10s) while B2B prefers later (15-30s) or exit-intent only.

Container: Popup
├── Headline: "Get 10% Off Your First Order"
├── Text: "Join 50,000+ smart shoppers"
├── Text Input: Email (required)
├── Button: "Get My Discount"
└── Text: "No spam, unsubscribe anytime"

Confirmation Dialog

Container: Popup (No close button)
├── Headline: "Are You Sure?"
├── Text: "You'll lose your progress"
├── Container (Row)
│   ├── Button: "Stay" (closes popup)
│   └── Button: "Leave" (navigates away)

Multi-Step Mini-Funnel

Container: Popup
├── Page 1: Email capture
├── Page 2: Preferences
└── Page 3: Success message

Offer Announcement

Container: Popup
├── Image: Product photo
├── Headline: "Flash Sale - 50% Off"
├── Timer: {{timer}} remaining
├── Button: "Shop Now"
└── Text: "Limited quantity available"

Mobile Optimization

Popups adapt to mobile: Full-Screen Mobile

Popups expand to full width
Better for forms
Clear close button
Touch-friendly spacing

Responsive Content

Stack elements vertically
Larger text and buttons
Simplified layouts
Scroll if needed

Performance

Lightweight overlays
Smooth animations
Fast loading
Touch gestures

On mobile, consider using full-page overlays instead of small popups. They’re easier to interact with and less likely to be dismissed accidentally.

Design Best Practices

Visual Hierarchy

Contrast - Stand out from background
Focus - One clear message
Whitespace - Don’t overcrowd
Brand - Match your style

Content Guidelines

Headline - Clear value proposition
Body - Minimal, benefit-focused
CTA - Single, obvious action
Trust - Privacy, guarantees

Size Recommendations

Desktop - 400-600px wide
Mobile - Full width or 90%
Height - Auto (content-based)
Max height - 80% viewport

Common Patterns

Exit-Intent Offer

Trigger: Mouse leaves viewport
Popup: "Wait! Here's 15% off"
Contains: Discount code
Result: 10-15% abandonment recovery

Two-Step Opt-In

Step 1: "Want free tips?" [Yes] [No]
Step 2: Email input form
Result: 30% higher quality leads

Trigger: After 30 seconds
Popup: 3-question quiz
Result: Personalized recommendation
Benefit: Higher engagement

Countdown Timer

Trigger: On page load
Popup: "Sale ends in {{timer}}"
Auto-close: After 5 seconds
Result: Creates urgency

Conversion Psychology

Interruption Theory

Breaks pattern (increases attention)
Creates micro-commitment
Focuses on single action
Removes distractions

Scarcity/Urgency

Limited time offers
Exclusive access
One-time opportunities
Fear of missing out

“Join 10,000+ subscribers”
Customer testimonials
Trust badges
Recent activity

Testing Variables

A/B test these elements:

Timing - 5s vs 10s vs exit
Message - Discount vs value
Close button - Yes vs no
Animation - Fade vs slide
Size - Small vs full-screen

Common Mistakes

Too Many Popups

One per session maximum
Space them out
Different purposes only

Poor Timing

Too early = annoying
Too late = missed opportunity
Test optimal moment

Weak Value Prop

Generic “Subscribe” = low conversion
Specific benefit = high conversion

Mobile Issues

Too small to interact
Blocks critical content
Can’t close easily

Troubleshooting

Content cut off

Reduce content amount
Check max-height settings
Enable scrolling
Test on small screens

Background still clickable

Enable modal behavior
Check z-index values
Verify overlay present
Test across browsers

Analytics & Tracking

Track popup performance:

Show rate - How often triggered
Interaction rate - Clicks/submissions
Close rate - Dismissals
Conversion rate - Completed goals

Key metrics:

Time to interaction
Device differences
Source/medium impact
A/B test results

Next Steps

Add triggers to show popups
Include forms for data capture
Track conversions with analytics
Test variations with A/B tests

Getting started

Agentic solution

Integrations

Editor

Dashboard

When to Use

How Popups Work

Configuration

Display Options

Animation Type

Placement

Triggering Popups

Show/Hide Actions

Timing Strategies

Confirmation Dialog

Multi-Step Mini-Funnel

Offer Announcement

Mobile Optimization

Design Best Practices

Visual Hierarchy

Content Guidelines

Size Recommendations

Common Patterns

Exit-Intent Offer

Two-Step Opt-In

Countdown Timer

Conversion Psychology

Interruption Theory

Scarcity/Urgency

Testing Variables

Common Mistakes

Too Many Popups

Poor Timing

Weak Value Prop

Mobile Issues

Troubleshooting

Analytics & Tracking

Next Steps

​When to Use

​How Popups Work

​Configuration

​Display Options

​Animation Type

​Placement

​Triggering Popups

​Show/Hide Actions

​Timing Strategies

​Popup Content

​Email Capture Popup

​Confirmation Dialog

​Multi-Step Mini-Funnel

​Offer Announcement

​Mobile Optimization

​Design Best Practices

​Visual Hierarchy

​Content Guidelines

​Size Recommendations

​Common Patterns

​Exit-Intent Offer

​Two-Step Opt-In

​Quiz in Popup

​Countdown Timer

​Conversion Psychology

​Interruption Theory

​Scarcity/Urgency

​Social Proof

​Testing Variables

​Common Mistakes

​Too Many Popups

​Poor Timing

​Weak Value Prop

​Mobile Issues

​Troubleshooting

​Analytics & Tracking

​Next Steps

When to Use

How Popups Work

Configuration

Display Options

Animation Type

Placement

Triggering Popups

Show/Hide Actions

Timing Strategies

Popup Content

Email Capture Popup

Confirmation Dialog

Multi-Step Mini-Funnel

Offer Announcement

Mobile Optimization

Design Best Practices

Visual Hierarchy

Content Guidelines

Size Recommendations

Common Patterns

Exit-Intent Offer

Two-Step Opt-In

Quiz in Popup

Countdown Timer

Conversion Psychology

Interruption Theory

Scarcity/Urgency

Social Proof

Testing Variables

Common Mistakes

Too Many Popups

Poor Timing

Weak Value Prop

Mobile Issues

Troubleshooting

Analytics & Tracking

Next Steps