Website Overlays: When to Use Them and When Not To
- An overlay produces one of three outcomes: the visitor converts, closes it and keeps browsing, or leaves. The middle outcome is the one most reports ignore, and it turns a passive reader into an active one.
- Econsultancy's overlay case studies recorded a 40 percent lift in email opt-ins from one headline change on a Reebok overlay, and 8.8 percent more opt-ins from a thinner box. The container matters as much as the offer.
- Google's interstitial guidance asks sites not to obscure the whole page and to prefer banners that take a small fraction of the screen. Interstitials required by law, login dialogs for non-indexable content, and easily dismissible reasonable-size banners were exempted in the 2016 announcement.
- A compliant overlay takes focus on open, keeps Tab inside, closes on Escape, and returns focus to its trigger. Trapping the keyboard fails WCAG 2.1.2 at Level A; a sticky bar that fully hides a focused element fails WCAG 2.2 criterion 2.4.11 at Level AA.
- Segmentation beats frequency. Limiting an overlay to new visitors, or to people who have scrolled, removes most of the annoyance without removing the conversions.
The website overlay, love it or hate it, is a valuable marketing tool when it is used appropriately. There is a lot of hate for overlays from consumers and marketers alike, and most of it is earned: marketers misuse the technology and ruin the user experience for everyone else.
Optimization is not about tweaking a landing page. It is about optimizing your site's value to the customer. So if you add a disruptive tool like an overlay, ask yourself one question first: how does this add value to the customer? If you do not have a good answer, your overlay is an annoyance.
Don't be one of those marketers who ruin the tool for the rest of us.
This article covers what overlays still do for conversions, the four trigger types and what each is good at, what Google's interstitial guidance actually asks for on mobile, the dismissibility and accessibility rules an overlay has to meet, and how to test one instead of guessing.
Do website overlays still work?
Marketers are always looking for a way to make a site convert better. Once you have exhausted the go-to tactics, headlines, CTAs, layout, it is time to move on to things that produce bigger results. The overlay is one of them, and it is easy to see why. It is a disruptive technology that forces the visitor to make a decision about a specific offer. You are putting your most compelling CTA in front of someone and asking them to act on it.
The published evidence is old but it is specific, and it points at the container as much as the offer. In three CRO case studies on overlays published by Econsultancy in 2013, a Reebok opt-in overlay with a benefit-oriented "JOIN AND SAVE!" headline collected 40 percent more email opt-ins than the control, from the same traffic. In another of those tests the thinner overlay box beat the wider one by 8.8 percent. The same article claims a site with an overlay generally gets up to 400 percent more opt-ins than one relying on an inline form, but that figure is a general assertion with no published methodology behind it, so treat it as a claim rather than a benchmark.
More recently, CXL argued in defense of popups with its own numbers, writing that about half of its newsletter subscribers join through an overlay that appears roughly halfway through an article. That is a scroll-triggered overlay on a site whose audience is professionally opinionated about popups, which makes it a useful data point.
The three things a visitor does when your overlay fires
- The visitor converts. Yay. Nothing to add here.
- The visitor closes the overlay and keeps browsing. A diamond in the rough. By closing it, they went from a passive visitor to an active user. They did not like what your overlay was selling, but they are still interested in what you sell.
- The visitor leaves the page. Bummer.
Visitors are going to leave your page. No matter how good you are at marketing, and no matter how well crafted the page and the CTA, most people leave without converting. That is not a reason to be content with the exits your overlay causes. If the overlay is doing more harm than good, re-evaluate the offer and the trigger before you kill the format. Your overlay may be great for new visitors and a major annoyance for returning ones who already took you up on the offer.
Why people hate overlays, and when the hate is earned
Overlays can be a terrible disruption and they are used on the vast majority of websites. Most of the hate came from blackhat CRO tactics, or as Dr. Harry Brignull calls them, dark patterns. These are tactics used by organizations that overtly try to manipulate or trick the user. It is a bad path to go down. Marketing is about persuasion, not manipulation, and there is a huge difference.
UserTesting once published a post with a poll asking its readers whether website pop-ups are worth it. The overwhelming majority said they do not use overlays on their own sites, for the sake of user experience. That is the answer you would expect from a UX audience. I understand the answer, and the question itself is loaded. What consumer is ever going to say:
Oh yeah, I love overlays and pop-up ads.
Nobody answers that way, because it sounds ridiculous. There is a rift between what people say and what people do. Despite everything people have to say about overlays, overlays still get opt-ins and sales. Bad overlays are a pain in the neck and worth complaining about. Good ones get used.
The honest test is whether the way out is as easy as the way in. An overlay with a clear offer and an obvious close button is persuasion. An overlay engineered so that leaving is harder than converting is manipulation, and it is what taught a generation of shoppers to reach for the close button before reading a word.
The four types of overlay and what each is for
There are a few different ways to trigger an overlay, and depending on your industry some will be more effective than others. I strongly urge you to segment your audience and limit the number of times a person sees the overlay. On one of the sites I worked on, I only launched an opt-in overlay to new traffic. With modern personalization, there are even better ways to get the right content and offers to the right audience.
The entrance overlay
The entrance overlay is a good opportunity to onboard a customer, and the riskiest of the four. It is also the one Google's interstitial guidance is aimed at, because it can cover the content someone just arrived to read. I would strongly recommend testing the timing. I have seen better conversion rates for overlays that do not trigger immediately on entrance. I do not know what will work for you, so test the timings.
The exit overlay
The exit overlay hit the mainstream a long time ago, and it is now hard to find a page without one. It can be triggered on an exit click or on exit mouse movement. If you implement exit-intent technology, look hard at the accuracy of the detection. The last thing you want is an exit overlay firing while a visitor is moving the mouse toward "Check out". Exit is also the lowest-risk trigger for search, because the content has already been seen by the time it fires.
The scroll message
The scrolling message is one of my favorites. CXL has written that about half of its newsletter subscribers come through this method. Depending on the technology you use, you can launch the scroll message at a chosen scroll depth, which means it only reaches people who are actually reading.
The top bar message
This is a persistent message at the top of the screen. It is not strictly an overlay, but it is a good way to add a message the visitor would not otherwise see, and showing a promotion there is a solid tactic. It also fits what Google asks for: a banner that takes a small fraction of the screen. The one thing to watch is that a sticky bar must never completely hide an element that has keyboard focus.
| Type | Fires when | Best for | Main risk to watch |
|---|---|---|---|
| Entrance overlay | On load, or a set delay after load | Onboarding, first-visit offers, audience routing | Covers content on arrival; highest search and annoyance risk on mobile |
| Exit overlay | On exit click or exit-intent mouse movement | A last offer to a visitor who is already leaving | False positives firing near the checkout button; no reliable equivalent on touch |
| Scroll message | At a chosen scroll depth | Newsletter and content offers to engaged readers | Depth set too shallow, so it fires before the reader is invested |
| Top bar message | Persistent, usually site-wide | Promotions, shipping and returns notices, announcements | Banner blindness; obscuring focused elements when sticky |
Every one of these except the exit overlay can be launched on several parameters: time on site, page depth, scroll depth. You control the message, when it is shown, and who sees it. That is where the overlay gets all of its power, and implemented correctly it becomes an asset rather than an annoyance.
On-click, on-load, on-scroll, and on-exit overlays, with segmentation by behavior, geolocation, and traffic source, plus A/B testing on every one.
See website overlays in Omniconvert Explore →What Google's interstitial guidance actually says
This is the part that changed most since this article first ran. In August 2016 Google announced that, from January 10, 2017, pages where content is not easily accessible to a user arriving from mobile search may not rank as highly. Google's current documentation on interstitials and dialogs keeps the same two instructions: don't obscure the entire page with interstitials, and don't redirect users to a separate page for consent or input. Use banners that take up only a small fraction of the screen instead.
Three practical consequences for an overlay program:
- The trigger, not the format, is what carries the risk. A full-screen overlay on arrival from search is the pattern the guidance targets. An overlay fired on deep scroll or on exit, after the searcher has reached the content, is a very different thing.
- Size is a lever. A partial overlay or a top bar that leaves the content visible is treated differently from one that covers the page.
- Legally required notices are exempt, but they still cost you. A cookie or age gate is not a ranking problem; stacking a promotional overlay on top of one is both a ranking problem and a usability disaster.
Dismissible and accessible: the rules an overlay has to meet
The W3C's ARIA Authoring Practices modal dialog pattern sets the keyboard behavior: focus moves to an element inside the dialog when it opens, Tab and Shift+Tab cycle within the dialog rather than escaping to the page behind it, Escape closes the dialog, and focus returns to the element that invoked it. Do all four and a keyboard user can get in and out of your overlay without knowing it was there.
Two WCAG criteria bite directly:
- 2.1.2 No Keyboard Trap (Level A). If keyboard focus can move to a component, it must be possible to move it away with the keyboard alone. An overlay with no keyboard-reachable close is a Level A failure.
- 2.4.11 Focus Not Obscured, Minimum (Level AA, WCAG 2.2). A component that receives keyboard focus must not be entirely hidden by author-created content. W3C names sticky headers and footers, non-modal dialogs, and cookie banners as the typical offenders.
On touch devices the problem is physical rather than technical. Nielsen Norman Group's research on accidental overlay dismissal (Budiu, Behnam and Moran, 2022) found that people are given too many ways to close an overlay, an X, a tap outside, a swipe, the back gesture, cannot predict which one does what they want, and lose their work when they guess wrong. Their recommendations map straight onto an overlay spec: prefer a partial overlay to a full-page one, never stack overlays, include a visible close button rather than assuming gestures, and let the device back gesture dismiss the overlay so it works as an undo.
There is a compliance edge to this now that did not exist when this article was written. The European Accessibility Act became enforceable on June 28, 2025 and names online shopping and its supporting flows as interfaces that must be accessible, with EN 301 549 and WCAG 2.1 Level AA as the reference standard. If you sell to EU consumers, an overlay a keyboard or screen-reader user cannot escape is a legal exposure, not just a bad experience.
So the old advice, "disable overlays on mobile", is too blunt. The accurate version is: on mobile, trigger later, cover less, and make the way out obvious. If you cannot do those three things, then yes, turn it off.
How to test an overlay instead of guessing
-
Pick the segment before the offerDecide who should see it: new visitors, returning non-buyers, a specific traffic source, a specific country. Excluding people who already accepted the offer removes most of the annoyance for free.
-
Run overlay against no overlay firstBefore optimizing the thing, establish that it earns its interruption. Measure the site-level outcome (revenue per visitor, orders, qualified signups), not just opt-ins.
-
Test the trigger and the timingImmediate versus delayed, scroll depth versus time on page, exit versus scroll. There is no universal winner here, which is exactly why it deserves a test rather than a best practice.
-
Test the headline and the sizeThe Econsultancy case studies moved opt-ins 40 percent on a headline and 8.8 percent on box width. These are the cheapest variables you have and they are rarely the ones people test.
-
Set and test a frequency capOnce per visitor per week is a reasonable starting point. Cap it, then test loosening or tightening it, and watch returning-visitor behavior rather than first-session conversion.
-
Check the guardrails before you roll outKeyboard in and out, Escape closes, visible close button, nothing stacked, no full-page cover on mobile arrival, and no sticky bar hiding a focused field. Roll out only after that list is clean.
Omniconvert Explore covers this loop in one place: on-click, on-load, on-scroll, and on-exit triggers, segmentation by behavior, geolocation and traffic source, dynamic text replacement, over 100 templates, and A/B testing on every overlay you build. Across 70,000+ experiments run on the platform, the average uplift for a winning experiment is 23.2 percent, and an overlay is one of the faster experiments you can put into that pipeline.
If this inspired you to add an overlay to your site, remember what Uncle Ben told Peter Parker: with great power comes great responsibility. The overlay is a powerful tool, and it is quickly used for evil when it is implemented badly.
Frequently Asked Questions
A website overlay is a panel that appears on top of the page a visitor is already reading, carrying one call to action such as an email signup, a discount, or a product recommendation. It is triggered by behavior (entrance, time on page, scroll depth, exit intent) rather than by a click on a link. Overlay, modal, lightbox, and popup all describe the same basic pattern.
Yes, when the offer is relevant and the timing is earned. Econsultancy's 2013 case studies on overlays reported a 40 percent lift in email opt-ins from a single headline change on a Reebok overlay, and a thinner overlay box that pulled 8.8 percent more opt-ins than a wider one. CXL has written that about half of its newsletter subscribers join through a scroll-triggered overlay. Overlays fail when they interrupt without offering anything, not because the format is dead.
Four types cover most use cases. Entrance overlays fire on or shortly after page load and suit onboarding or first-visit offers. Exit overlays fire on exit intent and suit a last offer before the visitor leaves. Scroll messages fire at a chosen scroll depth and reach people who have already read some of the page. Top bar messages sit persistently at the top of the screen and suit promotions and shipping notices without covering content.
They can when they obstruct the content a searcher arrived to read. Google's guidance on interstitials and dialogs asks sites not to obscure the whole page and to use banners that take only a small fraction of the screen. The 2016 announcement that introduced the mobile interstitial signal exempted interstitials required by law such as cookie or age notices, login dialogs for non-indexable content, and easily dismissible banners that use a reasonable amount of screen space. An overlay triggered on exit or deep scroll, after the content has been seen, is much lower risk than one that covers the page on arrival.
You can, but only under stricter rules than on desktop. A full-screen overlay on arrival from search is the exact pattern Google's interstitial guidance warns about, and small screens make close buttons harder to hit. Nielsen Norman Group research on accidental overlay dismissal found that people lose work when they pick the wrong way to close an overlay, and recommends partial rather than full-page overlays, a visible close button, no stacked overlays, and support for the device back gesture. Trigger later, cover less, and give one obvious way out.
Move keyboard focus into the overlay when it opens, keep Tab cycling inside it, close it on the Escape key, and return focus to the element that opened it, as the ARIA Authoring Practices modal dialog pattern describes. Never trap the keyboard, which fails WCAG success criterion 2.1.2 No Keyboard Trap at Level A. Sticky bars must not completely hide a focused element, which fails WCAG 2.2 success criterion 2.4.11 Focus Not Obscured at Level AA. Give the overlay a real close button rather than relying on a click outside it.
Trigger it after the visitor has shown some engagement rather than on arrival. Time on page, scroll depth, page depth, and exit intent all work as triggers, and the right one depends on the offer. There is no universal best delay, so test two or three timings against each other and cap how often the same person sees the overlay. Segment first: an offer that works for new visitors is usually an annoyance for a customer who already accepted it.
An overlay is a delivery format. A dark pattern, the term coined by Harry Brignull and catalogued at deceptive.design, is a design choice that manipulates or tricks the user, such as a hidden close button, a shaming decline link, or a countdown that resets. An overlay with a clear offer and an obvious way out is persuasion. An overlay engineered so that leaving is harder than converting is manipulation, and it is what taught people to hate the format.
The overlay is still here because it still works, and it still has a bad reputation because plenty of people use it badly. Both things are true at once. Before you ship one, answer the question honestly: how does this add value to this visitor, right now? If the answer is thin, the overlay is an annoyance with a conversion rate attached, and the annoyance compounds while the conversion rate decays. If the answer is good, then do the unglamorous work around it. Segment who sees it. Cap how often. Trigger it after engagement, not before. Give it a close button a thumb can hit and an Escape key that works. Then test the headline, the size, and the timing, because those are the parts you cannot guess. With great power comes great responsibility. Happy testing.
Build, target, and test overlays in Omniconvert Explore
Omniconvert Explore runs on-click, on-load, on-scroll, and on-exit overlays with behavioral, geo, and traffic-source segmentation, over 100 templates, and A/B testing built in, so every overlay you launch is a test rather than an assumption.