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.

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.

Exit Overlay

If you look at the example 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 grow their email list.

Website Overlay Best Practices

Website overlays are a double-edged sword.

On one hand, they can help you share a message that will be seen by the visitors you want to reach.

On the other hand, they can be pretty annoying. So annoying that some developers have released a Chrome extension that blocks all overlays (yes, its name is pretty explicit).

Source

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

Optimize the Timing

Timing is another critical element to keep in mind when creating an 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. Overlays are a no-no on mobile devices. Find out why in this article.

Rely on banners or mobile-optimized popups instead.

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.

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: Created and maintained by Dmitry Semenov, 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.

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 overlay tool is probably a better option.

Luckily, Wisepops is one of these tools.

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, detailed report generator, etc.)

Sound like something you could use?

Start a 14-day free trial today!