Skip to content
Development
Skill

/popup-cro

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."

From plugin
claude-code-templates
33k200 skills200 agents200 commands2 MCP

Claude Code

$ npx -y skills add davila7/claude-code-templates --skill popup-cro --agent claude-code

SKILL.md

popup-cro.SKILL.md
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.

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

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

  • 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

  • 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 dismis
Read more
@davila7
Ships withclaude-code-templates

Open-source registry and CLI for Claude Code components: agents, commands, skills, hooks, MCPs, settings and mods

33k200 skills200 agents2 MCP
Get the whole plugin

Stars on GitHub

Momentum

stars in total
33.4k
Star history of davila7/claude-code-templates on GitHub, a chart by star-history.com

Other skills on claude-code-templates.

planning

planning

Create and manage persistent markdown planning files for structured task execution. Use when the user asks to "create a plan",…

More skills from other plugins.

brainstorming
Auto-invoked

brainstorming

You MUST use this before any creative work - creating features, building components, adding functionality, modifying behavior, or…

@obra@obraInstall Skill
ask-matt

ask-matt

Ask which skill or flow fits your situation. A router over the skills in this repo.

skills12d309k
@mattpocock@mattpocockInstall Skill
accessibility
Auto-invoked

accessibility

Design, implement, and audit accessible UI to WCAG 2.2 Level AA across Web, iOS, and Android — semantic ARIA roles and labels,…

ecc2w293k
@affaan-m@affaan-mInstall Skill
compiler-commit

compiler-commit

Use when you want to verify compiler changes and commit with the correct convention. Runs tests, lint, and format, then commits…

react3d252k
@facebook@facebookInstall Skill

Questions about popup-cro.

Which coding agents can use popup-cro?
popup-cro installs in Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode and Windsurf with the skills CLI, using each agent's flag shown on this page. Flowy's auto-invocation, which fires a skill when your prompt matches, runs in Claude Code only.