Popups

---
name: popups
description: >
  Create and optimize popups, modals, overlays, slide-ins, announcement banners, and exit-intent captures. Trigger phrases: "create a popup," "exit intent popup," "email capture popup," "lead capture modal," "scroll popup," "timed popup," "announcement banner," "sticky bar," "popup copy," "popup A/B test," "popup conversion rate," "should I use a popup," "popup alternatives," "slide-in," "website overlay."
---

# Popups

## Mandatory Content Standards

Every output from this skill follows these standards without exception.

- Match the output length to the task. For full audits, strategies, plans, or multi-part deliverables, write 1,500 to 10,000 words. For quick tasks, single assets, snippets, or narrow revisions, keep the output concise and provide only the useful variations, rationale, and next steps.
- Write in a way that sounds like a knowledgeable human wrote it. No robotic or templated phrasing.
- Use short sentences. One idea per sentence. One focus per paragraph.
- Use active voice. Never passive constructions.
- Address the reader directly using "you" and "your."
- Use bullet points only when they genuinely improve readability.
- Replace all em dashes with commas, parentheses, semicolons, or a new sentence. No hidden Unicode characters.
- End every sentence with a period.
- No hashtags, emojis, or asterisks.
- No introductory or closing filler phrases such as "in conclusion," "in summary," or "in a world where."
- No warnings, notes, or disclaimers. Stick to requested output.
- No AI cliches: no "game-changer," "unlock," "leverage," "dive into," "delve," "cutting-edge," "transformative," "revolutionize."
- No excessive adjectives or adverbs. Let specifics do the work.
- No broad generalizations. Every claim tied to specific context.
- Use specific examples, data, and scenarios.
- Pose at least one thought-provoking question per skill.
- Mobile-friendly: short paragraphs, clear headers, scannable.
- Practical and actionable. Every section connects to a next step.

---

## What This Skill Does

This skill helps you create, configure, and improve popups, modals, overlays, slide-ins, and announcement banners. It covers copy, targeting, timing, design principles, A/B testing, and the cases where a popup is not the right tool.

Popups are the most contested element in conversion optimization. When they work, they capture leads and drive conversions that would otherwise not happen. When they fail, they annoy visitors and increase bounce rates. The difference is almost always targeting and timing, not the popup format itself.

The question worth asking before you build any popup: what would this visitor have done on this page if the popup did not exist? If the answer is "left without converting," the popup has something to work with. If the answer is "read this page carefully and then converted," the popup is getting in the way.

---

## How to Use This Skill

Bring your popup task with this context:

- What page or pages will this popup appear on?
- What action do you want the visitor to take? (Subscribe, download, start a trial, see an announcement.)
- What is the offer or incentive, if any?
- What is the traffic volume on this page?
- What type of popup do you want? (Exit intent, scroll-triggered, timed, always-on, click-triggered.)
- What is your current email capture or conversion rate for the page, if known?

---

## Popup Types and When to Use Each

### Exit Intent Popups

Exit intent popups appear when the visitor's cursor moves toward the browser's close button or address bar. They trigger at the moment the visitor is about to leave.

Exit intent popups are the least intrusive popup format because they appear only when the visitor was already planning to leave. You are not interrupting them. You are catching them on the way out.

Best uses for exit intent popups:
- Email capture with a relevant lead magnet.
- A last-chance offer or discount for ecommerce.
- A "before you go" question that reveals why visitors are leaving.

Exit intent does not work on mobile because mobile devices do not have a mouse cursor. On mobile, use a scroll-triggered popup instead, set to fire when the user scrolls back toward the top of the page (which correlates with intent to leave).

Exit intent popup copy should be direct. The visitor is leaving. You have one sentence to make them stop. Do not open with a question like "Wait, are you sure?" That phrasing reads as desperate. Instead, make the offer clear immediately.

"Get the full campaign guide before you go. 12 pages, free, delivered to your inbox in 60 seconds."

That is a complete exit intent popup. One sentence about what they get. One sentence about how fast they get it. No wasted words.

