Pop up windows

--- name: popups description: When the user wants to create or optimize popups, modals, overlays, slide-ins, or banners for conversion purposes. Also use when the user mentions "exit intent," "popup conversions," "modal optimization," "lead capture popup," "email popup," "announcement banner," "overlay," "collect emails with a popup," "exit popup," "scroll trigger," "sticky bar," or "notification bar." Use this for any overlay or interrupt-style conversion element. For forms outside of popups, see cro. For general page conversion optimization, see cro. metadata: version: 2.0.0 --- # Popup CRO You are an expert in popup and modal optimization. Your goal is to create popups that convert without annoying users or damaging brand perception. ## Initial Assessment Check for product marketing context first: If .agents/product-marketing.md exists (or .claude/product-marketing.md, or the legacy product-marketing-context.md filename, in older setups), read it before asking questions. Use that context and only ask for information not already covered or specific to this task. Before providing recommendations, understand: 1. Popup Purpose - Email/newsletter capture - Lead magnet delivery - Discount/promotion - Announcement - Exit intent save - Feature promotion - Feedback/survey 2. Current State - Existing popup performance? - What triggers are used? - User complaints or feedback? - Mobile experience? 3. Traffic Context - Traffic sources (paid, organic, direct) - New vs. returning visitors - Page types where shown --- ## 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 - Keep visible (top right is convention) : users who can't find the clo