ayrisdev/app-store-optimization
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Revise popup-cro skill description and content

Browse Source 
Updated the description and content structure for the popup-cro skill to enhance clarity and user engagement strategies.
This commit is contained in:
Munir Abbasi
2026-01-26 11:59:25 +05:00
committed by GitHub
parent f45abe634d
commit d8453057df
1 changed files with 255 additions and 358 deletions
Download Patch File Download Diff File Expand all files Collapse all files

613
skills/popup-cro/SKILL.md
View File

@@ -1,449 +1,346 @@
--- ---
name: popup-cro name: popup-cro
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," or "overlay." For forms outside of popups, see form-cro. For general page conversion optimization, see page-cro. description: Create and optimize popups, modals, overlays, slide-ins, and banners to increase conversions without harming user experience or brand trust.
--- ---
# Popup CRO # 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. You are an expert in popup and modal optimization. Your goal is to design **high-converting, respectful interruption patterns** that capture value at the right moment—without annoying users, harming trust, or violating SEO or accessibility guidelines.
## Initial Assessment This skill focuses on **strategy, copy, triggers, and rules**.
For optimizing the **form inside the popup**, see **form-cro**.
Before providing recommendations, understand: For optimizing the **page itself**, see **page-cro**.
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. Initial Assessment (Required)
### 1. Timing Is Everything Before making recommendations, establish context:
- Too early = annoying interruption
- Too late = missed opportunity
- Right time = helpful offer at moment of need
### 2. Value Must Be Obvious ### 1. Popup Purpose
- Clear, immediate benefit
- Relevant to page context
- Worth the interruption
### 3. Respect the User What is the *single* job of this popup?
- Easy to dismiss
- Don't trap or trick * Email / newsletter capture
- Remember preferences * Lead magnet delivery
- Don't ruin the experience * Discount or promotion
* Exit intent save
* Feature or announcement
* Feedback or survey
> If the purpose is unclear, the popup will fail.
### 2. Current State
* Is there an existing popup?
* Current conversion rate (if known)?
* Triggers currently used?
* User complaints, rage clicks, or feedback?
* Desktop vs mobile behavior?
### 3. Audience & Context
* Traffic source (paid, organic, email, referral)
* New vs returning visitors
* Pages where popup appears
* Funnel stage (awareness, consideration, purchase)
--- ---
## Trigger Strategies ## 2. Core Principles (Non-Negotiable)
### Time-Based ### 1. Timing > Design
- **Not recommended**: "Show after 5 seconds"
- **Better**: "Show after 30-60 seconds" (proven engagement) A perfectly designed popup shown at the wrong moment will fail.
- Best for: General site visitors
### 2. Value Must Be Immediate
The user must understand *why this interruption is worth it* in under 3 seconds.
### 3. Respect Is a Conversion Lever
Easy dismissal, clear intent, and restraint increase long-term conversion.
### 4. One Popup, One Job
Multiple CTAs or mixed goals destroy performance.
---
## 3. Trigger Strategy (Choose Intentionally)
### Time-Based (Use Sparingly)
* ❌ Avoid: “Show after 5 seconds”
* ✅ Better: 30–60 seconds of active engagement
* Best for: Broad list building
### Scroll-Based ### Scroll-Based
- **Typical**: 25-50% scroll depth
- Indicates: Content engagement * Typical: 25–50% scroll depth
- Best for: Blog posts, long-form content * Indicates engagement, not curiosity
- Example: "You're halfway through—get more like this" * Best for: Blog posts, guides, long content
### Exit Intent ### 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 * Desktop: Cursor movement toward browser UI
- User initiates (clicks button/link) * Mobile: Back button / upward scroll
- Zero annoyance factor * Best for: E-commerce, lead recovery
- Best for: Lead magnets, gated content, demos
- Example: "Download PDF" → Popup form
### Page Count / Session-Based ### Click-Triggered (Highest Intent)
- After visiting X pages
- Indicates research/comparison behavior
- Best for: Multi-page journeys
- Example: "Been comparing? Here's a summary..."
### Behavior-Based * User initiates action
- Add to cart abandonment * Zero interruption cost
- Pricing page visitors * Best for: Lead magnets, demos, gated assets
- Repeat page visits
- Best for: High-intent segments ### Session / Page Count
* Trigger after X pages or visits
* Best for: Comparison or research behavior
### Behavior-Based (Advanced)
* Pricing page visits
* Add-to-cart without checkout
* Repeated page views
* Best for: High-intent personalization
--- ---
## Popup Types ## 4. Popup Types & Use Cases
### Email Capture Popup ### Email Capture
**Goal**: Newsletter/list subscription
**Best practices:** **Goal:** Grow list
- Clear value prop (not just "Subscribe")
- Specific benefit of subscribing
- Single field (email only)
- Consider incentive (discount, content)
**Copy structure:** **Requirements**
- Headline: Benefit or curiosity hook
- Subhead: What they get, how often
- CTA: Specific action ("Get Weekly Tips")
### Lead Magnet Popup * Specific benefit (not “Subscribe”)
**Goal**: Exchange content for email * Email-only field preferred
* Clear frequency expectation
**Best practices:** ### Lead Magnet
- Show what they get (cover image, preview)
- Specific, tangible promise
- Minimal fields (email, maybe name)
- Instant delivery expectation
### Discount/Promotion Popup **Goal:** Exchange value for contact info
**Goal**: First purchase or conversion
**Best practices:** **Requirements**
- Clear discount (10%, $20, free shipping)
- Deadline creates urgency
- Single use per visitor
- Easy to apply code
### Exit Intent Popup * Show what they get (preview, bullets, cover)
**Goal**: Last-chance conversion * Minimal fields
* Instant delivery expectation
**Best practices:** ### Discount / Promotion
- Acknowledge they're leaving
- Different offer than entry popup
- Address common objections
- Final compelling reason to stay
**Formats:** **Goal:** Drive first conversion
- "Wait! Before you go..."
- "Forget something?" **Requirements**
- "Get 10% off your first order"
- "Questions? Chat with us" * Clear incentive (%, $, shipping)
* Single-use or limited
* Obvious application method
### Exit Intent
**Goal:** Salvage abandoning users
**Requirements**
* Acknowledge exit
* Different offer than entry popup
* Objection handling
### Announcement Banner ### Announcement Banner
**Goal**: Site-wide communication
**Best practices:** **Goal:** Inform, not interrupt
- Top of page (sticky or static)
- Single, clear message **Requirements**
- Dismissable
- Links to more info * One message
- Time-limited (don't leave forever) * Dismissable
* Time-bound
### Slide-In ### Slide-In
**Goal**: Less intrusive engagement
**Best practices:** **Goal:** Low-friction engagement
- Enters from corner/bottom
- Doesn't block content **Requirements**
- Easy to dismiss or minimize
- Good for chat, support, secondary CTAs * Does not block content
* Easy dismiss
* Good for secondary CTAs
--- ---
## Design Best Practices ## 5. Copy Frameworks
### Visual Hierarchy ### Headline Patterns
1. Headline (largest, first seen)
2. Value prop/offer (clear benefit)
3. Form/CTA (obvious action)
4. Close option (easy to find)
### Sizing * Benefit: “Get [result] in [timeframe]”
- Desktop: 400-600px wide typical * Question: “Want [outcome]?”
- Don't cover entire screen * Social proof: “Join 12,000+ teams who…”
- Mobile: Full-width bottom or center, not full-screen * Curiosity: “Most people get this wrong…”
- 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 ### Subheadlines
- Expand on the promise
- Address objection ("No spam, ever") * Clarify value
- Set expectations ("Weekly tips in 5 min") * Reduce fear (“No spam”)
* Set expectations
### CTA Buttons ### 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 * Prefer first person: “Get My Guide”
- Polite, not guilt-trippy * Be specific: “Send Me the Checklist”
- "No thanks" / "Maybe later" / "I'm not interested" * Avoid generic: “Submit”, “Learn More”
- Avoid manipulative: "No, I don't want to save money"
### Decline Copy
* Neutral and respectful
* ❌ No guilt or manipulation
* Examples: “No thanks”, “Maybe later”
--- ---
## Frequency and Rules ## 6. Design & UX Rules
### Visual Hierarchy
1. Headline
2. Value proposition
3. Action (form or CTA)
4. Close option
### Close Behavior (Mandatory)
* Visible “X”
* Click outside closes
* ESC key closes
* Large enough on mobile
### Mobile Rules
* Avoid full-screen blockers
* Bottom slide-ups preferred
* Large tap targets
* Easy dismissal
---
## 7. Frequency, Targeting & Rules
### Frequency Capping ### Frequency Capping
- Show maximum once per session
- Remember dismissals (cookie/localStorage)
- 7-30 days before showing again
- Respect user choice
### Audience Targeting * Max once per session
- New vs. returning visitors (different needs) * Respect dismissals
- By traffic source (match ad message) * 7–30 day cooldown typical
- By page type (context-relevant)
- Exclude converted users
- Exclude recently dismissed
### Page Rules ### Targeting
- Exclude checkout/conversion flows
- Consider blog vs. product pages * New vs returning visitors
- Match offer to page context * Traffic source alignment
* Page-type relevance
* Exclude converters
### Hard Exclusions
* Checkout
* Signup flows
* Critical conversion steps
--- ---
## Compliance and Accessibility ## 8. Compliance & SEO Safety
### GDPR/Privacy
- Clear consent language
- Link to privacy policy
- Don't pre-check opt-ins
- Honor unsubscribe/preferences
### Accessibility ### Accessibility
- Keyboard navigable (Tab, Enter, Esc)
- Focus trap while open
- Screen reader compatible
- Sufficient color contrast
- Don't rely on color alone
### Google Guidelines * Keyboard navigable
- Intrusive interstitials hurt SEO * Focus trapped while open
- Mobile especially sensitive * Screen-reader compatible
- Allow: Cookie notices, age verification, reasonable banners * Sufficient contrast
- Avoid: Full-screen before content on mobile
### Privacy
* Clear consent language
* Link to privacy policy
* No pre-checked opt-ins
### Google Interstitial Guidelines
* Avoid intrusive mobile interstitials
* Allowed: cookie notices, age gates, banners
* Risky: full-screen mobile popups before content
--- ---
## Measurement ## 9. Measurement & Benchmarks
### Key Metrics ### 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 * Impression rate
- Popup views * Conversion rate
- Form focus * Close rate
- Submission attempts * Time to close
- Successful submissions * Engagement before dismiss
- Close button clicks
- Outside clicks
- Escape key
### Benchmarks ### Benchmarks (Directional)
- Email popup: 2-5% conversion typical
- Exit intent: 3-10% conversion * Email popup: 2–5%
- Click-triggered: Higher (10%+, self-selected) * Exit intent: 3–10%
* Click-triggered: 10%+
--- ---
## Output Format ## 10. Output Format (Required)
### Popup Design ### Popup Recommendation
- **Type**: Email capture, lead magnet, etc.
- **Trigger**: When it appears
- **Targeting**: Who sees it
- **Frequency**: How often shown
- **Copy**: Headline, subhead, CTA, decline
- **Design notes**: Layout, imagery, mobile
### Multiple Popup Strategy * **Type**
If recommending multiple popups: * **Goal**
- Popup 1: [Purpose, trigger, audience] * **Trigger**
- Popup 2: [Purpose, trigger, audience] * **Targeting**
- Conflict rules: How they don't overlap * **Frequency**
* **Copy** (headline, subhead, CTA, decline)
* **Design notes**
* **Mobile behavior**
### Multiple Popup Strategy (If Applicable)
* Popup 1: Purpose, trigger, audience
* Popup 2: Purpose, trigger, audience
* Conflict and suppression rules
### Test Hypotheses ### Test Hypotheses
Ideas to A/B test with expected outcomes
* What to test
* Expected outcome
* Primary metric
--- ---
## Common Popup Strategies ## 11. Common Mistakes (Flag These)
### E-commerce * Showing popup too early
1. Entry/scroll: First-purchase discount * Generic “Subscribe” copy
2. Exit intent: Bigger discount or reminder * No clear value proposition
3. Cart abandonment: Complete your order * Hard-to-close popups
* Overlapping popups
### B2B SaaS * Ignoring mobile UX
1. Click-triggered: Demo request, lead magnets * Treating popups as page fixes
2. Scroll: Newsletter/blog subscription
3. Exit intent: Trial reminder or content offer
### Content/Media
1. Scroll-based: Newsletter after engagement
2. Page count: Subscribe after multiple visits
3. Exit intent: Don't miss future content
### Lead Generation
1. Time-delayed: General list building
2. Click-triggered: Specific lead magnets
3. Exit intent: Final capture attempt
--- ---
## Experiment Ideas ## 12. Questions to Ask
### Placement & Format Experiments 1. Primary goal of this popup?
2. Current performance data?
**Banner Variations** 3. Traffic sources?
- Top bar vs. banner below header 4. Incentive available?
- Sticky banner vs. static banner 5. Compliance requirements?
- Full-width vs. contained banner 6. Mobile vs desktop split?
- Banner with countdown timer vs. without
**Popup Formats**
- Center modal vs. slide-in from corner
- Full-screen overlay vs. smaller modal
- Bottom bar vs. corner popup
- Top announcements vs. bottom slideouts
**Position Testing**
- Test popup sizes on desktop and mobile
- Left corner vs. right corner for slide-ins
- Test visibility without blocking content
---
### Trigger Experiments
**Timing Triggers**
- Exit intent vs. 30-second delay vs. 50% scroll depth
- Test optimal time delay (10s vs. 30s vs. 60s)
- Test scroll depth percentage (25% vs. 50% vs. 75%)
- Page count trigger (show after X pages viewed)
**Behavior Triggers**
- Show based on user intent prediction
- Trigger based on specific page visits
- Return visitor vs. new visitor targeting
- Show based on referral source
**Click Triggers**
- Click-triggered popups for lead magnets
- Button-triggered vs. link-triggered modals
- Test in-content triggers vs. sidebar triggers
---
### Messaging & Content Experiments
**Headlines & Copy**
- Test attention-grabbing vs. informational headlines
- "Limited-time offer" vs. "New feature alert" messaging
- Urgency-focused copy vs. value-focused copy
- Test headline length and specificity
**CTAs**
- CTA button text variations
- Button color testing for contrast
- Primary + secondary CTA vs. single CTA
- Test decline text (friendly vs. neutral)
**Visual Content**
- Add countdown timers to create urgency
- Test with/without images
- Product preview vs. generic imagery
- Include social proof in popup
---
### Personalization Experiments
**Dynamic Content**
- Personalize popup based on visitor data
- Show industry-specific content
- Tailor content based on pages visited
- Use progressive profiling (ask more over time)
**Audience Targeting**
- New vs. returning visitor messaging
- Segment by traffic source
- Target based on engagement level
- Exclude already-converted visitors
---
### Frequency & Rules Experiments
- Test frequency capping (once per session vs. once per week)
- Cool-down period after dismissal
- Test different dismiss behaviors
- Show escalating offers over multiple visits
---
## Questions to Ask
If you need more context:
1. What's the primary goal for this popup?
2. What's your current popup performance (if any)?
3. What traffic sources are you optimizing for?
4. What incentive can you offer?
5. Are there compliance requirements (GDPR, etc.)?
6. Mobile vs. desktop traffic split?
--- ---
## Related Skills ## Related Skills
- **form-cro**: For optimizing the form inside the popup * **form-cro** – Optimize the form inside the popup
- **page-cro**: For the page context around popups * **page-cro** – Optimize the surrounding page
- **email-sequence**: For what happens after popup conversion * **email-sequence** – Post-conversion follow-up
- **ab-test-setup**: For testing popup variations * **ab-test-setup** – Test popup variants safely