Overlay Popup Best Practices, Examples, and Templates

Overlay Popup Best Practices, Examples, and Templates

23 June 10 July ~ 10 min read 1926 views
rate it
Claspo Blog Overlay Popup Best Practices, Examples, and Templates

The term "popup window" has negative associations for many Internet users. A picture that covers the desired text fragment appears in front of your eyes. When trying to close, the user often goes to another resource altogether.

Despite this bad reputation, popups can also be helpful. Initially, they were just a type of dialog used in programming as a user interface element. They serve as information and a means of dialogue between the user and the program (web application). However, overlay popups are used mainly for advertising purposes on the network.

Table of Contents

What Is an Overlay Popup?

Modal windows, overlays, or popups are a type of message in an application. Large user interface elements sit on top of the application's main window, often with a transparent layer that allows users to see the main application.

Popup windows are used to display additional information in cases where it is presented in an abbreviated form in the main window. For example, a popup window can be used to show the user the full access route when it is not contained entirely within the given area or some other textual information.

See How Quick And Easy It Is To Make Your Own Popups!

Even though popups are one of the types of advertising that users dislike, they aid in the following objectives:

  • Subscription to the company's newsletter;
  • Downloading useful content (in this case, the user must also leave his email address or phone number);
  • Registration on the site for discount coupons.

Popup overlays don't have to be intrusive. When you use them correctly, you can motivate the site visitor to take the action you want. To do this, you only need to decide on the type of popup windows and the content you will place there.

Types of Popups Similar to Overlay

Popups are not just popup spam. When used correctly, they can serve as valuable tools that improve the user experience in an app and can even improve retention and long-term engagement.

Here are some of the types of website popups.

1. On-Click

On-click popups work by inserting a campaign popup trigger into pinned text. These popups are really good because they are seen by users who are interested in what you have to offer. This means you are getting super hot leads. As a result of this, you can expect much more conversions.

Stays.net was able to increase its monthly sales by 10% using on-click popups.

2. Lightbox

It is the most common type of popup window. When such a popup window appears, the browser's background becomes darker, drawing all your attention to the information on the popup window. Most often, lightboxes are used to expand the list of email addresses.

3. Full-Screen Modals

Full-screen modal messages are for messages you think are so important that they deserve the user's attention. For example, an exceptional app update or confirmation of critical action.

A popup on the site is an excellent way to quickly collect a contact base, increasing the conversion rate and reaching the audience. Splicing every time stimulates the growth of additional income: subscribe to a subscription, take a reduction in exchange for a phone number or email.

Popup Overlay Best Practices and Examples

Popups are the most common cause of poor user experience. But to prevent this from happening to you, you need to follow these tips to avoid negative impacts from annoying popups:

  • Resist the urge to follow the crowd and annoy your users by getting in the way of working to maintain short-term performance.
  • Explore alternative approaches that consider your users' needs and keep the intent to collect feedback, notify users of data collection, or solicit email addresses.
  • Save modal overlays for important information.
  • Don't interrupt important tasks or block access to content with a cumbersome and very intrusive popup.
  • Conduct usability testing to make sure your popups don't discourage users and that you get real information to help you improve your service.

Let's look at the quality of popup overlays from well-known brands.

1. A New Look for Gmail

Gmail has used in-app message overlays to communicate some important UI update news to users. The app has been given a new look with three different layout options. In this example, Gmail communicates the message with consistent branding and concise copy, creating a compact embedded environment that engages and informs the user.

By leveraging in-app messaging, you can reduce the risk of churn associated with design changes or major changes to your user interface.

2. Conde Nast Traveller 

The website presented its newsletter as a small, discreet banner below the navigation bar. This design allowed interested users to subscribe to the newsletter but did not distract those who simply wanted to read the site's content. Popup content: don't rely on the overlay to deliver a message to the user.

3. Enabling Push Notifications on YouTube TV

YouTube's permission request is one of the best popups. Instead of asking for permission without context, the app positions notifications as a required feature. Messages effectively communicate the benefits of push notifications and play on users' fears of missing out.

4. A Simple Sephora Design Update

Sephora used a fantastically simple popup to inform users of the app's menu changes. We like that this quick start guide doesn't allow for much interpretation and emphasizes that a conscious improvement has been made to the user's navigation.

5. Individual Offer from Caviar

Caviar uses users' location information and application settings to generate personalized in-app messages. Caviar uses an overlay to promote new restaurants, letting users know that delivery charges from a new, nearby restaurant are free for a limited time. An enticing image catches the eye and gives hungry users a reason to browse.

6. Request for Feedback in OpenTable

Getting users to provide feedback in any format is quite tricky. But for applications like OpenTable, user-generated content is essential.

Using a mobile popup as a feedback portal is a smart and efficient way. It serves as a reminder that the app was helpful to the user (last restaurant reservation) and is effective because using a small overlay gives users the impression that it will be a quick and easy experience.

Popups are unmatched in their ability to reach all users in context and simultaneously. You need to use modal solutions wisely, and then you can enjoy long-term and predictable growth in revenue and retention.

Overlay Popups Best Templates by Claspo

You can easily create a fully functional popup window without programming knowledge. You may choose one of the ready-made templates and customize it in a simple form editor. In Claspo, you can find a popup overlay template for every taste and every request.

Below we present some sample templates.

1. “Statue of Freedom” — this template will help keep the visitor's attention by using a turn-down timer.

