Wisepops logo

Last updated Thu Jan 11 2024

How to Make the Most of Website Overlays

What Is a Website Overlay?

Simply put, it’s a content box that appears on top of a page and obscures the background content.

They can also be called website popups, lightbox popups, modals or lightboxes.

An overlay with discount offer
A website overlay on theidleman.com

Here are the types of overlays you can use:

If you'd like to make a website overlay for your website:

Unlimited free trial, zero commitment. 5-star rating on Shopify. See who uses Wisepops.


"We've increased our signups by 10x, very easy to integrate with our website and email platform, too"

Wisepops review from Capterra


Check out these templates for overlays:

Shop now sales popup
Free templates

Get a head start on designing website overlays. Browse our library of designer-made popup templates. Start converting your traffic.

➡️ Go to templates

Website Overlay Examples

Let’s take a few examples of what website overlays can look like.

Email Overlay

This one is a good introduction to modals: it’s an email overlay. I found it on Digiday.com, an online media.

As you can see, it’s a sign-up form displayed on top of the page I was checking.

Using this kind of lightbox forces visitors to check the form before they can continue browsing the website.

Overlay with email address form for a newsletter purpose
An email overlay on Digiday.com

Discount code overlay

This overlay contains a discount code and allows applying to to the shopping cart in one click. A very useful overlay for increasing sales during time-limited offers such as flash sales and Black Friday sales.

charlotte bio mobile sale popup
marilou bertrand
Here's how this overlay performed:

“The campaign generated six times more customers in six hours than we get on a full regular day, which we really did not expect.”

Learn more: Charlotte Bio Case Study

Marilou Bertrand, Director of Digital Marketing, Charlotte Bio

Exit Overlay

If you look at the example of exit popup below, you’ll notice that, visually, it’s not so different from the first example I shared above. And that’s normal because its main difference lies in its trigger.

It’s an exit overlay. In other words, it appears when visitors are about to leave the website. To do so, it relies on exit intent detection.

An example of exit overlay
An exit overlay on monday.com

Call-to-Action Overlay

This one is also an exit overlay. But instead of inviting visitors to share their email address, it offers them an opportunity to book a demo with a sales representative. We call this kind of lightbox a call-to-action overlay because, as its name suggests, its main feature is a CTA.

An example of overlay with CTA exposed
A CTA overlay on mailigen.com

Survey Overlay

Some marketers are also using overlays to deliver a survey. That’s the case of this overlay found on bt.com.

As you’ll notice, this kind of popup lets marketers collect feedback without asking visitors to leave the page, meaning that it usually reaches a broad audience while maintaining a good completion rate.

Example of popup overlay that asks about completing the purchase
An exit overlay on BT.com

Video Overlay

Overlays can also be used to get a video in front of a larger audience. This is what the NGO Humanity and Inclusion is doing to boost plays and build their email list.

An example of overlay with embedded video
A video overlay on HI’s website

Website Overlay Best Practices

Before you add an overlay to your website, let’s review some best practices together.

Set Some Frequency Limits

For a visitor, it can be a drag to have to close an overlay before being able to interact with a website.

And things can get even worse when the same overlay keeps appearing whenever they open a new page or each time they visit your website.

A screenshot of a reddit thread against overlays


Make sure your overlay is configured to appear a reasonable number of times and to stop appearing when the user has already interacted with it (for example, if it’s an email overlay, make the campaign stop for visitors who have already shared their email address).


See how to set up campaign frequency.

Optimize the Timing

Timing is another critical element to keep in mind when creating a website overlay.

Let’s take an example. You’re working for a major media and you choose to display an email lightbox when your visitors are halfway through reading an article. In your opinion, what are the chances that your visitors will pause their reading to subscribe to your newsletter?

That’s right, they’re pretty low.

Tests run by some of our clients tend to show that overlays perform best when they’re displayed on landing (before the visitor starts interacting with your website) or on exit (when they’re through browsing your site).

popup display settings

Go Visual

Your visitors deserve better than a poorly designed overlay.

Take 10 minutes with your graphic designer or find one on a freelancer platform. I guarantee the investment will be worth the cost.

Example of visual overlay in a coffin shape
A visual overlay on killstar.com

Forget Mobile

Let’s be quick and direct. Website overlays are a no-no on mobile devices because they cover a lot of content.

Instead, create mobile-optimized popups—they are perfectly fine when done right.

mobile popup examples

How to Create a Website Overlay

So far, we’ve defined what a website overlay is, seen several examples, and reviewed some best practices. By now, you should feel like it’s time to create your own overlay!

Let’s have a look at your options.

Website Overlay Software

If you want to skip the coding part and benefit from a website overlay tool that’s already optimized for marketers, using a website popup tool is probably a better option.

Luckily, Wisepops is one of these tools.

See how online businesses (ecommerce and SaaS) are using Wisepops:

See what you can do with Wisepops:

With our tool, you’ll benefit from:

A WYSIWYG builder that’s super easy to use:

wisepops editor

More than thirty targeting and segmentation options (including timing, page, device, source of traffic, etc.):


Advanced reporting options (Google Analytics integration, A/B testing, Klaviyo segment targeting, Shopify segments, detailed report generator, etc.):

shopify properties

Open-Source Plugins

Some developers have released open-source overlay plugins.

These plugins are a good fit if:

  • You want to create a basic overlay (as anything unusual will require you to edit the plugin’s source code)

  • You have access to a developer who knows how to set up the plugin, customize the overlay and help you configure it.

  • You don’t need to renew your overlay’s design too often (because for each edit, you’ll have to ask your developers for help)

Two of these plugins stand out:

  • FancyBox: Built in 2008, this plugin will help you create images, Google maps or even video overlays. (Note: This plugin is no longer maintained, as its creator moved to a paid license.)

  • Magnific popup: This plugin lets you create image, video and email overlays.

Both plugins are under the MIT license. This means you can use them for free, even for a business.

Sound like something you could use? Then try creating a website overlay!

Greg D'Aboville

Greg is a former Head of Growth at Wisepops. He has a degree from the ESSEC Business School and has been working in digital marketing since 2014.