262 lines
6.0 KiB
Markdown
262 lines
6.0 KiB
Markdown
# popup-cro reference
|
|
|
|
## Core Principles
|
|
|
|
### 1. Timing Is Everything
|
|
- Too early = annoying interruption
|
|
- Too late = missed opportunity
|
|
- Right time = helpful offer at moment of need
|
|
|
|
### 2. Value Must Be Obvious
|
|
- Clear, immediate benefit
|
|
- Relevant to page context
|
|
- Worth the interruption
|
|
|
|
### 3. Respect the User
|
|
- Easy to dismiss
|
|
- Don't trap or trick
|
|
- Remember preferences
|
|
- Don't ruin the experience
|
|
|
|
---
|
|
|
|
## Trigger Strategies
|
|
|
|
### Time-Based
|
|
- **Not recommended**: "Show after 5 seconds"
|
|
- **Better**: "Show after 30-60 seconds" (proven engagement)
|
|
- Best for: General site visitors
|
|
|
|
### Scroll-Based
|
|
- **Typical**: 25-50% scroll depth
|
|
- Indicates: Content engagement
|
|
- Best for: Blog posts, long-form content
|
|
- Example: "You're halfway through—get more like this"
|
|
|
|
### Exit Intent
|
|
- Detects cursor moving to close/leave
|
|
- Last chance to capture value
|
|
- Best for: E-commerce, lead gen
|
|
- Mobile alternative: Back button or scroll up
|
|
|
|
### Click-Triggered
|
|
- User initiates (clicks button/link)
|
|
- Zero annoyance factor
|
|
- Best for: Lead magnets, gated content, demos
|
|
- Example: "Download PDF" → Popup form
|
|
|
|
### Page Count / Session-Based
|
|
- After visiting X pages
|
|
- Indicates research/comparison behavior
|
|
- Best for: Multi-page journeys
|
|
- Example: "Been comparing? Here's a summary..."
|
|
|
|
### Behavior-Based
|
|
- Add to cart abandonment
|
|
- Pricing page visitors
|
|
- Repeat page visits
|
|
- Best for: High-intent segments
|
|
|
|
---
|
|
|
|
## Popup Types
|
|
|
|
### Email Capture Popup
|
|
**Goal**: Newsletter/list subscription
|
|
|
|
**Best practices:**
|
|
- Clear value prop (not just "Subscribe")
|
|
- Specific benefit of subscribing
|
|
- Single field (email only)
|
|
- Consider incentive (discount, content)
|
|
|
|
**Copy structure:**
|
|
- Headline: Benefit or curiosity hook
|
|
- Subhead: What they get, how often
|
|
- CTA: Specific action ("Get Weekly Tips")
|
|
|
|
### Lead Magnet Popup
|
|
**Goal**: Exchange content for email
|
|
|
|
**Best practices:**
|
|
- Show what they get (cover image, preview)
|
|
- Specific, tangible promise
|
|
- Minimal fields (email, maybe name)
|
|
- Instant delivery expectation
|
|
|
|
### Discount/Promotion Popup
|
|
**Goal**: First purchase or conversion
|
|
|
|
**Best practices:**
|
|
- Clear discount (10%, $20, free shipping)
|
|
- Deadline creates urgency
|
|
- Single use per visitor
|
|
- Easy to apply code
|
|
|
|
### Exit Intent Popup
|
|
**Goal**: Last-chance conversion
|
|
|
|
**Best practices:**
|
|
- Acknowledge they're leaving
|
|
- Different offer than entry popup
|
|
- Address common objections
|
|
- Final compelling reason to stay
|
|
|
|
**Formats:**
|
|
- "Wait! Before you go..."
|
|
- "Forget something?"
|
|
- "Get 10% off your first order"
|
|
- "Questions? Chat with us"
|
|
|
|
### Announcement Banner
|
|
**Goal**: Site-wide communication
|
|
|
|
**Best practices:**
|
|
- Top of page (sticky or static)
|
|
- Single, clear message
|
|
- Dismissable
|
|
- Links to more info
|
|
- Time-limited (don't leave forever)
|
|
|
|
### Slide-In
|
|
**Goal**: Less intrusive engagement
|
|
|
|
**Best practices:**
|
|
- Enters from corner/bottom
|
|
- Doesn't block content
|
|
- Easy to dismiss or minimize
|
|
- Good for chat, support, secondary CTAs
|
|
|
|
---
|
|
|
|
## Design Best Practices
|
|
|
|
### Visual Hierarchy
|
|
1. Headline (largest, first seen)
|
|
2. Value prop/offer (clear benefit)
|
|
3. Form/CTA (obvious action)
|
|
4. Close option (easy to find)
|
|
|
|
### Sizing
|
|
- Desktop: 400-600px wide typical
|
|
- Don't cover entire screen
|
|
- Mobile: Full-width bottom or center, not full-screen
|
|
- Leave space to close (visible X, click outside)
|
|
|
|
### Close Button
|
|
- Always visible (top right is convention)
|
|
- Large enough to tap on mobile
|
|
- "No thanks" text link as alternative
|
|
- Click outside to close
|
|
|
|
### Mobile Considerations
|
|
- Can't detect exit intent (use alternatives)
|
|
- Full-screen overlays feel aggressive
|
|
- Bottom slide-ups work well
|
|
- Larger touch targets
|
|
- Easy dismiss gestures
|
|
|
|
### Imagery
|
|
- Product image or preview
|
|
- Face if relevant (increases trust)
|
|
- Minimal for speed
|
|
- Optional—copy can work alone
|
|
|
|
---
|
|
|
|
## Copy Formulas
|
|
|
|
### Headlines
|
|
- Benefit-driven: "Get [result] in [timeframe]"
|
|
- Question: "Want [desired outcome]?"
|
|
- Command: "Don't miss [thing]"
|
|
- Social proof: "Join [X] people who..."
|
|
- Curiosity: "The one thing [audience] always get wrong about [topic]"
|
|
|
|
### Subheadlines
|
|
- Expand on the promise
|
|
- Address objection ("No spam, ever")
|
|
- Set expectations ("Weekly tips in 5 min")
|
|
|
|
### CTA Buttons
|
|
- First person works: "Get My Discount" vs "Get Your Discount"
|
|
- Specific over generic: "Send Me the Guide" vs "Submit"
|
|
- Value-focused: "Claim My 10% Off" vs "Subscribe"
|
|
|
|
### Decline Options
|
|
- Polite, not guilt-trippy
|
|
- "No thanks" / "Maybe later" / "I'm not interested"
|
|
- Avoid manipulative: "No, I don't want to save money"
|
|
|
|
---
|
|
|
|
## Frequency and Rules
|
|
|
|
### Frequency Capping
|
|
- Show maximum once per session
|
|
- Remember dismissals (cookie/localStorage)
|
|
- 7-30 days before showing again
|
|
- Respect user choice
|
|
|
|
### Audience Targeting
|
|
- New vs. returning visitors (different needs)
|
|
- By traffic source (match ad message)
|
|
- By page type (context-relevant)
|
|
- Exclude converted users
|
|
- Exclude recently dismissed
|
|
|
|
### Page Rules
|
|
- Exclude checkout/conversion flows
|
|
- Consider blog vs. product pages
|
|
- Match offer to page context
|
|
|
|
---
|
|
|
|
## Compliance and Accessibility
|
|
|
|
### GDPR/Privacy
|
|
- Clear consent language
|
|
- Link to privacy policy
|
|
- Don't pre-check opt-ins
|
|
- Honor unsubscribe/preferences
|
|
|
|
### Accessibility
|
|
- Keyboard navigable (Tab, Enter, Esc)
|
|
- Focus trap while open
|
|
- Screen reader compatible
|
|
- Sufficient color contrast
|
|
- Don't rely on color alone
|
|
|
|
### Google Guidelines
|
|
- Intrusive interstitials hurt SEO
|
|
- Mobile especially sensitive
|
|
- Allow: Cookie notices, age verification, reasonable banners
|
|
- Avoid: Full-screen before content on mobile
|
|
|
|
---
|
|
|
|
## Measurement
|
|
|
|
### Key Metrics
|
|
- **Impression rate**: Visitors who see popup
|
|
- **Conversion rate**: Impressions → Submissions
|
|
- **Close rate**: How many dismiss immediately
|
|
- **Engagement rate**: Interaction before close
|
|
- **Time to close**: How long before dismissing
|
|
|
|
### What to Track
|
|
- Popup views
|
|
- Form focus
|
|
- Submission attempts
|
|
- Successful submissions
|
|
- Close button clicks
|
|
- Outside clicks
|
|
- Escape key
|
|
|
|
### Benchmarks
|
|
- Email popup: 2-5% conversion typical
|
|
- Exit intent: 3-10% conversion
|
|
- Click-triggered: Higher (10%+, self-selected)
|
|
|
|
---
|