{"slug":"popup-cro","title":"popup-cro","tags":["site-building","cro","popups","conversion"],"agent_summary":"Create or optimize popups, modals, overlays, slide-ins, and banners for conversion. Covers timing triggers, copy frameworks, mobile treatment, and A/B testing. For page-wide forms see form-cro.","trigger_phrases":["popup-cro","exit intent","popup conversions","modal optimization","lead capture popup","email popup","announcement banner","overlay","popup design"],"runnable":false,"markdown":"**Trigger:** Use when \"exit intent\", \"popup conversions\", \"modal optimization\", \"lead capture popup\", \"email popup\". Distinct from form-cro (standalone forms) and page-cro (page-level optimization).\n\n### Popup Types and When to Use\n\n| Type | Trigger | Best For |\n|---|---|---|\n| Exit intent | Mouse leaves viewport | Cart abandonment, lead capture |\n| Time-based | After X seconds | Newsletter, content upgrade |\n| Scroll-based | After X% scroll depth | Qualified leads (they read your content) |\n| Click-triggered | Button or link click | CTAs that don't need navigation |\n| Welcome mat | Immediate on load | Highest urgency offers (sparingly) |\n| Slide-in | After scroll or time | Softer alternative to center modal |\n| Announcement bar | Always-visible top bar | Promotions, site-wide announcements |\n\n### Principle 1: Timing Is Everything\n\n- Too early = annoying interruption\n- Too late = missed opportunity\n- Right time = helpful offer at moment of need\n\n**Recommended timing defaults:**\n- Time-based: 30-60 seconds (after engagement, not on load)\n- Scroll-based: 50-60% scroll depth for blog content\n- Exit intent: Mouse leaves — maximum 1 trigger per session\n\n### Principle 2: Value Exchange Must Be Clear\n\nThe popup must answer \"What do I get?\" in under 3 seconds:\n- Weak: \"Sign up for our newsletter\"\n- Strong: \"Get the Roofing Inspection Checklist — Free PDF\"\n\n### Headline Formulas\n\n- \"Get [Specific Thing] — [Time or Qualifier]\": \"Get Your Free Quote in 90 Seconds\"\n- \"Stop [Pain] — Start [Desired State]\": \"Stop Guessing Prices — See Real Costs\"\n- \"Join [Number] Who [Result]\": \"Join 8,000 homeowners getting our weekly tips\"\n\n### Mobile Treatment\n\n**Core rules:**\n- Mobile popups must not cover more than 75% of the viewport\n- Always show a clearly visible close button (X), minimum 44x44px tap target\n- Never use exit-intent popups on mobile (no mouse movement to detect)\n- Replace exit-intent with scroll-based (80% depth) on mobile\n- Bottom sheet slide-in performs better than full-screen modal on mobile\n\n### Anatomy of a High-Converting Popup\n\n1. **Headline**: Benefit-first, specific, under 10 words\n2. **Sub-copy**: One sentence elaborating the value or reducing friction\n3. **Visual**: Image or icon (optional, but increases attention)\n4. **CTA button**: Action verb + outcome (\"Send My Free Checklist\")\n5. **Dismiss copy**: Keeps the brand voice (\"No thanks, I'll pay full price\")\n6. **Trust micro-copy**: \"No spam. Instant access.\" below email field\n\n### A/B Test Priority Queue\n\n1. Headline copy (highest impact)\n2. CTA button copy\n3. Trigger timing\n4. Offer/lead magnet itself\n5. Form fields (email only vs name + email)\n6. Visual design\n\n---\n","html":"<p><strong>Trigger:</strong> Use when \"exit intent\", \"popup conversions\", \"modal optimization\", \"lead capture popup\", \"email popup\". Distinct from form-cro (standalone forms) and page-cro (page-level optimization).</p>\n<h3>Popup Types and When to Use</h3>\n<p>| Type | Trigger | Best For |\n|---|---|---|\n| Exit intent | Mouse leaves viewport | Cart abandonment, lead capture |\n| Time-based | After X seconds | Newsletter, content upgrade |\n| Scroll-based | After X% scroll depth | Qualified leads (they read your content) |\n| Click-triggered | Button or link click | CTAs that don't need navigation |\n| Welcome mat | Immediate on load | Highest urgency offers (sparingly) |\n| Slide-in | After scroll or time | Softer alternative to center modal |\n| Announcement bar | Always-visible top bar | Promotions, site-wide announcements |</p>\n<h3>Principle 1: Timing Is Everything</h3>\n<ul>\n<li>Too early = annoying interruption</li>\n<li>Too late = missed opportunity</li>\n<li>Right time = helpful offer at moment of need</li>\n</ul>\n<p><strong>Recommended timing defaults:</strong></p>\n<ul>\n<li>Time-based: 30-60 seconds (after engagement, not on load)</li>\n<li>Scroll-based: 50-60% scroll depth for blog content</li>\n<li>Exit intent: Mouse leaves — maximum 1 trigger per session</li>\n</ul>\n<h3>Principle 2: Value Exchange Must Be Clear</h3>\n<p>The popup must answer \"What do I get?\" in under 3 seconds:</p>\n<ul>\n<li>Weak: \"Sign up for our newsletter\"</li>\n<li>Strong: \"Get the Roofing Inspection Checklist — Free PDF\"</li>\n</ul>\n<h3>Headline Formulas</h3>\n<ul>\n<li>\"Get [Specific Thing] — [Time or Qualifier]\": \"Get Your Free Quote in 90 Seconds\"</li>\n<li>\"Stop [Pain] — Start [Desired State]\": \"Stop Guessing Prices — See Real Costs\"</li>\n<li>\"Join [Number] Who [Result]\": \"Join 8,000 homeowners getting our weekly tips\"</li>\n</ul>\n<h3>Mobile Treatment</h3>\n<p><strong>Core rules:</strong></p>\n<ul>\n<li>Mobile popups must not cover more than 75% of the viewport</li>\n<li>Always show a clearly visible close button (X), minimum 44x44px tap target</li>\n<li>Never use exit-intent popups on mobile (no mouse movement to detect)</li>\n<li>Replace exit-intent with scroll-based (80% depth) on mobile</li>\n<li>Bottom sheet slide-in performs better than full-screen modal on mobile</li>\n</ul>\n<h3>Anatomy of a High-Converting Popup</h3>\n<ol>\n<li><strong>Headline</strong>: Benefit-first, specific, under 10 words</li>\n<li><strong>Sub-copy</strong>: One sentence elaborating the value or reducing friction</li>\n<li><strong>Visual</strong>: Image or icon (optional, but increases attention)</li>\n<li><strong>CTA button</strong>: Action verb + outcome (\"Send My Free Checklist\")</li>\n<li><strong>Dismiss copy</strong>: Keeps the brand voice (\"No thanks, I'll pay full price\")</li>\n<li><strong>Trust micro-copy</strong>: \"No spam. Instant access.\" below email field</li>\n</ol>\n<h3>A/B Test Priority Queue</h3>\n<ol>\n<li>Headline copy (highest impact)</li>\n<li>CTA button copy</li>\n<li>Trigger timing</li>\n<li>Offer/lead magnet itself</li>\n<li>Form fields (email only vs name + email)</li>\n<li>Visual design</li>\n</ol>\n<hr>\n"}