Website Overlays: a ‘What, Why, and How’ Guide With Illustrations

A website overlay is a type of pop-up, designed to focus users’ attention on a specific message that you want to convey to them by putting it on top of the webpage, thus overlapping the rest of the content. It is irreplaceable when you need to get a full scope of readers’ attention.

But how can you create the one that would be persuasive without being forced at the same time? There are a few tricks that might help. If you are interested in learning them, let’s see.         

The Notion of Website Overlay

Website overlays have many names, like lightbox pop-ups, lightboxes, modals. However, no matter what you call it, the essence stays the same. This message’s operating principle is literally to overlay the website and eliminate all the other elements that might distract visitors from taking the information in.

If you want to fire all cannons, you use a full-screen pop-ups. Opt for slide-in or sidebar forms when you strive to be unobtrusive but visible. If you long for something impossible to ignore yet delicate enough not to irritate people, you should go with a lightbox.

Of course, the whole concept of this pop-up is to center the buyers’ attention on the message. Still, it is only the first step in accomplishing your goal. So, here are some helpful tips on how to make it effective and easy to comprehend:

• Make it concise, simple, and structured. It is not exactly smart to try and fit a long read into a relatively small box. Plus, the more effortlessly people can grasp what you are talking about, the happier they will be.
• Keep your ground formula like this, “less text and form fields, more visuals (photo, video, animation, etc.)”. If you have an opportunity, it is always better to do so.
• Use a friendly and courteous tone. Excitement is great for engaging users, but only when it sounds natural enough to infuse people with enthusiasm instead of driving them away. Furthermore, remember to stay polite and respect personal boundaries.
• Do not forget about a catchy and appealing call-to-action (“Shop now”, “View options”, “Go shopping”, “Browse for more”, “Treat yourself”, “I want a discount”, etc.).
• Experiment with your designs. Do not be afraid to be unconventional. The name lightbox does not mean that it always needs to be the box shape. Let’s say, make it round for a change.
• Be consistent with the site’s appearance. The message does not have to be bright, colorful, or sparkly. You can go with a minimalistic, yet elegant design. The crucial aspect is that it should match your company’s style and theme.
• Add an alternative to your “Close” button, a text underneath the CTA, to make it sound like real face-to-face communication. You can write down something traditional, such as “No, thanks” or “No, I’d rather skip/pass/miss out on this one”. If it corresponds with your brand’s style, there is no harm in being creative and adding some wit or humor to the conversation (e.g., “Join” vs. “No, I’m a lone wolf”). 

Website Overlays: a Classic Pop-up Multi-tool

When someone tells you that lightboxes are outdated, do not believe them. They are classic. Indeed, floating bars occupied the niche of keeping visitors up-to-date with the recent sales, promotions, and discounts because they are permanently visible. In addition, more companies choose to show the cart’s content via sidebar forms. However, modals’ functionality remains universal.

Being a true marketing Swiss Army knife, these pop-ups can help with the following. 

Transmit Consumer Empathy

With the backing of statistically significant research data, it is safe to confirm that emotional intelligence positively impacts people’s psychological state and level of engagement. As a result, a more empathic approach to various interactions enables you to make shoppers feel empowered, heard, and motivated to buy. 

Hence, isn’t it a blessing that you can turn your lightbox pop-ups into one of the most effective communication channels? With lightboxes you can accommodate almost every visitors’ need:

• Greet them with a welcome discount;
• Show personalized offers & recommendations;
• Tell about discounts & loyalty programs;
• Allow them to share their gratitude or frustration via feedback;
• Explain shipping, return/refund, or cancellation processes;
• Clarify important details about the goods (e.g., ingredients, sizes, materials, technologies, etc.);
• Portray the advantages of shopping with you;
• Educate & guide via tutorials on the platform/product;
• Proactively prevent any inconveniences while contacting your customer service by displaying the available ways to get support;
• Save the cart’s content for later (you can even ask to specify the exact date for a reminder);
• Demonstrate social proof, such as reviews, testimonials, or pictures with statistical data on happy customers (because your clients are usually more impartial than you are);
• Issue an informative alert (a form to notify them when the desired item is back in-store, or the shopping basket with a note that they are close to free shipping);
• Ask for subscription preferences (topics, frequency, etc.) and personal details (contact info, name, gender, age, occupation, etc.) to present them with the most up-to-date & to-the-point information;
• Simplify the struggle of choosing by exhibiting the most relevant items as a result of a pop-up quiz.

Send a Warm Welcome

There is no need to enlist numerous empirical evidence confirming the impactful nature of first impressions. Its effect on information processing and further encounters perception has been established years ago. Hence, you have to spare no effort to give them a warm welcome (after all, you only get one chance to get it right). A friendly greeting with a personal offer might not instantly induce them to buy, but will certainly make them more inclined to shop with you.

Help to Start a Conversation

Reportedly, 46% of buyers will not mind elaborating on their tastes, preferences, and personal details if it guarantees that their shopping experience will be relevant to their interests. This is why a contact form with questions for segmentation (e.g., age, gender, occupation, subscription preferences, etc.) is one of the most appropriate ways to let customers introduce themselves. Plus, social media invitations are also helpful in terms of getting people to know more about you and initiating a less formal communication process.

