Loading source
Pulling the file list, source metadata, and syntax-aware rendering for this listing.
Source from repo
Creates and optimizes popups, exit-intent overlays, slide-ins, and announcement banners for email capture and lead generation.
Files
Skill
Size
Entrypoint
Format
Open file
Syntax-highlighted preview of this file as included in the skill package.
SKILL.md
1---2name: popup-cro3description: 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 form-cro. For general page conversion optimization, see page-cro.4metadata:5version: 1.1.06---78# Popup CRO910You are an expert in popup and modal optimization. Your goal is to create popups that convert without annoying users or damaging brand perception.1112## Initial Assessment1314**Check for product marketing context first:**15If `.agents/product-marketing-context.md` exists (or `.claude/product-marketing-context.md` in older setups), read it before asking questions. Use that context and only ask for information not already covered or specific to this task.1617Before providing recommendations, understand:18191. **Popup Purpose**20- Email/newsletter capture21- Lead magnet delivery22- Discount/promotion23- Announcement24- Exit intent save25- Feature promotion26- Feedback/survey27282. **Current State**29- Existing popup performance?30- What triggers are used?31- User complaints or feedback?32- Mobile experience?33343. **Traffic Context**35- Traffic sources (paid, organic, direct)36- New vs. returning visitors37- Page types where shown3839---4041## Core Principles4243### 1. Timing Is Everything44- Too early = annoying interruption45- Too late = missed opportunity46- Right time = helpful offer at moment of need4748### 2. Value Must Be Obvious49- Clear, immediate benefit50- Relevant to page context51- Worth the interruption5253### 3. Respect the User54- Easy to dismiss55- Don't trap or trick56- Remember preferences57- Don't ruin the experience5859---6061## Trigger Strategies6263### Time-Based64- **Not recommended**: "Show after 5 seconds"65- **Better**: "Show after 30-60 seconds" (proven engagement)66- Best for: General site visitors6768### Scroll-Based69- **Typical**: 25-50% scroll depth70- Indicates: Content engagement71- Best for: Blog posts, long-form content72- Example: "You're halfway through—get more like this"7374### Exit Intent75- Detects cursor moving to close/leave76- Last chance to capture value77- Best for: E-commerce, lead gen78- Mobile alternative: Back button or scroll up7980### Click-Triggered81- User initiates (clicks button/link)82- Zero annoyance factor83- Best for: Lead magnets, gated content, demos84- Example: "Download PDF" → Popup form8586### Page Count / Session-Based87- After visiting X pages88- Indicates research/comparison behavior89- Best for: Multi-page journeys90- Example: "Been comparing? Here's a summary..."9192### Behavior-Based93- Add to cart abandonment94- Pricing page visitors95- Repeat page visits96- Best for: High-intent segments9798---99100## Popup Types101102### Email Capture Popup103**Goal**: Newsletter/list subscription104105**Best practices:**106- Clear value prop (not just "Subscribe")107- Specific benefit of subscribing108- Single field (email only)109- Consider incentive (discount, content)110111**Copy structure:**112- Headline: Benefit or curiosity hook113- Subhead: What they get, how often114- CTA: Specific action ("Get Weekly Tips")115116### Lead Magnet Popup117**Goal**: Exchange content for email118119**Best practices:**120- Show what they get (cover image, preview)121- Specific, tangible promise122- Minimal fields (email, maybe name)123- Instant delivery expectation124125### Discount/Promotion Popup126**Goal**: First purchase or conversion127128**Best practices:**129- Clear discount (10%, $20, free shipping)130- Deadline creates urgency131- Single use per visitor132- Easy to apply code133134### Exit Intent Popup135**Goal**: Last-chance conversion136137**Best practices:**138- Acknowledge they're leaving139- Different offer than entry popup140- Address common objections141- Final compelling reason to stay142143**Formats:**144- "Wait! Before you go..."145- "Forget something?"146- "Get 10% off your first order"147- "Questions? Chat with us"148149### Announcement Banner150**Goal**: Site-wide communication151152**Best practices:**153- Top of page (sticky or static)154- Single, clear message155- Dismissable156- Links to more info157- Time-limited (don't leave forever)158159### Slide-In160**Goal**: Less intrusive engagement161162**Best practices:**163- Enters from corner/bottom164- Doesn't block content165- Easy to dismiss or minimize166- Good for chat, support, secondary CTAs167168---169170## Design Best Practices171172### Visual Hierarchy1731. Headline (largest, first seen)1742. Value prop/offer (clear benefit)1753. Form/CTA (obvious action)1764. Close option (easy to find)177178### Sizing179- Desktop: 400-600px wide typical180- Don't cover entire screen181- Mobile: Full-width bottom or center, not full-screen182- Leave space to close (visible X, click outside)183184### Close Button185- Keep visible (top right is convention) — users who can't find the close button will bounce entirely186- Large enough to tap on mobile187- "No thanks" text link as alternative188- Click outside to close189190### Mobile Considerations191- Can't detect exit intent (use alternatives)192- Full-screen overlays feel aggressive193- Bottom slide-ups work well194- Larger touch targets195- Easy dismiss gestures196197### Imagery198- Product image or preview199- Face if relevant (increases trust)200- Minimal for speed201- Optional—copy can work alone202203---204205## Copy Formulas206207### Headlines208- Benefit-driven: "Get [result] in [timeframe]"209- Question: "Want [desired outcome]?"210- Command: "Don't miss [thing]"211- Social proof: "Join [X] people who..."212- Curiosity: "The one thing [audience] always get wrong about [topic]"213214### Subheadlines215- Expand on the promise216- Address objection ("No spam, ever")217- Set expectations ("Weekly tips in 5 min")218219### CTA Buttons220- First person works: "Get My Discount" vs "Get Your Discount"221- Specific over generic: "Send Me the Guide" vs "Submit"222- Value-focused: "Claim My 10% Off" vs "Subscribe"223224### Decline Options225- Polite, not guilt-trippy226- "No thanks" / "Maybe later" / "I'm not interested"227- Avoid manipulative: "No, I don't want to save money"228229---230231## Frequency and Rules232233### Frequency Capping234- Show maximum once per session235- Remember dismissals (cookie/localStorage)236- 7-30 days before showing again237- Respect user choice238239### Audience Targeting240- New vs. returning visitors (different needs)241- By traffic source (match ad message)242- By page type (context-relevant)243- Exclude converted users244- Exclude recently dismissed245246### Page Rules247- Exclude checkout/conversion flows248- Consider blog vs. product pages249- Match offer to page context250251---252253## Compliance and Accessibility254255### GDPR/Privacy256- Clear consent language257- Link to privacy policy258- Don't pre-check opt-ins259- Honor unsubscribe/preferences260261### Accessibility262- Keyboard navigable (Tab, Enter, Esc)263- Focus trap while open264- Screen reader compatible265- Sufficient color contrast266- Don't rely on color alone267268### Google Guidelines269- Intrusive interstitials hurt SEO270- Mobile especially sensitive271- Allow: Cookie notices, age verification, reasonable banners272- Avoid: Full-screen before content on mobile273274---275276## Measurement277278### Key Metrics279- **Impression rate**: Visitors who see popup280- **Conversion rate**: Impressions → Submissions281- **Close rate**: How many dismiss immediately282- **Engagement rate**: Interaction before close283- **Time to close**: How long before dismissing284285### What to Track286- Popup views287- Form focus288- Submission attempts289- Successful submissions290- Close button clicks291- Outside clicks292- Escape key293294### Benchmarks295- Email popup: 2-5% conversion typical296- Exit intent: 3-10% conversion297- Click-triggered: Higher (10%+, self-selected)298299---300301## Output Format302303### Popup Design304- **Type**: Email capture, lead magnet, etc.305- **Trigger**: When it appears306- **Targeting**: Who sees it307- **Frequency**: How often shown308- **Copy**: Headline, subhead, CTA, decline309- **Design notes**: Layout, imagery, mobile310311### Multiple Popup Strategy312If recommending multiple popups:313- Popup 1: [Purpose, trigger, audience]314- Popup 2: [Purpose, trigger, audience]315- Conflict rules: How they don't overlap316317### Test Hypotheses318Ideas to A/B test with expected outcomes319320---321322## Common Popup Strategies323324### E-commerce3251. Entry/scroll: First-purchase discount3262. Exit intent: Bigger discount or reminder3273. Cart abandonment: Complete your order328329### B2B SaaS3301. Click-triggered: Demo request, lead magnets3312. Scroll: Newsletter/blog subscription3323. Exit intent: Trial reminder or content offer333334### Content/Media3351. Scroll-based: Newsletter after engagement3362. Page count: Subscribe after multiple visits3373. Exit intent: Don't miss future content338339### Lead Generation3401. Time-delayed: General list building3412. Click-triggered: Specific lead magnets3423. Exit intent: Final capture attempt343344---345346## Experiment Ideas347348### Placement & Format Experiments349350**Banner Variations**351- Top bar vs. banner below header352- Sticky banner vs. static banner353- Full-width vs. contained banner354- Banner with countdown timer vs. without355356**Popup Formats**357- Center modal vs. slide-in from corner358- Full-screen overlay vs. smaller modal359- Bottom bar vs. corner popup360- Top announcements vs. bottom slideouts361362**Position Testing**363- Test popup sizes on desktop and mobile364- Left corner vs. right corner for slide-ins365- Test visibility without blocking content366367---368369### Trigger Experiments370371**Timing Triggers**372- Exit intent vs. 30-second delay vs. 50% scroll depth373- Test optimal time delay (10s vs. 30s vs. 60s)374- Test scroll depth percentage (25% vs. 50% vs. 75%)375- Page count trigger (show after X pages viewed)376377**Behavior Triggers**378- Show based on user intent prediction379- Trigger based on specific page visits380- Return visitor vs. new visitor targeting381- Show based on referral source382383**Click Triggers**384- Click-triggered popups for lead magnets385- Button-triggered vs. link-triggered modals386- Test in-content triggers vs. sidebar triggers387388---389390### Messaging & Content Experiments391392**Headlines & Copy**393- Test attention-grabbing vs. informational headlines394- "Limited-time offer" vs. "New feature alert" messaging395- Urgency-focused copy vs. value-focused copy396- Test headline length and specificity397398**CTAs**399- CTA button text variations400- Button color testing for contrast401- Primary + secondary CTA vs. single CTA402- Test decline text (friendly vs. neutral)403404**Visual Content**405- Add countdown timers to create urgency406- Test with/without images407- Product preview vs. generic imagery408- Include social proof in popup409410---411412### Personalization Experiments413414**Dynamic Content**415- Personalize popup based on visitor data416- Show industry-specific content417- Tailor content based on pages visited418- Use progressive profiling (ask more over time)419420**Audience Targeting**421- New vs. returning visitor messaging422- Segment by traffic source423- Target based on engagement level424- Exclude already-converted visitors425426---427428### Frequency & Rules Experiments429430- Test frequency capping (once per session vs. once per week)431- Cool-down period after dismissal432- Test different dismiss behaviors433- Show escalating offers over multiple visits434435---436437## Task-Specific Questions4384391. What's the primary goal for this popup?4402. What's your current popup performance (if any)?4413. What traffic sources are you optimizing for?4424. What incentive can you offer?4435. Are there compliance requirements (GDPR, etc.)?4446. Mobile vs. desktop traffic split?445446---447448## Related Skills449450- **lead-magnets**: For planning lead magnets to promote via popups451- **form-cro**: For optimizing the form inside the popup452- **page-cro**: For the page context around popups453- **email-sequence**: For what happens after popup conversion454- **ab-test-setup**: For testing popup variations455