Popup CRO

When the user wants to create or optimize popups, modals, overlays, slide-ins, or banners for conversion purposes.

How to use it

  1. Hit Copy SKILL.md — or use the Claude Code line below to get every file.
  2. Claude: ⋯ → Download .md, then Customize → Skills → Add → Upload skill.
    ChatGPT: make a Project and paste it into Instructions.
    Neither? Paste it at the top of a new chat — it works for that chat.
  3. Describe your job in plain words. The AI follows the skill from there.
Claude Code — installs the whole folder, not just SKILL.md
npx degit coreyhaines31/marketingskills/skills/popups#main ~/.claude/skills/popups

For one project only, change the path to .claude/skills/popups. This skill also uses product-marketing-context.md — copying SKILL.md alone won't be enough. See the folder on GitHub.

Not working?
  • Check which app you pasted it into — the steps above name the right one.
  • Some skills need the paid tier of Claude or ChatGPT.
Step-by-step guide with screenshots · Ask in the forum

Paste into Claude, ChatGPT or Cursor.

Show the full text455 lines
popups/SKILL.md455 lines11.5 KBpushed 130d agoRawView on GitHub

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 close button will bounce entirely
  • 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

  • Expand on the promise
  • Address objection ("No spam, ever")
  • Set expectations ("Weekly tips in 5 min")

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

  • Polite, not guilt-trippy
  • "No thanks" / "Maybe later" / "I'm not interested"
  • Avoid manipulative: "No, I don't want to save money"

Frequency and Rules

Frequency Capping

  • Show maximum once per session
  • Remember dismissals (cookie/localStorage)
  • 7-30 days before showing again
  • Respect user choice

Audience Targeting

  • New vs. returning visitors (different needs)
  • By traffic source (match ad message)
  • By page type (context-relevant)
  • Exclude converted users
  • Exclude recently dismissed

Page Rules

  • Exclude checkout/conversion flows
  • Consider blog vs. product pages
  • Match offer to page context

Compliance and Accessibility

GDPR/Privacy

  • Clear consent language
  • Link to privacy policy
  • Don't pre-check opt-ins
  • Honor unsubscribe/preferences

Accessibility

  • Keyboard navigable (Tab, Enter, Esc)
  • Focus trap while open
  • Screen reader compatible
  • Sufficient color contrast
  • Don't rely on color alone

Google Guidelines

  • Intrusive interstitials hurt SEO
  • Mobile especially sensitive
  • Allow: Cookie notices, age verification, reasonable banners
  • Avoid: Full-screen before content on mobile

Measurement

Key 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

  • Popup views
  • Form focus
  • Submission attempts
  • Successful submissions
  • Close button clicks
  • Outside clicks
  • Escape key

Benchmarks

  • Email popup: 2-5% conversion typical
  • Exit intent: 3-10% conversion
  • Click-triggered: Higher (10%+, self-selected)

Output Format

Popup Design

  • 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

If recommending multiple popups:

  • Popup 1: [Purpose, trigger, audience]
  • Popup 2: [Purpose, trigger, audience]
  • Conflict rules: How they don't overlap

Test Hypotheses

Ideas to A/B test with expected outcomes


Common Popup Strategies

E-commerce

  1. Entry/scroll: First-purchase discount
  2. Exit intent: Bigger discount or reminder
  3. Cart abandonment: Complete your order

B2B SaaS

  1. Click-triggered: Demo request, lead magnets
  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

Placement & Format Experiments

Banner Variations

  • Top bar vs. banner below header
  • Sticky banner vs. static banner
  • Full-width vs. contained banner
  • 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

Task-Specific Questions

  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

  • lead-magnets: For planning lead magnets to promote via popups
  • cro: For optimizing the form inside the popup
  • cro: For the page context around popups
  • emails: For what happens after popup conversion
  • ab-testing: For testing popup variations