Stop Saying Goodbye

Not all online shopping carts are lucky enough to get their happy ending. 7 out of 10 baskets end up being left behind by the shoppers. Of course, the process of cart abandonment recovery calls for a whole complex of measures. Yet, exit-intent pop-ups alone can be incredibly powerful instruments to prevent this scenario from happening. 

Research data suggests that the list of the most anticipated incentives includes free/flat-rate shipping, discounts/coupons, and easy refunds. Hence, you can:

• Offer fleeing customers free shipping or a personal discount.
• Suggest that there is no harm in purchasing right away because if a product or service disappoints them, they can effortlessly get a return/refund. 

Moreover, you can always kindly inquire whether your visitors want to save the goods in case they plan to come back later (and even set up a date to send a reminder).

Make Your Propositions More Inducing

Scarcity Marketing

The scarcity principle is a fundamental economic concept that has multidimensional implications when it comes to marketing. On the one hand, when something is rare, humankind considers it more valuable. But on the other hand, compared to people’s unlimited wants, their resources are scarce, which forces them to economize. Hence, you can use the following tactics to affect shoppers’ behavior:

• Present them with limited-time offers or exclusive goods. 
• Notify them when their favorite items will soon become unavailable.
• Inform them about discounts, sales, and promotions.

Installing a countdown timer can also make buyers feel the pressure of the fleeting seconds. 

Personalization

Who would not like their recommendations and proposals to always be accurate? Just show your potential clients an individual approach, and 80% of them will be in your pocket. This is why coming up with personal offers (with Claspo, you can use UTM parameters, segmentation, profile enrichment, and other forms of personalization) or tutorials on relevant topics is the ultimate way of conquering your customers’ hearts.

Peer Pressure

Reviews, testimonials, a carousel of popular items, and reassuring statistics can convince your guests that they will also like shopping with you.

Entertainment

If you gamify your discount offer or turn your survey into a quiz, your lightbox will generate more funny and exciting vibes than the ones with the traditional design. 

Highlight the Selected Offers

Sometimes your guests can get overwhelmed by a wide range of available goods/services. Thus, they often feel relieved when your overlaid message appears and narrows their choice down to certain recommendations, propositions, or offers. Plus, the elimination of distractions helps to concentrate on urgent information alerts. Furthermore, with creative design, lightboxes embellish the offer with visuals, colors, and attention-getting slogan/call-to-action.

Return Visitors Heads Back From the Clouds

Sometimes people just get lost, confused, or carried away while browsing. You can set up a pop-up to launch after long inactivity to help users get to the focused mode again or ask if any assistance is required.

Mend Your Statistics

With this huge number of helpful functions, it would be impossible for modals not to have a healing effect on the major performance indicators. Generally, it:

• Resuscitates your conversion rate.
• Brings down page bounce rate.
• Facilitates subscription conversions.
• Mitigates cart abandonment rate. 

If you feel unsatisfied with your benchmarks, conduct A/A (lift) & A/B (split) testings to identify problem spots and the best working traits of your pop-up campaigns. Plus, do not forget to view desktop and mobile data separately. Remember, lack of optimization frequently forces users to quit the website without making a purchase.

Website Overlay Triggers: the Fine Art of Being Delicate

The problem with pop-ups is always the constant search for balance between grabbing attention and vexing your customers. That is why selecting the appropriate time, frequency, and other launching parameters is pivotal to the success of your message’s performance. You do not even need to stop on one display condition. With a flexible setting, you can combine two or more triggers (Claspo has a special Advanced Rule Engine for that). 

Time Is of Essence

You got comfy on your couch, picked a perfect movie for a quiet evening at home, made a cup of delightful tea, and then someone called you out of the blue. Would you be happy to hear what they had to say? If it was not an emergency, then probably not. 

This is what makes the correct timing one of the most important factors when it comes to getting people’s undivided attention. Luckily, there is a wide selection of time-related triggers you can use to arrange the display settings properly:

• Scroll. This one ensures that your message fits the surrounding by preventing it from appearing until the users scroll to a certain point of the page.
• Exit-intent. It catches your potential clients before they manage to exit without completing a purchase.
• Click. This is the ultimate way not to exasperate your visitors because they willingly click on the link that launches a pop-up (e.g., click to learn more, click to be notified, etc.).
• Campaign-scheduled. This one guarantees that shoppers will not see your pop-up outside the defined period that your campaign lasts.
• Timed delay. It will allow users to look around before exhibiting your modal.

How Much Is Too Much?

When your message pops up constantly, it is irritating. Choose the frequency of displaying your lightboxes that your visitors will not find disturbing. Moreover, it is important to have pop-ups free zones and let people absorb information peacefully. Apply page-level targeting to determine on what pages your message will be shown.

Target the Right Audience

To enhance your message’s personalization capacities or prevent it from being displayed to the wrong category of shoppers, choose people who will see it, depending on: 