2. "Wild Orchid" — helps collect email addresses and attract an interested audience.

3. "Golden Discount" — this template attracts potential buyers by promoting special offers.

On the site, you can choose the template that suits you best and will help you effectively increase your sales.

Step-by-Step Guide: Creating Effective Popup Overlays with Claspo

By their nature, popups are not a major problem for the user. Like many other digital interface elements, the design decides whether this interaction experience will be painful or pleasant. Therefore, it is so important to carefully consider the design of popups to please the user and convince him to take the targeted action. 

Let's see how to create popups with Claspo that will lead to high conversions.

1. Registration

First, you need to register on the Claspo website and create your profile. You can also log in via Facebook or email.

2. New Widget

Next, you click on the Widgets button and create a new one. You need to come up with a name that the client will definitely pay attention to.

3. Goal and Type of Popup

Choose your perfect goal and type of your future popup. The user on your site has to clearly understand what you want from them and what they will receive in return.

4. Relevance and Call to Action

Make your offer and call to action relevant, clear and understandable. Promo codes, discounts, and the word "free" always work. Adjust the size, and margins, and add an image or background.

5. Bright Colors and Style

The popup needs to stand out, so use contrasting colors. For example, combinations of yellow and black and pink and white attract attention.

6. Triggers and Integrations

Here you need to choose the operation option of your popup window, when, how, and where it should appear.

7. Testing

Test how it looks before you embed a popup in your resource. A popup should not interfere with or cause negativity but also be noticeable.

There is a wide range of popup templates to help you create different types of popups and drive traffic, collect emails, or attract visitors to your social networks or sites. You can also find out how to create a video popup on our site.


It is a myth that popups do not benefit businesses but only annoy site visitors. Popups are a powerful marketing tool that positively affects sales, customer awareness, and customer service. With the right design of popup windows, you can achieve quite a high conversion rate. Most importantly, remember that it is worth considering a well-designed form and user behavior.

Still Not A User Of Claspo? Let's Fix It

You Might Be Interested in
120 Impactful Summer Email Subject Lines: Get Inspired Now!
120 Impactful Summer Email Subject Lines: Get Inspired Now!

The subject line of an email serves as a tool to engage subscribers and convince them to open the email. It is an effective strategy for reducing consumer shopping cart abandonment and increasing open rates, click-through rates, and, ultimately, conversions. We've compiled a list of the greatest summer email subject lines from abandoned cart subject lines to those which assist you in increasing open rates, driving purchases, and sparking conversations during these scorching months. Table of Contents Superior Summer Email...

22 June 8 min read
Top 20 Zapier Alternatives & Competitors in 2023
Top 20 Zapier Alternatives & Competitors in 2023

Table of Contents About Zapier Best Zapier Free Alternatives in The Year 2023 Similar to Zapier Paid Tools Conclusion The modern need for automation led to the emergence of such a tool as Zapier, which became the leader of the market in the shortest term. Despite its evident dominance, various apps are alternative to Zapier and provide similar services for a lower price. About Zapier Zapier is like an Octoparse for web scraping tools. By that, we mean that Zapier...

21 June 13 min read
Mobile Popup Best Practices and How to Build Pop-ups That Convert
Mobile Popup Best Practices and How to Build Pop-ups That Convert

Mobile pop-ups have become widespread in engaging website visitors and boosting conversion rates during digital marketing campaigns. Despite their usefulness towards such ends, it is crucial to follow industry best practices and prioritize careful design when creating them to increase efficacy. Our article examines critical aspects surrounding the use of mobile popups while offering practical guidance on designing them effectively and pointing out how Claspo's offerings can aid with regulatory requirements. With adherence to each recommendation outlined here for your...

20 June 8 min read
15 Powerful Ideas on How to Improve Your Website and Boost Engagement
15 Powerful Ideas on How to Improve Your Website and Boost Engagement

Regardless of whether you're running an e-commerce store, a blog, or a corporate website, engaging visitors and keeping them hooked is paramount. However, achieving a remarkable website experience requires more than a visually appealing design. It demands strategic thinking and the implementation of proven techniques to captivate users and encourage their active participation. In this article, we'll explore 15 powerful ideas to help in website improvement and user engagement. From improving website speed to leveraging interactive elements, these strategies will...

27 June 10 min read
30 Welcome Messages Examples For Your Website
30 Welcome Messages Examples For Your Website

When welcoming potential customers to your website, it's important to make a good first impression with a compelling introductory message. This message should convey your warmth and eagerness to have them explore your site while catching their interest in the valuable content offered on your web pages. Creating welcoming messages throughout your site can help captivate visitors and keep them engaged as they browse high-value propositions. It would be best to balance being friendly while highlighting what makes your business...

28 June 10 min read
6 Psychographic Segmentation Examples in Marketing
6 Psychographic Segmentation Examples in Marketing

One of the effective ways for businesses to stay competitive is to use targeted, precision marketing. Apparently, demographic segmentation is not enough to identify your target audience.  In order to attract clients’ attention, it is necessary to define their way of thinking, i.e. to use psychographic segmentation. This will be the subject of this article — we will talk about its importance, give examples of psychographic segmentation, explain how to use this technique, and select the appropriate tools for the...

29 June 8 min read


We use cookies to ensure that our website functions correctly, to personalize advertisements and other content, to provide social media features, and to analyze network traffic. We also share information about your website use with our social media, advertising, and analytics partners. By staying on the website, you accept this.