Popup Element

​

When to Use

• 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”

​

How Popups Work

1. Start hidden by default
2. Triggered by user actions or conditions
3. Overlay the main content
4. Can contain any other elements
5. Dismissed by close button or actions

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

​

Configuration

​

Display Options

• Yes - Users can dismiss
• No - Force interaction

• True - Blocks page interaction
• False - Allows background clicks

​

Animation Type

​

Placement

​

Triggering Popups

​

Show/Hide Actions

• 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

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

​

Timing Strategies

• Welcome messages
• Important notices
• Gate content

• Newsletter signup
• Special offers
• Engagement check

• Last chance offers
• Abandonment prevention
• Feedback request

​

Popup Content

​

Email Capture Popup

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 expand to full width
• Better for forms
• Clear close button
• Touch-friendly spacing

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

• Lightweight overlays
• Smooth animations
• Fast loading
• Touch gestures

​

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

​

Quiz in Popup

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

​

Social Proof

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

​

Testing Variables

1. Timing - 5s vs 10s vs exit
2. Message - Discount vs value
3. Close button - Yes vs no
4. Animation - Fade vs slide
5. 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

​

Analytics & Tracking

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

• 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