• Paths that bring them to your site (e.g., specify UTM parameters, such as source or campaign).
• Whether they are newcomers for whom you have a special welcome pop-ups.
• Whether they are your existing newsletter subscribers (hide your invitation to subscribe then).

Enchanting Website Overlay Examples

1. Whisky Loot wants to provide shoppers with the best-tasting experience. Hence, they designed a pop-up quiz to recommend only the products that suit your requirements.

Retrieved from Whisky Loot

2. Peel enables you to learn whether they ship their products to your country even before you start browsing. 

Retrieved from Peel

3. Casper does not want you to be perplexed by their new technology. So, it explains it in a click-activated pop-up.  

Retrieved from Casper

4. Gin Loot makes sure you know that club members get special prices. In addition, you can activate modals with products’ reviews with a click.  

Retrieved from Gin Loot

5. Bombinate has figured out an interesting way to visualize and explain the size chart for their posters. 

Retrieved from Bombinate

6. Route explicitly and concisely conveys the benefits of choosing it as your service provider.

Retrieved from Route

7. Homes Alive informs you that the item is added to your cart and seize the opportunity to show you the popular goods from the same category. 

Retrieved from Homes Alive

8. DROP welcomes you with a 10% discount and enables you to view the recommended items without leaving the main product’s page. 

Retrieved from DROP

9. Italic allows you to study a pop-up preview of a product and then continue browsing the store.

Retrieved from Italic

10. BetterBrand hides the bagel’s features, ingredient list, and nutrition facts in click-activated pop-up for your convenience. 

Retrieved from BetterBrand

11. Pulp & Press vividly portrays the advantages of joining its Juice Club.

Retrieved from Pulp & Press

12. Danner politely inquires how you want to hear from them.

Retrieved from Danner

13. PIONEER simply and elegantly asks you to subscribe (and you can refuse by clicking a “No thanks” line). 

Retrieved from PIONEER

14. Apolis promises to notify you when the product you seek is available.

Retrieved from Apolis

15. Soon briefly explains to you the details of their new unique payment method.

Retrieved from Soon

16. Perfect Keto wants you to start shopping with a 15% discount but only in exchange for your subscription.

Retrieved from Perfect Keto

17. Lunar Beauty is here to serve you some exceptionally hot tea and a 10% discount. If you long for more, take its limited-time offer.

Retrieved from Lunar Beauty

18. FÍO does not want you to leave before you finish your purchase. They even prepared a discount coupon to motivate you. Plus, you can examine the size guide without leaving the product’s page.

Retrieved from FÍO

19. Tropicfeel is a law-abiding company. So, they want to make sure that you agree with their Privacy & Cookies policies. Plus, you can view the recommended items without leaving your cart.

Retrieved from Tropicfeel

20. Birchbox is willing to give you not one, but two welcome discounts. It also allows you to learn information about important processes, such as automatic renewal, with a click. 

Retrieved from Birchbox

21. Deliveroo wants you to be able to customize your order without leaving the page. 

Retrieved from Deliveroo

22. L.A. Girl’s subscription form coincides perfectly with the brand’s style. 

Retrieved from L.A. Girl

23. Rothy’s manages to prevent cart abandonment and get new subscribers (with known preferences) in one form. 

Retrieved from Rothy’s

24. Killstar took the liberty of being creative and designed a truly unorthodox (in all senses) subscription invitation. 

Retrieved from Killstar

The Practical & User-friendly Algorithm to Craft a Website Overlay

Commonly, because it is a popular yet simple marketing tool, lightbox is one of the most appropriate types of messages to construct for beginners. As a “Hello world” script for programmers, it is a perfect form for your first pop-up. 

You might be afraid that it will be tiresome. But with intuitive software like Claspo that combines a multitude of features with familiar patterns, the process is completely effortless. All you have to do is follow this action sequence:

1. Sign up/Log in.

If you do not have a Claspo account, the registration procedure is easy. Just enter your name, email, and password to create a profile. You can also use Google, Facebook, or Twitter to sign up.

2. Go to the “Widgets” section and click on “New widget”.

3. Come up with a cool widget name & write it down.

4. Select the most suitable goal for your message/form.

This time, let’s proceed with “Inform users”, but you can go with “Collect user data” or any other fitting option.  

5. Choose the fitting layout type & style.

In this case, you need to opt for a “Pop up”. As for style alternatives, your choice depends directly on your preferences.

6. Edit & customize the elements.

This is the stage where you can let creativity flow. Customize everything, including size, positioning, margins, paddings, images, background, colors, and fonts. Do not forget to adjust both desktop and mobile views.

7. Set up triggers & integrations.

Specify the display rules of your pop-up and select the software that you want to work in tandem with your message. 

8. View it on the page & edit it if necessary.

9. Publish & let it into the world.

Website Overlays Never Lose Their Appeal

Do not be deceived by the simplicity of the concept behind them, lightbox pop-ups are suitable to perform an incredible number of functions. You can utilize them to inform visitors about your policies, gather personal data, collect feedback, mesmerize them with offers and recommendations, or even assist in shopping. Trends change, and new forms of messages appear to take over the scene. Yet, website overlays are like a little black dress, they will never go out of style.