### Scroll-Triggered Popups

Scroll-triggered popups appear after a visitor scrolls a defined percentage of the page. Common trigger points are 25%, 50%, and 75% scroll depth.

The logic: a visitor who scrolls 50% of the page is more engaged than a visitor who just landed. They have read at least some of the content. They have some degree of interest. This is a better moment to make an offer than the moment they arrive.

Set your scroll trigger based on where your most important content appears. If your lead magnet pitch is at 40% scroll depth, trigger the popup at 50% to catch users who just saw the pitch and might be interested.

Scroll-triggered popups on mobile need special consideration. Mobile scroll is faster and more habitual. A popup that triggers at 50% scroll depth on mobile will appear within seconds of the visitor arriving because mobile scrolling is significantly faster. Adjust trigger depth or timing accordingly.

### Timed Popups

Timed popups appear after a visitor has been on the page for a defined number of seconds. They are the simplest to set up and the most commonly misused.

The problem with timed popups: time on page does not reliably indicate engagement. A visitor who opened your page in a background tab and forgot about it will trigger a 30-second popup. A visitor who landed on your page, immediately saw what they needed, and converted in 15 seconds will see a popup right after converting.

Timed popups work best when combined with scroll depth. "Show after 30 seconds AND after 25% scroll" targets genuinely engaged visitors rather than anyone who happened to have the tab open.

The minimum time delay for timed popups: 15 to 20 seconds on most pages. Showing a popup to someone who arrived 5 seconds ago is universally annoying and does not convert.

### Lead Capture Popup Copy

Lead capture is the most common popup goal: collect an email address in exchange for something.

The "something" matters enormously. "Subscribe to our newsletter" is not an offer. Nobody wakes up wanting more email. The offer needs to be a specific, valuable thing.

Strong lead magnet offers for B2B:
- A template the visitor can use immediately. "The exact agency pitch deck we used to close $2M in contracts. Yours, free."
- A tool or calculator. "Our SaaS pricing calculator. Enter your metrics, get the pricing model."
- A condensed guide. "47 ad copywriting formulas. PDF, free."

Strong lead magnet offers for B2C:
- A discount on the first order.
- A free item with purchase.
- Early access or pre-sale pricing.

The copy structure for a lead capture popup:

Headline: name the specific thing they get.
"Get the content calendar template 4,200 marketers use."

Subheadline (optional): add one line of social proof or specificity.
"Includes 90 days of pre-planned content ideas for B2B SaaS teams."

Form: one field. Email address only. Every additional field reduces conversion rate. You can ask for more information later.

CTA button: describe the action in terms of what they get, not what they do. "Send me the template" outperforms "Submit" and "Subscribe" in virtually every test.

Dismiss copy: the small text or button that closes the popup. Do not write shame language like "No thanks, I prefer bad marketing" or "No, I don't want to improve." This is manipulative, reads as desperate, and creates a negative brand impression. Write plain dismiss copy: "No thanks" or simply an X.

### Announcement Banners and Sticky Bars

Announcement banners (also called sticky bars or notification bars) sit at the top or bottom of the screen and persist as the visitor scrolls. They are not modals. They do not interrupt reading. They are visible without being intrusive.

Best uses for announcement banners:
- Time-sensitive offers or promotions. "Save 20% through Friday. Use code MAY20."
- New feature announcements. "Custom reporting is now live. See how it works."
- Event or webinar promotion. "Join us Thursday at 1pm ET. 400 already registered."
- Sitewide alerts. "Processing times are currently 2-3 days longer than usual."

Announcement banners work because they have low friction. The visitor can read or ignore them without their experience being interrupted. This makes them suitable for situations where you want visibility but not engagement pressure.

Copy for announcement banners should be one sentence. No more. Visitors read banners in a glance. If your message requires two sentences, it needs to be a different format.

---

## Email Capture Optimization

Email capture is the most common goal for popups. If you are optimizing email capture, these are the variables that move conversion rate most significantly.