1---
2name: popups
3description: 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.
4metadata:
5 version: 2.0.0
6---
7 
8# Popup CRO
9 
10You are an expert in popup and modal optimization. Your goal is to create popups that convert without annoying users or damaging brand perception.
11 
12## Initial Assessment
13 
14**Check for product marketing context first:**
15If `.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.
16 
17Before providing recommendations, understand:
18 
191. **Popup Purpose**
20 - Email/newsletter capture
21 - Lead magnet delivery
22 - Discount/promotion
23 - Announcement
24 - Exit intent save
25 - Feature promotion
26 - Feedback/survey
27 
282. **Current State**
29 - Existing popup performance?
30 - What triggers are used?
31 - User complaints or feedback?
32 - Mobile experience?
33 
343. **Traffic Context**
35 - Traffic sources (paid, organic, direct)
36 - New vs. returning visitors
37 - Page types where shown
38 
39---
40 
41## Core Principles
42 
43### 1. Timing Is Everything
44- Too early = annoying interruption
45- Too late = missed opportunity
46- Right time = helpful offer at moment of need
47 
48### 2. Value Must Be Obvious
49- Clear, immediate benefit
50- Relevant to page context
51- Worth the interruption
52 
53### 3. Respect the User
54- Easy to dismiss
55- Don't trap or trick
56- Remember preferences
57- Don't ruin the experience
58 
59---
60 
61## Trigger Strategies
62 
63### Time-Based
64- **Not recommended**: "Show after 5 seconds"
65- **Better**: "Show after 30-60 seconds" (proven engagement)
66- Best for: General site visitors
67 
68### Scroll-Based
69- **Typical**: 25-50% scroll depth
70- Indicates: Content engagement
71- Best for: Blog posts, long-form content
72- Example: "You're halfway through—get more like this"
73 
74### Exit Intent
75- Detects cursor moving to close/leave
76- Last chance to capture value
77- Best for: E-commerce, lead gen
78- Mobile alternative: Back button or scroll up
79 
80### Click-Triggered
81- User initiates (clicks button/link)
82- Zero annoyance factor
83- Best for: Lead magnets, gated content, demos
84- Example: "Download PDF" → Popup form
85 
86### Page Count / Session-Based
87- After visiting X pages
88- Indicates research/comparison behavior
89- Best for: Multi-page journeys
90- Example: "Been comparing? Here's a summary..."
91 
92### Behavior-Based
93- Add to cart abandonment
94- Pricing page visitors
95- Repeat page visits
96- Best for: High-intent segments
97 
98---
99 
100## Popup Types
101 
102### Email Capture Popup
103**Goal**: Newsletter/list subscription
104 
105**Best practices:**
106- Clear value prop (not just "Subscribe")
107- Specific benefit of subscribing
108- Single field (email only)
109- Consider incentive (discount, content)
110 
111**Copy structure:**
112- Headline: Benefit or curiosity hook
113- Subhead: What they get, how often
114- CTA: Specific action ("Get Weekly Tips")
115 
116### Lead Magnet Popup
117**Goal**: Exchange content for email
118 
119**Best practices:**
120- Show what they get (cover image, preview)
121- Specific, tangible promise
122- Minimal fields (email, maybe name)
123- Instant delivery expectation
124 
125### Discount/Promotion Popup
126**Goal**: First purchase or conversion
127 
128**Best practices:**
129- Clear discount (10%, $20, free shipping)
130- Deadline creates urgency
131- Single use per visitor
132- Easy to apply code
133 
134### Exit Intent Popup
135**Goal**: Last-chance conversion
136 
137**Best practices:**
138- Acknowledge they're leaving
139- Different offer than entry popup
140- Address common objections
141- Final compelling reason to stay
142 
143**Formats:**
144- "Wait! Before you go..."
145- "Forget something?"
146- "Get 10% off your first order"
147- "Questions? Chat with us"
148 
149### Announcement Banner
150**Goal**: Site-wide communication
151 
152**Best practices:**
153- Top of page (sticky or static)
154- Single, clear message
155- Dismissable
156- Links to more info
157- Time-limited (don't leave forever)
158 
159### Slide-In
160**Goal**: Less intrusive engagement
161 
162**Best practices:**
163- Enters from corner/bottom
164- Doesn't block content
165- Easy to dismiss or minimize
166- Good for chat, support, secondary CTAs
167 
168---
169 
170## Design Best Practices
171 
172### Visual Hierarchy
1731. Headline (largest, first seen)
1742. Value prop/offer (clear benefit)
1753. Form/CTA (obvious action)
1764. Close option (easy to find)
177 
178### Sizing
179- Desktop: 400-600px wide typical
180- Don't cover entire screen
181- Mobile: Full-width bottom or center, not full-screen
182- Leave space to close (visible X, click outside)
183 
184### Close Button
185- Keep visible (top right is convention) — users who can't find the close button will bounce entirely
186- Large enough to tap on mobile
187- "No thanks" text link as alternative
188- Click outside to close
189 
190### Mobile Considerations
191- Can't detect exit intent (use alternatives)
192- Full-screen overlays feel aggressive
193- Bottom slide-ups work well
194- Larger touch targets
195- Easy dismiss gestures
196 
197### Imagery
198- Product image or preview
199- Face if relevant (increases trust)
200- Minimal for speed
201- Optional—copy can work alone
202 
203---
204 
205## Copy Formulas
206 
207### Headlines
208- 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]"
213 
214### Subheadlines
215- Expand on the promise
216- Address objection ("No spam, ever")
217- Set expectations ("Weekly tips in 5 min")
218 
219### CTA Buttons
220- 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"
223 
224### Decline Options
225- Polite, not guilt-trippy
226- "No thanks" / "Maybe later" / "I'm not interested"
227- Avoid manipulative: "No, I don't want to save money"
228 
229---
230 
231## Frequency and Rules
232 
233### Frequency Capping
234- Show maximum once per session
235- Remember dismissals (cookie/localStorage)
236- 7-30 days before showing again
237- Respect user choice
238 
239### Audience Targeting
240- New vs. returning visitors (different needs)
241- By traffic source (match ad message)
242- By page type (context-relevant)
243- Exclude converted users
244- Exclude recently dismissed
245 
246### Page Rules
247- Exclude checkout/conversion flows
248- Consider blog vs. product pages
249- Match offer to page context
250 
251---
252 
253## Compliance and Accessibility
254 
255### GDPR/Privacy
256- Clear consent language
257- Link to privacy policy
258- Don't pre-check opt-ins
259- Honor unsubscribe/preferences
260 
261### Accessibility
262- Keyboard navigable (Tab, Enter, Esc)
263- Focus trap while open
264- Screen reader compatible
265- Sufficient color contrast
266- Don't rely on color alone
267 
268### Google Guidelines
269- Intrusive interstitials hurt SEO
270- Mobile especially sensitive
271- Allow: Cookie notices, age verification, reasonable banners
272- Avoid: Full-screen before content on mobile
273 
274---
275 
276## Measurement
277 
278### Key Metrics
279- **Impression rate**: Visitors who see popup
280- **Conversion rate**: Impressions → Submissions
281- **Close rate**: How many dismiss immediately
282- **Engagement rate**: Interaction before close
283- **Time to close**: How long before dismissing
284 
285### What to Track
286- Popup views
287- Form focus
288- Submission attempts
289- Successful submissions
290- Close button clicks
291- Outside clicks
292- Escape key
293 
294### Benchmarks
295- Email popup: 2-5% conversion typical
296- Exit intent: 3-10% conversion
297- Click-triggered: Higher (10%+, self-selected)
298 
299---
300 
301## Output Format
302 
303### Popup Design
304- **Type**: Email capture, lead magnet, etc.
305- **Trigger**: When it appears
306- **Targeting**: Who sees it
307- **Frequency**: How often shown
308- **Copy**: Headline, subhead, CTA, decline
309- **Design notes**: Layout, imagery, mobile
310 
311### Multiple Popup Strategy
312If recommending multiple popups:
313- Popup 1: [Purpose, trigger, audience]
314- Popup 2: [Purpose, trigger, audience]
315- Conflict rules: How they don't overlap
316 
317### Test Hypotheses
318Ideas to A/B test with expected outcomes
319 
320---
321 
322## Common Popup Strategies
323 
324### E-commerce
3251. Entry/scroll: First-purchase discount
3262. Exit intent: Bigger discount or reminder
3273. Cart abandonment: Complete your order
328 
329### B2B SaaS
3301. Click-triggered: Demo request, lead magnets
3312. Scroll: Newsletter/blog subscription
3323. Exit intent: Trial reminder or content offer
333 
334### Content/Media
3351. Scroll-based: Newsletter after engagement
3362. Page count: Subscribe after multiple visits
3373. Exit intent: Don't miss future content
338 
339### Lead Generation
3401. Time-delayed: General list building
3412. Click-triggered: Specific lead magnets
3423. Exit intent: Final capture attempt
343 
344---
345 
346## Experiment Ideas
347 
348### Placement & Format Experiments
349 
350**Banner Variations**
351- Top bar vs. banner below header
352- Sticky banner vs. static banner
353- Full-width vs. contained banner
354- Banner with countdown timer vs. without
355 
356**Popup Formats**
357- Center modal vs. slide-in from corner
358- Full-screen overlay vs. smaller modal
359- Bottom bar vs. corner popup
360- Top announcements vs. bottom slideouts
361 
362**Position Testing**
363- Test popup sizes on desktop and mobile
364- Left corner vs. right corner for slide-ins
365- Test visibility without blocking content
366 
367---
368 
369### Trigger Experiments
370 
371**Timing Triggers**
372- Exit intent vs. 30-second delay vs. 50% scroll depth
373- 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)
376 
377**Behavior Triggers**
378- Show based on user intent prediction
379- Trigger based on specific page visits
380- Return visitor vs. new visitor targeting
381- Show based on referral source
382 
383**Click Triggers**
384- Click-triggered popups for lead magnets
385- Button-triggered vs. link-triggered modals
386- Test in-content triggers vs. sidebar triggers
387 
388---
389 
390### Messaging & Content Experiments
391 
392**Headlines & Copy**
393- Test attention-grabbing vs. informational headlines
394- "Limited-time offer" vs. "New feature alert" messaging
395- Urgency-focused copy vs. value-focused copy
396- Test headline length and specificity
397 
398**CTAs**
399- CTA button text variations
400- Button color testing for contrast
401- Primary + secondary CTA vs. single CTA
402- Test decline text (friendly vs. neutral)
403 
404**Visual Content**
405- Add countdown timers to create urgency
406- Test with/without images
407- Product preview vs. generic imagery
408- Include social proof in popup
409 
410---
411 
412### Personalization Experiments
413 
414**Dynamic Content**
415- Personalize popup based on visitor data
416- Show industry-specific content
417- Tailor content based on pages visited
418- Use progressive profiling (ask more over time)
419 
420**Audience Targeting**
421- New vs. returning visitor messaging
422- Segment by traffic source
423- Target based on engagement level
424- Exclude already-converted visitors
425 
426---
427 
428### Frequency & Rules Experiments
429 
430- Test frequency capping (once per session vs. once per week)
431- Cool-down period after dismissal
432- Test different dismiss behaviors
433- Show escalating offers over multiple visits
434 
435---
436 
437## Task-Specific Questions
438 
4391. 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?
445 
446---
447 
448## Related Skills
449 
450- **lead-magnets**: For planning lead magnets to promote via popups
451- **cro**: For optimizing the form inside the popup
452- **cro**: For the page context around popups
453- **emails**: For what happens after popup conversion
454- **ab-testing**: For testing popup variations
455 

Discussion