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 that popups are dead, just take a look at this statistic from Sumo. These guys analyzed more than 1.5 million popups to find out if they still work. Here are their findings:

  • 9.28% is the conversion rate of the 10% 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 are thinking that 3% is a miserable achievement, imagine that your website had 100,000 of visitors for a certain period. Thereby, you end up having 3,000 new customers or subscribers. Which is not bad.

The next appearing problem concerns the ways to create a working popup on your website, right? This article provides a solution to 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 a variety of success stories prove that this kind of advertising form works. A catchy and a well-shaped popup performs multiple tasks:

a. Grabs the Attention

Assuming the fact that a visitor can spend as few as a couple of 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 that it takes nothing for a service to create a working popup that will generate leads. It also mentions available popup types and shares a valuable piece of information – a free 14-days 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 with a beneficial offer, etc. All these actions somehow turn the visitor into a regular client.

d. Keeps a Website aesthetically Appealing

A website that is overloaded with banners and advertising will rather 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 simply 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. Being aware of them and their role is important for their effective implementing on your website. So, there are:

a. Time-based popups.

They appear after a visitor spent some time familiarizing with the website. Therefore, he or she will receive information/offer being more engaged and interested. No one likes being taken aback, right?

b. Content-based popups.

This type of advertising forms is one of the most effective because it is targeted based on the audience’s interests. It appears on the specific pages only and makes narrowly focused offers.

Content based popup

For instance, this popup on 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 kind of the popup appears when a visitor scrolls down to a specific part of the page. 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 the popup window. It appears on the side of the screen and gives a choice to a visitor – pay attention to it or keep on scrolling.

side based popup

This side-based window is shown up on website.

It is a particularly good solution because many users hate popups and tend to 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 with a website before the window will appear.

Exit popups are the last-ditch opportunity to attract visitor’s attention and “persuade” him or her 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 it is needed at all, try different approaches and see which one works better.

3. What Defines a Good Popup?

The answer to the question obviously depends on the judging criterion. Still, the main popup’s goal is to attract visitor’s attention and encourage him or her 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 content of the page or the user’s need?
  • Clarity: Does it convey the message clearly?
  • 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 of the 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 definitely deserve your attention. With their help, you will create a catchy popup and implement it on your website without any skills of 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, 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

If you use Elementor to create a website, then this builder is a must-have. The developers achieved a single workflow which means that it is possible to create a popup during the overall web building process.

Elementor popup builder

You only need an Elementor editor to customize the window, manage the targeting issues, 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 out.

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 the tons of 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-days trial. With its help, it is possible to create any kind of the appearing window. It gives access to 30+ targeting options and advanced analytical tools.

It is already used by such eCommerce stores as Asics, Ocado, Inkbox, Vans, Exito, etc.

f. Omniconvert

Omniconvert doesn’t deal with popup creation but it deserves your attention indeed.

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 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 just need to select. Taking to the account information about aesthetically appealing and effective advertising window, you will manage to create one in a couple of clicks.

6. How to Create a Popup with HTML, JS, and CSS

If you have any idea of 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 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, mobile detection. It is possible to define the pages, the time and the date, 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 the non-techies and the experienced users. There is a handy option for the beginners to have their first popups made by the professionals. This web-based instrument is known for the large library of templates.


It is paid but also has a free 14-days 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. Without a doubt, 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 managed to convert 8.09% 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 2.67% conversion rate combining the right strategy and styling element (arrow).

Psychologically Effective popup

The question in the popup window draw 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 it was mentioned, something that offers free service/product/delivery grabs the attention particularly good.

So, when Inbound company replaced this kind of the 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 couple of seconds to familiarize 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 just stop and focus on the least successful to avoid 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. Strange background in a combination with the green call-to-action button and the green line that crosses the button in a very strange way 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

Probably, only those, who tried “to do it better” can say what the author tried to convey. This popup looks confusing because it is not clear what it offers and what the person will get after clicking “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. Basically, 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.

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 owner of the website didn’t even stay polite and say “Please”. Rudeness can drive someone crazy even faster than a popup.

The attitude to the popups is definitely 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 with grabbing visitors attention.

Hope that this guideline was useful for you and 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.

8 Tips on Building Your Business's Online Presence

A commonly held belief by many ill-informed business owners...

7 mins read

A Handy Guide On How To Deploy Top-7 Local SEO Ranking Factors

Similar to how smartphones are updated with newer, better...

6 mins read

4 Best HTML Email Template Builders for 2022

Email marketing still remains a powerful channel. Videos, social...

6 mins read