AGENT SKILL

popup-cro

Create and optimize popups, modals, overlays, slide-ins, and banners to increase conversions without harming user experience or brand trust.

适用职业设计师
使用场景视觉设计
License 许可
MIT
最近更新
2026-09-04
Stars
★ 0
Forks
0

01 前言 Front Matter

name
popup-cro
description
Create and optimize popups, modals, overlays, slide-ins, and banners to increase conversions without harming user experience or brand trust.

03 SKILL.md 正文

Popup CRO

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.

This skill focuses on strategy, copy, triggers, and rules. For optimizing the form inside the popup, see form-cro. For optimizing the page itself, see page-cro.


1. Initial Assessment (Required)

Before making recommendations, establish context:

1. Popup Purpose

What is the single job of this popup?

  • Email / newsletter capture
  • Lead magnet delivery
  • 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)

2. Core Principles (Non-Negotiable)

1. Timing > Design

A perfectly designed popup shown at the wrong moment will fail.

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

  • Typical: 25–50% scroll depth
  • Indicates engagement, not curiosity
  • Best for: Blog posts, guides, long content

Exit Intent

  • Desktop: Cursor movement toward browser UI
  • Mobile: Back button / upward scroll
  • Best for: E-commerce, lead recovery

Click-Triggered (Highest Intent)

  • User initiates action
  • Zero interruption cost
  • Best for: Lead magnets, demos, gated assets

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

4. Popup Types & Use Cases

Email Capture

Goal: Grow list

Requirements

  • Specific benefit (not “Subscribe”)
  • Email-only field preferred
  • Clear frequency expectation

Lead Magnet

Goal: Exchange value for contact info

Requirements

  • Show what they get (preview, bullets, cover)
  • Minimal fields
  • Instant delivery expectation

Discount / Promotion

Goal: Drive first conversion

Requirements

  • 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

Goal: Inform, not interrupt

Requirements

  • One message
  • Dismissable
  • Time-bound

Slide-In

Goal: Low-friction engagement

Requirements

  • Does not block content
  • Easy dismiss
  • Good for secondary CTAs

5. Copy Frameworks

Headline Patterns

  • Benefit: “Get [result] in [timeframe]”
  • Question: “Want [outcome]?”
  • Social proof: “Join 12,000+ teams who…”
  • Curiosity: “Most people get this wrong…”

Subheadlines

  • Clarify value
  • Reduce fear (“No spam”)
  • Set expectations

CTA Buttons

  • Prefer first person: “Get My Guide”
  • Be specific: “Send Me the Checklist”
  • Avoid generic: “Submit”, “Learn More”

Decline Copy

  • Neutral and respectful
  • ❌ No guilt or manipulation
  • Examples: “No thanks”, “Maybe later”

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

  • Max once per session
  • Respect dismissals
  • 7–30 day cooldown typical

Targeting

  • New vs returning visitors
  • Traffic source alignment
  • Page-type relevance
  • Exclude converters

Hard Exclusions

  • Checkout
  • Signup flows
  • Critical conversion steps

8. Compliance & SEO Safety

Accessibility

  • Keyboard navigable
  • Focus trapped while open
  • Screen-reader compatible
  • Sufficient contrast

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

9. Measurement & Benchmarks

Metrics

  • Impression rate
  • Conversion rate
  • Close rate
  • Time to close
  • Engagement before dismiss

Benchmarks (Directional)

  • Email popup: 2–5%
  • Exit intent: 3–10%
  • Click-triggered: 10%+

10. Output Format (Required)

Popup Recommendation

  • Type
  • Goal
  • Trigger
  • Targeting
  • 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

  • What to test
  • Expected outcome
  • Primary metric

11. Common Mistakes (Flag These)

  • Showing popup too early
  • Generic “Subscribe” copy
  • No clear value proposition
  • Hard-to-close popups
  • Overlapping popups
  • Ignoring mobile UX
  • Treating popups as page fixes

12. Questions to Ask

  1. Primary goal of this popup?
  2. Current performance data?
  3. Traffic sources?
  4. Incentive available?
  5. Compliance requirements?
  6. Mobile vs desktop split?

Related Skills

  • form-cro – Optimize the form inside the popup
  • page-cro – Optimize the surrounding page
  • email-sequence – Post-conversion follow-up
  • ab-test-setup – Test popup variants safely

04 同仓库更多 Skills

Aceryoung
Aceryoung/familyproject

zapier-make-patterns

No-code automation democratizes workflow building. Zapier and Make (formerly Integromat) let non-developers automate business processes without writing code. But no-code doesn't mean no-complexity - these platforms have their own patterns, pitfalls, and breaking points. This skill covers when to use which platform, how to build reliable automations, and when to graduate to code-based solutions. Key insight: Zapier optimizes for simplicity and integrations (7000+ apps), Make optimizes for power

Skill与智能体开发
★ 0
Aceryoung
Aceryoung/familyproject

Cross-Site Scripting and HTML Injection Testing

This skill should be used when the user asks to "test for XSS vulnerabilities", "perform cross-site scripting attacks", "identify HTML injection flaws", "exploit client-side injection vulnerabilities", "steal cookies via XSS", or "bypass content security policies". It provides comprehensive techniques for detecting, exploiting, and understanding XSS and HTML injection attack vectors in web applications.

测试与质量前端开发
★ 0
Aceryoung
Aceryoung/familyproject

writing-skills

Use when creating new skills, editing existing skills, or verifying skills work before deployment

内容创作者测试与质量写作与文案
★ 0
Aceryoung
Aceryoung/familyproject

writing-plans

Use when you have a spec or requirements for a multi-step task, before touching code

内容创作者写作与文案
★ 0
Aceryoung
Aceryoung/familyproject

workflow-automation

Workflow automation is the infrastructure that makes AI agents reliable. Without durable execution, a network hiccup during a 10-step payment flow means lost money and angry customers. With it, workflows resume exactly where they left off. This skill covers the platforms (n8n, Temporal, Inngest) and patterns (sequential, parallel, orchestrator-worker) that turn brittle scripts into production-grade automation. Key insight: The platforms make different tradeoffs. n8n optimizes for accessibility

Skill与智能体开发
★ 0
Aceryoung
Aceryoung/familyproject

WordPress Penetration Testing

This skill should be used when the user asks to "pentest WordPress sites", "scan WordPress for vulnerabilities", "enumerate WordPress users, themes, or plugins", "exploit WordPress vulnerabilities", or "use WPScan". It provides comprehensive WordPress security assessment methodologies.

测试与质量
★ 0