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.

Here are the types of overlays you can use:

• Welcome popup

• Discount popup

• Lightbox popup

• Email popup

• SMS popup

• Spin-to-win popup

• Video popup

• Lead capture popup

• Multistep popup

• Countdown timer popup

If you'd like to make a website overlay for your website, try Wisepops (4.9 Shopify rating):

Unlimited free trial, zero commitment. 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

Or—

Check out these templates for overlays:

Popup templates!

Get inspired by beautiful campaigns

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.

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 limited-time offers such as flash sales and Black Friday sales.

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.

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.

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.

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.

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.

Source

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

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.

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.

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:

Examples of campaigns made with Wisepops [+case studies]

See what you can do with Wisepops:

With our tool, you’ll benefit from:

A WYSIWYG builder that’s super easy to use:

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.):

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!