The offer: changing from "subscribe to our newsletter" to a specific lead magnet is typically the single biggest lever. In most tests, a specific lead magnet offer (a template, a guide, a tool) outperforms a generic subscription offer by 3-5x.

The trigger timing: as discussed above, scroll-triggered combined with time-on-page outperforms time-only triggers. Exit intent outperforms on-arrival for most audiences.

The form length: every field you add reduces conversion. Start with email only. If you need first name for personalization, add it. If you need company name, ask in the next step (after they submit the email), not before.

The CTA copy: "Get the template" consistently outperforms "Subscribe" and "Sign up." First-person copy ("Get my template") outperforms second-person ("Get your template") in many tests, but this varies. Always test it.

Targeting: showing a lead magnet popup only on relevant pages significantly improves conversion. A popup promoting a content calendar template should appear on blog posts about content strategy, not on your pricing page.

Social proof near the form: "Join 12,000 marketers" or a specific testimonial near the CTA can increase conversion, especially on lower-trust pages.

---

## Popup A/B Testing

A/B testing popups is straightforward but requires enough traffic to reach significance.

Most popup tools (Klaviyo, Mailchimp, Privy, OptinMonster, ConvertBox) have built-in A/B testing. Set up a test by defining the variant, splitting traffic 50/50, and running the test long enough to reach significance.

What to test first:

The offer or headline: this is the highest-impact variable. Two completely different offers or headlines will tell you more than minor copy tweaks.

The trigger timing: test exit intent versus scroll-triggered. The winner depends heavily on your audience and page type.

The CTA button copy: this is quick to test and often produces meaningful results.

The visual design: a text-heavy popup versus an image-heavy popup. A full-screen overlay versus a small slide-in.

Statistical significance for popup tests: you need at least 200-500 popup views per variant before the results are meaningful. If your traffic is low, focus on the highest-impact changes first (the offer, not the button color) and run tests for a longer window.

Interpreting results: popup conversion rate is your primary metric, but also measure what happens downstream. Does the email list built from popup leads convert to paying customers? A popup that captures 500 emails from unqualified visitors is worse than one that captures 200 emails from your actual target customer.

---

## Targeting Rules

Targeting determines which visitors see which popup. Most teams use the same popup for every visitor on every page, which is a missed opportunity.

Targeting dimensions to configure:

Page targeting: show the popup only on pages where the offer is relevant. A popup promoting a guide on Instagram ads should appear on Instagram-related blog posts, not on your home page.

Visitor type: first-time visitors versus returning visitors need different offers. A first-time visitor does not know your brand well enough to respond to "Save 20% on your first order" the same way a returning visitor does.

Traffic source: a visitor from a paid ad campaign may have already seen your offer. Show them something different on-site. A visitor from organic search is cold. Match your popup to their entry context.

Device type: design separate popups for mobile and desktop. Full-screen overlays on mobile are more disruptive than on desktop and often underperform compared to bottom slide-ins on mobile.

Behavior on page: if someone has already clicked your primary CTA, do not show them an email capture popup. Exclude converters.

Time since last shown: suppress the popup for visitors who have already seen it. Showing the same popup on every visit creates a negative experience and destroys any goodwill your content built.

---

## When Not to Use a Popup

There are situations where a popup will hurt more than it helps. These are not theoretical. These are patterns that show up consistently in analytics.

High-intent pages: your pricing page and checkout page are not places for popups. A visitor on your pricing page is already evaluating whether to buy. Interrupting them with an email capture popup distracts from the conversion you actually want.

Pages with already high conversion rates: if a page is already converting at 8% and your goal is sales, do not add a popup that might distract 2% of visitors. Protect what is working.

Post-conversion pages: if someone just submitted your signup form, do not immediately show them another popup. They just committed. Reward the commitment by showing them a clear next step, not a new ask.

Pages where the content is the product: if your blog is a major SEO and content asset, a disruptive popup on every post will increase bounce rate and reduce the perceived quality of the content. Consider less intrusive options: inline CTAs within the content, a sidebar subscription form, or an exit-intent popup that appears only on the way out.

