Popup Examples That Work, and Why

Good popups share one thing: they appear when the visitor is ready for them, offer one specific thing, and close in one tap. The patterns below are generic — the shapes every site eventually uses — with the trigger that suits each, the copy that works, and the way each one usually fails.

Newsletter signup

• Trigger: scroll depth past roughly half the article, or a click on a "Subscribe" link.
• Copy pattern: what you send and how often — "One practical WordPress fix every Tuesday" — then a single email field and a button that repeats the promise.
• How it fails: "Join our newsletter" with no reason to, fired on arrival, shown again to people who already subscribed.

The broader plan behind it is in how to build an email list.

Discount offer

• Trigger: on a store, after a second product view or on exit from a product page.
• Copy pattern: the exact offer and its condition — "10% off your first order, applied at checkout" — with the code shown on screen, not only emailed.
• How it fails: shown on informational articles where nobody is shopping, or a code that does not apply at checkout because the coupon rules were never tested — see WooCommerce coupon not working.

Content upgrade

• Trigger: click — a button inside the article reading "Get the printable checklist".
• Copy pattern: the name of the specific resource and what it saves the reader. The popup just confirms what they clicked for.
• How it fails: the offer is generic, or the file's public URL is indexed so nobody needs to subscribe. Ideas and delivery are covered in lead magnet ideas.

Click-triggered popups usually convert best, because the visitor asked for the dialog.

Cart or shipping threshold

• Trigger: when cart value changes — after an item is added.
• Copy pattern: the remaining amount — "Add £12 more for free delivery" — with a link to relevant products.
• How it fails: the number disagrees with the actual shipping rules, so the visitor reaches checkout and still pays. Cached pages showing a stale cart value are the usual cause. Often a bar does this job better than a modal — see notification bars.

Announcement

• Trigger: first visit during the announcement period, once only.
• Copy pattern: one sentence of news and one link — a sale ending, a new feature, a policy change. If it shows a countdown timer, the deadline has to be real.
• How it fails: a modal for something a bar could say, or an announcement left running for months after it stopped being news.

Exit offer

• Trigger: cursor leaving towards the top of the window on desktop; a conservative substitute on mobile.
• Copy pattern: something to take away — the checklist version of the page, a digest — rather than a demand.
• How it fails: armed the moment the page loads, so the first mouse movement triggers it; on mobile, a timer masquerading as exit intent. The mechanics are in exit intent popups.

Cookie notice

• Trigger: first visit, before any non-essential script runs.
• Copy pattern: what is used and why, with Accept and Reject given equal weight, and a link to settings.
• How it fails: built with a general popup tool. It looks right, but analytics and ad scripts load anyway, because the popup only displays a message — it does not block anything. Consent needs a dedicated tool; see cookie consent plugins. Like other legally required dialogs such as age gates, it is exempt from the mobile interstitial concern.

Video lightbox

• Trigger: click on a thumbnail or play button.
• Copy pattern: none needed; a title for screen readers and a visible close control.
• How it fails: the full video player loads on page load instead of on click, costing every visitor the script weight; or autoplay with sound when the dialog opens.

Comparing the patterns

A minimal accessible modal

Whatever tool builds it, the markup underneath should behave like this. The native <dialog> element, opened with showModal(), provides the modal behaviour, Esc to close and focus handling in current browsers:

<button type="button" id="open-offer">Get the printable checklist</button>

<dialog id="offer" aria-labelledby="offer-title" aria-describedby="offer-desc">
  <h2 id="offer-title">The launch checklist</h2>
  <p id="offer-desc">One page, 20 checks. We will email it to you now.</p>

  <form method="post" action="/subscribe">
    <label for="offer-email">Email address</label>
    <input id="offer-email" name="email" type="email" autocomplete="email" required>
    <button type="submit">Send me the checklist</button>
  </form>

  <button type="button" class="close" aria-label="Close dialog">Close</button>
</dialog>

<script>
  const dialog = document.getElementById('offer');
  document.getElementById('open-offer').addEventListener('click', () => dialog.showModal());
  dialog.querySelector('.close').addEventListener('click', () => dialog.close());
</script>

The essentials: the dialog is labelled by its heading, the close control is a real <button> with a name and a decent tap target, the field has a visible label, and the dialog opens because the visitor clicked. If you build with <div> instead, you need role="dialog", aria-modal="true", a focus trap and your own Esc handler — the accessibility checklist covers the rest.

Choosing a tool for these patterns

A single newsletter box needs nothing more than a forms plugin or a lightweight popup plugin. Running several of these patterns at once — a content upgrade per category, a cart-aware offer, an exit prompt, with frequency caps across all of them — is where a hosted lead-capture service such as OptinMonster makes sense, accepting a subscription and a third-party script. The selection criteria are in choosing a popup plugin.

Common mistakes

• More than one overlay per page view — the welcome popup on top of the cookie notice.
• No suppression after conversion or dismissal.
• A close button styled as a faint × in a corner.
• Popups on checkout and account pages.
• Top banners inserted into the page flow, pushing content down after load.

Verify

Check each popup on a phone and with the keyboard alone: it appears only on its trigger, Esc and the close button both dismiss it, focus returns where it was, and it does not return after you subscribe.