본문으로 건너뛰기
cccskills
무료GitHub에 공개

popup-cro

Plan and improve popups and banners for email signups, purchases, and announcements. The skill helps define display timing, audiences, copy, and frequency, with mobile design guidance and comparison tests to evaluate changes.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

원문원문 설명 보기

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.

설치 방법 보기

이럴 때 유용합니다

  • Improve newsletter signup popups
  • Plan offers for visitors about to leave
  • Review popup timing and frequency on mobile
  • Compare banner copy and placement through A/B tests

포함된 파일(1)

  • SKILL.md11.0 KB

SKILL.md(원문)

설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.

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

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

  • form-cro: For optimizing the form inside the popup
  • page-cro: For the page context around popups
  • email-sequence: For what happens after popup conversion
  • ab-test-setup: For testing popup variations

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

댓글

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. URL은 2개까지입니다.

0 / 1,000자

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

같은 저장소의 스킬

Create interactive 3D scenes for websites, including product views and scroll-driven animations. Covers choosing Three.js, React Three Fiber, or Spline, preparing lightweight models, showing loading progress, and adapting experiences for mobile devices.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Building an interactive 3D product configurator
  • Adding 3D scenes to a portfolio
  • Animating models and cameras as visitors scroll
davila7/claude-code-templates3.3만2026년 10월 18일 업데이트

Plan A/B tests that compare page or product changes, with clear hypotheses, sample sizes, success metrics, and traffic allocation. Get a structured test plan and guidance for interpreting results and deciding what to try next.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Comparing signup button copy
  • Planning a pricing page experiment
  • Estimating sample size and test duration
davila7/claude-code-templates3.3만2026년 10월 18일 업데이트

Prepare an academic CV for faculty, postdoctoral, or research applications. Organize publications, grants, teaching, and research experience, with section order and formatting adapted to the role and academic field.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Preparing a CV for faculty applications
  • Updating a CV for postdoctoral applications
  • Organizing publications and research funding
davila7/claude-code-templates3.3만2026년 10월 18일 업데이트

Audit and improve web accessibility using WCAG 2.1 guidelines. Covers image descriptions, color contrast, keyboard controls, forms, and screen reader support, with code examples and automated and manual checks to guide fixes.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Auditing accessibility before a website launch
  • Improving keyboard navigation
  • Fixing form labels and error announcements
davila7/claude-code-templates3.3만2026년 10월 18일 업데이트

Audit websites for accessibility barriers and improve image descriptions, color contrast, forms, keyboard navigation, and screen reader support. Provides code examples and automated and manual testing guidance for work toward WCAG 2.1 AA or AAA accessibility standards.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Auditing a website for accessibility issues
  • Fixing form labels and error announcements
  • Checking keyboard navigation and dialog focus
davila7/claude-code-templates3.3만2026년 10월 18일 업데이트

Design autonomous agents for Claude Code plugins, including when they should run, what tools they may use, and how they should respond. Provides configuration templates, prompt guidance, and validation steps for creating agent files.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Create a code review agent
  • Refine examples that trigger an agent
  • Limit the tools an agent can use
davila7/claude-code-templates3.3만2026년 10월 18일 업데이트

davila7의 스킬 모두 보기

이 스킬의 문제 신고