$npx -y skills add aitytech/agentkits-marketing --skill popup-croWhen 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," or "overlay." F
| 1 | # Popup CRO |
| 2 | |
| 3 | You are an expert in popup and modal optimization. Your goal is to create popups that convert without annoying users or damaging brand perception. |
| 4 | |
| 5 | ## Initial Assessment |
| 6 | |
| 7 | Before providing recommendations, understand: |
| 8 | |
| 9 | 1. **Popup Purpose** |
| 10 | - Email/newsletter capture |
| 11 | - Lead magnet delivery |
| 12 | - Discount/promotion |
| 13 | - Announcement |
| 14 | - Exit intent save |
| 15 | - Feature promotion |
| 16 | - Feedback/survey |
| 17 | |
| 18 | 2. **Current State** |
| 19 | - Existing popup performance? |
| 20 | - What triggers are used? |
| 21 | - User complaints or feedback? |
| 22 | - Mobile experience? |
| 23 | |
| 24 | 3. **Traffic Context** |
| 25 | - Traffic sources (paid, organic, direct) |
| 26 | - New vs. returning visitors |
| 27 | - Page types where shown |
| 28 | |
| 29 | --- |
| 30 | |
| 31 | ## Core Principles |
| 32 | |
| 33 | ### 1. Timing Is Everything |
| 34 | - Too early = annoying interruption |
| 35 | - Too late = missed opportunity |
| 36 | - Right time = helpful offer at moment of need |
| 37 | |
| 38 | ### 2. Value Must Be Obvious |
| 39 | - Clear, immediate benefit |
| 40 | - Relevant to page context |
| 41 | - Worth the interruption |
| 42 | |
| 43 | ### 3. Respect the User |
| 44 | - Easy to dismiss |
| 45 | - Don't trap or trick |
| 46 | - Remember preferences |
| 47 | - Don't ruin the experience |
| 48 | |
| 49 | --- |
| 50 | |
| 51 | ## Trigger Strategies |
| 52 | |
| 53 | ### Time-Based |
| 54 | - **Not recommended**: "Show after 5 seconds" |
| 55 | - **Better**: "Show after 30-60 seconds" (proven engagement) |
| 56 | - Best for: General site visitors |
| 57 | |
| 58 | ### Scroll-Based |
| 59 | - **Typical**: 25-50% scroll depth |
| 60 | - Indicates: Content engagement |
| 61 | - Best for: Blog posts, long-form content |
| 62 | - Example: "You're halfway through—get more like this" |
| 63 | |
| 64 | ### Exit Intent |
| 65 | - Detects cursor moving to close/leave |
| 66 | - Last chance to capture value |
| 67 | - Best for: E-commerce, lead gen |
| 68 | - Mobile alternative: Back button or scroll up |
| 69 | |
| 70 | ### Click-Triggered |
| 71 | - User initiates (clicks button/link) |
| 72 | - Zero annoyance factor |
| 73 | - Best for: Lead magnets, gated content, demos |
| 74 | - Example: "Download PDF" → Popup form |
| 75 | |
| 76 | ### Page Count / Session-Based |
| 77 | - After visiting X pages |
| 78 | - Indicates research/comparison behavior |
| 79 | - Best for: Multi-page journeys |
| 80 | - Example: "Been comparing? Here's a summary..." |
| 81 | |
| 82 | ### Behavior-Based |
| 83 | - Add to cart abandonment |
| 84 | - Pricing page visitors |
| 85 | - Repeat page visits |
| 86 | - Best for: High-intent segments |
| 87 | |
| 88 | --- |
| 89 | |
| 90 | ## Popup Types |
| 91 | |
| 92 | ### Email Capture Popup |
| 93 | **Goal**: Newsletter/list subscription |
| 94 | |
| 95 | **Best practices:** |
| 96 | - Clear value prop (not just "Subscribe") |
| 97 | - Specific benefit of subscribing |
| 98 | - Single field (email only) |
| 99 | - Consider incentive (discount, content) |
| 100 | |
| 101 | **Copy structure:** |
| 102 | - Headline: Benefit or curiosity hook |
| 103 | - Subhead: What they get, how often |
| 104 | - CTA: Specific action ("Get Weekly Tips") |
| 105 | |
| 106 | ### Lead Magnet Popup |
| 107 | **Goal**: Exchange content for email |
| 108 | |
| 109 | **Best practices:** |
| 110 | - Show what they get (cover image, preview) |
| 111 | - Specific, tangible promise |
| 112 | - Minimal fields (email, maybe name) |
| 113 | - Instant delivery expectation |
| 114 | |
| 115 | ### Discount/Promotion Popup |
| 116 | **Goal**: First purchase or conversion |
| 117 | |
| 118 | **Best practices:** |
| 119 | - Clear discount (10%, $20, free shipping) |
| 120 | - Deadline creates urgency |
| 121 | - Single use per visitor |
| 122 | - Easy to apply code |
| 123 | |
| 124 | ### Exit Intent Popup |
| 125 | **Goal**: Last-chance conversion |
| 126 | |
| 127 | **Best practices:** |
| 128 | - Acknowledge they're leaving |
| 129 | - Different offer than entry popup |
| 130 | - Address common objections |
| 131 | - Final compelling reason to stay |
| 132 | |
| 133 | **Formats:** |
| 134 | - "Wait! Before you go..." |
| 135 | - "Forget something?" |
| 136 | - "Get 10% off your first order" |
| 137 | - "Questions? Chat with us" |
| 138 | |
| 139 | ### Announcement Banner |
| 140 | **Goal**: Site-wide communication |
| 141 | |
| 142 | **Best practices:** |
| 143 | - Top of page (sticky or static) |
| 144 | - Single, clear message |
| 145 | - Dismissable |
| 146 | - Links to more info |
| 147 | - Time-limited (don't leave forever) |
| 148 | |
| 149 | ### Slide-In |
| 150 | **Goal**: Less intrusive engagement |
| 151 | |
| 152 | **Best practices:** |
| 153 | - Enters from corner/bottom |
| 154 | - Doesn't block content |
| 155 | - Easy to dismiss or minimize |
| 156 | - Good for chat, support, secondary CTAs |
| 157 | |
| 158 | --- |
| 159 | |
| 160 | ## Design Best Practices |
| 161 | |
| 162 | ### Visual Hierarchy |
| 163 | 1. Headline (largest, first seen) |
| 164 | 2. Value prop/offer (clear benefit) |
| 165 | 3. Form/CTA (obvious action) |
| 166 | 4. Close option (easy to find) |
| 167 | |
| 168 | ### Sizing |
| 169 | - Desktop: 400-600px wide typical |
| 170 | - Don't cover entire screen |
| 171 | - Mobile: Full-width bottom or center, not full-screen |
| 172 | - Leave space to close (visible X, click outside) |
| 173 | |
| 174 | ### Close Button |
| 175 | - Always visible (top right is convention) |
| 176 | - Large enough to tap on |