{/*
*/}

How to Create a Popup: An Ultimate Instruction with Good and Bad Examples?

How to Create a Popup: An Ultimate Instruction with Good and Bad Examples?

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.

popup 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.

Content based popup

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.

side based popup

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.

e. Exit or entrance-based popups.

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:

entrance based popups

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:

exit based popoup

You can also try to be smart and a little bit hilarious:

exit entry based popup

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.

3. What Defines a Good Popup?

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:

  • Relevance: Does it meet the page's content or the user’s need?
  • Clarity: Does it convey the message?
  • Value: Is the offered reward worth the user’s attention?
  • Effectiveness: Does it contain psychological and web design tricks to control the user’s behavior and the follow-up steps?
  • Design: Does it look appealing and meet the overall website aesthetic?
  • Non-obtrusiveness: Is it easy to get rid of the popup?

If the answers to all questions are “Yes,” congrats, you are on the right way!

4. How to Create a Popup?

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.

5. Tools to Create a Popup

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!

a. Zemez Jet Plugin - PopUp Plugin

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.

Zemez jet popup plugin

This tool makes it possible to create an advertising form for different occasions and make it meet the aforementioned requirements for an effective popup.

b. Elementor Popup Builder

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.

Elementor popup builder

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.

c. PopupAlly

Here is one more free WordPress plugin with a multipurpose visual editor.

d. OptinMonster

With more than 700,00 clients, this service gives access to many stunning templates, including WordPress sidebar widgets, footer bars, and more.

e. WisePops

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.

f. Omniconvert

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.

omniconvert popup

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.

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:

a. adPopup Pro for jQuery

adPop-Up pro for Jquery

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.

b. ScreenPopper

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.

Screenpopper

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.

So, let’s take a look at some high-converting solutions:

Simple but Engaging Text-Only Popup by Lilach Bullock

text only popup

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

Psychologically Effective popup

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

improved popup

Weird but Clear and Attention-Grabbing Popup by GetResponse

attention grabbing popup

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

strange desing of popup

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”?

Confusing Offer

confusing popup

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

too much informative popup

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.

Rudeness

Mostly, people hate popups. Therefore, it is crucial to be resourceful and not irritate a visitor.

rude popup

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 (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.

How COVID-19 is affecting the App Market

Organizations across all verticals and geographies are reeling under...

6 mins read

8 Tools you can Use for Editing and Creating Digital Images for Your Blog

Determined to boost your website traffic by creating outstanding...

6 mins read