Sawaram Suthar / 10 Mins Read
Updated: February 24, 2023
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:
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!
The numbers and various success stories prove that this kind of advertising form works. A catchy and well-shaped popup performs multiple tasks:
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.
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.
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.
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.
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:
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?
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.
This
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 side-based window is shown up on Styletread.com website.
It is a perfect solution because many users hate popups and leave a website once an irritating window appears.
Entry popups seem to be one of the most irritating as they appear right before the user’s entrance unless they deliver valuable information/special offer:
Plus, it is important to give time to a user to familiarize themself with a website before the window will appear.
Exit popups are the last-ditch opportunity to attract a visitor’s attention and “persuade” him or them to stay. In this case, a discount can work as well:
You can also try to be smart and a little bit hilarious:
To wrap it up, it is important to spread the popups over the website wisely. If you don’t know what kind of popup will work and if needed, try different approaches and see which one works better.
The answer to the question depends on the judging criterion. Still, the main popup aims to attract visitors’ attention and encourage him or them to perform a certain act.
Therefore, a working advertising form should meet at least six (it’s a tough world) criteria:
If the answers to all questions are “Yes,” congrats, you are on the right way!
Finally, we have reached the applied part of the article. As you might have assumed, there are different ways to create a popup, and they vary depending on your coding skills.
It is possible to create an advertising window in a couple of clicks with specialized tools or use one of the programming languages. Let’s cover both options.
If you use WordPress CMS, the next two products deserve your attention. With their help, you will create a catchy popup and implement it on your website without any skills in coding!
This amazing Elementor plugin has a lot to offer. Along with creating a popup, you will manage to choose a trigger event, and window’s position, add animation effects, and customize it to your taste.
This tool makes it possible to create an advertising form for different occasions and make it meet the aforementioned requirements for an effective popup.
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
Here is one more free WordPress plugin with a multipurpose visual editor.
With more than 700,00 clients, this service gives access to many stunning templates, including WordPress sidebar widgets, footer bars, and more.
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 service stands out with its local-based marketing and personalization approach. At the outset, you will need to insert some JavaScript code at the beginning of your site’s HTML code, and that’s the only thing connected to the programming languages you will deal with.
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.
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.
Here is a step-by-step guide with HTML, CSS and JavaScript codes.
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.
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.
So, let’s take a look at some high-converting solutions:
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.
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.
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).
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:
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.
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! :)
You’ll also receive some of our best posts today
Sawaram Suthar (Sam) is a Founding Director at Middleware. He has extensive experience in marketing, team building and operations. He often seeing working on various GTM practices and implement best one to generate more demand. He is also founded a digital marketing blog - TheNextScoop.
Organizations across all verticals and geographies are reeling under...
The attention span of online users is forever reducing....
Determined to boost your website traffic by creating outstanding...
User reviews are a game-changer for e-commerce. Consumers rely heavily o...
Don’t miss the new articles!