---

## What to Do Instead of a Popup

When a popup is not the right tool, these alternatives often produce better results with less disruption.

Inline CTAs: a CTA embedded within the content itself, at the natural pause point after a key idea. "Want the full template? It's free here." This converts readers who are genuinely engaged with the content, not just visitors who happened to scroll far enough.

Content upgrades: a downloadable version or expansion of the specific content the visitor is reading. A blog post about email subject lines could offer a downloadable swipe file of 100 subject line examples. The relevance is perfect because it matches exactly what the visitor just read.

Sidebar forms: a persistent subscription form in the sidebar. Lower conversion rate than a popup, but zero disruption and appropriate for content-first audiences.

Footer CTAs: a CTA at the bottom of the page, shown only to visitors who scrolled all the way through. This is the highest-engagement segment. A conversion rate of 1-2% from footer CTAs represents visitors who read everything you wrote.

Sticky in-article offers: a small bar that appears fixed to the bottom of the screen while the visitor reads, but does not cover the content. Less disruptive than a full modal, still visible throughout the reading experience.

The right format depends on your audience and goals. A high-traffic content site with a brand-conscious audience often converts better with inline CTAs than with popups. An ecommerce site with a clear discount offer often converts better with a popup.

---

## Mobile Popup Considerations

Mobile visitors need different popup experiences than desktop visitors. A full-screen modal on a 375px wide phone screen is different from the same modal on a 1440px wide monitor.

Mobile popup design principles:

Keep copy shorter. Mobile readers scan faster and scroll faster. Fewer words, more impact.

Make the dismiss button large and easy to tap. On mobile, a small X in the corner frustrates users. The standard is a clearly visible, easy-to-tap close option.

Use a bottom slide-in for mobile instead of a centered modal. A bottom slide-in feels less disruptive and matches familiar mobile UI patterns (bottom sheets, app modals).

Test load time. On mobile, over cellular, a popup that requires a large image to load will delay or appear broken. Keep mobile popups lightweight.

Form inputs on mobile: one field, autofocused. When the keyboard opens on a mobile device, it shifts the entire viewport. A form with multiple fields creates a disorienting experience.

---

## Quick Reference: Popup Copy Templates

Exit intent, lead magnet offer:
"[Name of specific thing] before you go. [One line of specificity about what makes it valuable]. Free."
Form: email field.
CTA: "Send it to me."

Timed, B2B lead capture:
"[X] [type of professional] use this [template/guide/tool]. Get yours."
Subheadline: "[Specific outcome or use case]."
CTA: "Get the free [thing]."

Announcement banner, promotional:
"[Specific offer, no adjectives]. [Specific expiration or condition]. [Link: See details]."

Trial offer popup (for SaaS):
"Try [Product] free for 14 days. No credit card."
CTA: "Start free trial."

Discount popup, ecommerce:
"Your first order: [X]% off."
Subheadline: "Enter your email. Code arrives in 60 seconds."
CTA: "Get my discount."

---

## Common Mistakes

Showing the popup immediately on page load: visitors who see a popup before they have read a single word of your content have zero context for the offer. Immediate popups universally produce lower quality leads and higher bounce rates than delayed popups.

Using shame-based dismiss copy: "No thanks, I hate saving money" is manipulative and reflects poorly on your brand. Use plain, respectful dismiss copy.

Not excluding converters: if someone already subscribed, already bought, or already completed your primary CTA, exclude them from seeing the popup. Showing a lead capture popup to an existing subscriber signals that your systems do not communicate.

Same popup for every page: your homepage visitor is different from your blog visitor, who is different from your pricing page visitor. Generic popups miss all of this context.

Not testing: most teams set up a popup, look at the conversion rate, and never change it. The first version is rarely the best version. Build a testing habit from the start.

Ignoring the downstream quality of captures: a popup that drives your conversion rate from 1% to 3% looks like a win. But if those extra leads never become customers, the win is hollow. Track your popup leads through to revenue.