Learn to create a Pop-Up that grabs attention of visitors and increase conversion
On your way to converting a visitor into a regular client, many elements and tricks matter. So, if you think popups are dead, look at this statistic from Sumo. These guys analyzed more than 1.5 million popups to determine if they still work. Here are their findings:
9.28% is the conversion rate of the 10% of the most effective popups they were analyzing;
3% of the analyzed popups had a conversion rate of more than 11%;
the average conversion rate is 3,09%.
While you think 3% is a miserable achievement, imagine your website had 100,000 visitors for a certain period. You have 3,000 new customers or subscribers, which is not bad.
The next problem concerns creating a working popup on your website, right? This article solves this problem, reveals the secrets of creating an effective popup, and contains some samples to learn from and ones to stay away from!
So, let’s kick-off!
1. Why do People Still Use Popups in 2019?
The numbers and various success stories prove that this kind of advertising form works. A catchy and well-shaped popup performs multiple tasks:
a. Grabs the Attention
Assuming a visitor can spend as few as a few seconds on the website, it is crucial to grab his attention in a simple but attention-grabbing way. Nothing can do it better than a suddenly appearing window with valuable information.
b. Delivers the Most Important Piece of Information
Visitors come to your website for some reason. If they don’t find what they were looking for, they leave. Therefore, a good popup should contain an offer or a wealth of information.
For instance, this popup on Wishpond contains a catchy headline that says it takes nothing for a service to create a working popup that generates leads. It also mentions available popup types and shares valuable information – a free 14-day trial period is possible.
c. Increases Conversions
Conversions come from different channels. Popup windows are one of the effective ways to grow an email list, hold a visitor from leaving a website, attract a beneficial offer, etc. All these actions somehow turn the visitor into a regular client.
d. Keeps a Website aesthetically Appealing
A website overloaded with banners and advertising will scare your potential clients away than encourage to make a purchase.
Popups keep a website clean. It is a good way to deliver an important message without stuffing a website with distracting banners. A priceless piece of information can get lost in this abundance.
Finally, you can control the appearance of the window. It can appear right after an entrance or before an exit. You can trigger them by action or after a certain time of scrolling. Popups are flexible.
2. What are the types of Popups?
The popup windows appear according to different scenarios. Awareness of them and their role is important for their effective implementation on your website. So, there are:
a. Time-based popups.
They appear after a visitor spend some time familiarizing themselves with the website. Therefore, he or she will receive information/offers being more engaged and interested. No one likes being taken aback, right?
b. Content-based popups.
This type of advertising form is most effective because it is targeted based on the audience’s interests. It appears on specific pages only and makes narrowly focused offers.
For instance, this popup on Noshon.it will catch the attention of people keen on cooking and those interested in receiving new cooking tips and recipes. Therefore, it has more chances to reach out to the potential subscriber/customer.
c. Scroll-based popups.
This popup appears when a visitor scrolls down to a specific page part. Just like forms, it is more exact and client-oriented by nature.
d. Side-based popups.
This is the least irritating and aggressive type of popup window. It appears on the side of the screen and gives a choice to a visitor – pay attention to it or keep scrolling.
This builder is a must-have if you use Elementor to create a website. The developers achieved a single workflow, meaning creating a popup during the web-building process is possible.
You only need an Elementor editor to customize the window, manage the targeting issues and connect it to the site links and contact forms.
The power of Elementor is the talk of the town. You will get access to advanced styling and editing capabilities, templates, and various widgets. If there is one way to create a professionally looking popup without bugs in a couple of clicks, then the Elementor team has found it.
This popup-creating tool from Shopify is paid but has a free 14-day trial. With its help, it is possible to create any appearing window. It gives access to 30+ targeting options and advanced analytical tools.
Such eCommerce stores already use Asics, Ocado, Inkbox, Vans, Exito, etc.
Omniconvert doesn’t deal with popup creation, but it deserves your attention.
This is one of the most powerful tools to personalize your marketing strategy. Hundreds of services, tools, and plugins to create a popup exist – now you need to select. Considering information about aesthetically appealing and effective advertising windows, you will manage to create one in a couple of clicks.
6. How to Create a Popup with HTML, JS, and CSS
If you know how to create a popup with HTML, JS, or CSS, this part of the article is for you. Here are three shortcodes for creating an advertising window with the help of different programming languages.
There are also stand-alone tools that will help create JS, CSS, and jQuery popups, such as:
This tool offers a browser, OS, screen size, tablet, and mobile detection. It is possible to define the pages, the time and the date, and even the visitors you want a window to appear to. Without a doubt, it offers options to customize the look and the position of the popup.
This is a suitable solution for non-techies and experienced users. There is a handy option for beginners to have their first popups made by professionals. This web-based instrument is known for its large library of templates.
It is paid but also has a free 14-day trial.
7. A Bunch of Good and Bad Popup Samples
After receiving such substantial knowledge, the only thing left is to review a selection of stunning and failed popup samples. Undoubtedly, it’s better to learn from someone’s mistakes and consider someone’s successful experience.
Simple but Engaging Text-Only Popup by Lilach Bullock
On the surface, this message might seem too simple. Still, Lilach Bullock converted 8.09% of website visitors with this inconspicuous popup.
The appearing window has a clear headline that conveys in an attention-grabbing way. Something that promises a free service always attracts attention. The call-to-action button that duplicates/supplements the offer also works well.
The design is simple, but the combination of colors is appealing and doesn’t irritate.
Psychologically Effective Window by Inbound
This exit popup window helped a company to reach a 2.67% conversion rate by combining the right strategy and styling element (arrow).
The question in the popup window draws the visitor’s attention (though not that much), and the positive answer is placed on the contrasting color encouraging a person to perform a needed act. An arrow enhances this effect.
An Improved Version of the Previous Popup
As was mentioned, something that offers free service/product/delivery grabs the attention particularly well.
So, when the Inbound company replaced this kind of call-to-action window with a free trial proposal, the conversion rate boosted to 25.71% (an 852% increase over the previous offer).
Weird but Clear and Attention-Grabbing Popup by GetResponse
This exit popup window might seem a little bit weird and extraordinary, but judging from the point of efficiency, it is an awesome solution.
Without a doubt, it takes a few seconds to familiarize yourself with a non-basic window and stop leaving the website. In addition, it has a clear message and an intriguing offer to try something for free.
The Internet contains plenty of amazing popup samples, but let’s stop and focus on the least successful in avoiding making similar mistakes:
Strange Design and the Lack of Quality
Without a doubt, this design looks a little bit too fancy. The strange background, in combination with the green call-to-action button and the green line that extraordinarily crosses the button doesn’t look professional.
In addition, it is too complicated to understand the message the popup tries to convey. Why someone mentioned the pronunciation of the word “gif”?
Only those who tried “to do it better” can probably say what the author tried to convey. This popup looks confusing because it is unclear what it offers and what the person will get after clicking the “I agree” button. Stay precise and clear. Always.
Too Much Information
The visitor shouldn’t cross the equator, invent a bicycle, and kills the dragon to fill in the advertising form. A popup window should contain from one to three fields to be filled in. This one is too complicated. The design also looks weird.
Mostly, people hate popups. Therefore, it is crucial to be resourceful and not irritate a visitor.
This popup asks to switch off an Ad Blocker. Like: “Come on! I just hit your website for a second, and the entry popup asks me to switch off the Ad Blocker and kill me with dozens of distracting ads!”
In addition, the website owner didn’t even stay polite and say “Please.” Rudeness can drive someone crazy even faster than a popup.
The attitude to the popups is uncertain, and things won’t likely change. Still, marketers love them and they do work. Therefore, it is crucial to be careful and not overdo grabbing visitors' attention.
Hope that this guideline was useful for you and that the popups on this page didn’t get your nose! :)
Sawaram Suthar is the founder of TheNextScoop and Jagat Media. A digital marketing consultant, he has experience in branding, promotions, page optimization, research, and strategy. He has an MBA from the University of Pune. Anyone can find him on Twitter @sawarams.