The Best Way to Create a Popup on Button Click Within Minutes

First, let's see what popups are!

A popup is something unexpected. In our case, it is something that appears on your computer screen out of nowhere. The uses of popups are as broad as your imagination. However, there is a common stereotype that popups are only useful for collecting email addresses. Let’s try to break that stereotype. Popups are an effective way to show the right content to engaged visitors. Unlike many ads, popups can provide real value. And unlike many sidebar ads, they are much harder to ignore. In other words, popups can be effective tools for almost anyone who owns a website.

Types of Popups and Their Uses

Popups come in different types: Shortcode Popup, Custom Content, Subscription, Yes or No, Video, Iframe, Contact form . You are probably also thinking about how they appear. There are several display options that apply to all types: on page load (it opens automatically), open delay (it opens after a certain delay), on click (it opens when a user clicks a button on the website).

Each of these options has its own advantages and disadvantages. For example, popups that open on page load may have a high view rate but they can also be annoying. Open-delay popups can be ineffective because you never know whether the timing will interrupt the user’s experience or come too late. On-click popups might not get clicked; however, you can place them where users are more likely to click. Should it be placed on the button that guarantees some useful information, your chances of making your popup effective are higher. According to the Zeigarnik effect, named after psychologist Bluma Zeigarnik, an action that has been started intentionally is more likely to be completed. Put differently, your website visitors are likely to act upon your instructions or interact with the information presented if they are willing to do so by their own decision.

Create Your First Popup

How to Create a Popup on Button Click

In this tutorial, I will use a WordPress plugin called POPUP BOX.

I'd like to mention that in the variety of Popup plugins I find POPUP BOX the best one as it is fully customizable but also has fully made themes, the most important thing is that it's beginner-friendly and Mobile-Friendly which is a great asset. Throughout my learning and creation process, I had a great user experience and received quick answers to my questions from the responsive team. There is also a Popup Box demo where you can test the plugin before buying the Pro version.

To start breaking the stereotypes about popups, let’s look at several popup ideas beyond email collection. You can create a product testimonial popup, size chart popup for your store, information about a new launch, a Black Friday sales teaser, a product suggestion popup, and many more.

With the stereotype smashed, we can now move forward into exploring pop-ups and their usages, as well as a couple of cool examples. We will make an on-click popup asking for user opinions regarding preferences of either healthy or junk food (obvious though it may sound).

• First, make sure that you have installed and activated the plugin.

• After activation, click the plugin icon on the WordPress dashboard and you are ready to start creating your popup.

On the General page, you will first see the "Enable Popup" option. Check the box to enable the popup.

• Enter a popup title. In my case, it would be: "Do you prefer healthy food or junk food?"

Next comes the "Shortcode" field. Here, you can paste shortcodes from other plugins. This option is useful when you want to create popups based on quizzes, polls, and similar content.

To create a popup based on a question-answer principle, follow these steps:

• Create a poll using the Poll Maker plugin.
• Copy the shortcode.
• Paste it into the "Shortcode" field.

After successfully inserting the code into your popup, you can add a popup description if necessary. I will skip that step in this example.

Then choose the pages where it will appear. It can appear on all pages, a single page, or selected pages.

The "Popup Trigger" setting lets you choose how your popup appears. It can be set to:

• page load (it opens automatically),
• on click (the option we are using in this article), or
• combined.

Next comes the CSS selector(s) for trigger click․ This step is essential, so pay close attention to it.

What is the CSS selector?

If you’re a developer or have some knowledge of CSS basics, then feel free to move ahead, as this step is not for you. However, if you’re a beginner, then keep reading.

In simpler terms, a CSS selector tells us about the HTML element on which styling will be applied or selection made. In order to allow your popup to appear on a click, first you have to provide the class name of your button in the CSS Selector box.

Here is how to do that:

• Right-click the button and select Inspect.
• In the panel that opens, find the button’s"class"attribute.
• Copy the value inside the quotation marks.
• Paste it into the CSS Selector field, adding a period before the name.

Popup Settings

By looking at the popup settings, you can see what I meant when I said that it is fully customizable. There are many settings available; however, some of them are more important than others.

According to general website engagement statistics, people often spend only a few seconds deciding whether to stay on a page. So the chance that your popup will capture someone’s attention may be higher when it appears a few seconds after the page loads. Now you may be thinking, “Have you forgotten that we are creating an on-click popup?” Not at all. In the case of on-click popups, make the trigger button appealing enough to capture attention within those first few seconds.

But appearance alone is not enough, performance matters too. One important factor to consider when using on-click popups is conversion optimization. The success of your popup doesn’t depend only on when it appears, but also on how compelling your button and message are. Using clear call-to-action text like “Get Discount,” “See Details,” or “Start Now” can significantly increase click rates. Even small changes in wording or design can have a noticeable impact on user engagement.

Now, let’s talk about closing options. The Popup Box settings section allows you to close the popup in several ways: Close by pressing ESC, Close by clicking outside the box, Close by scrolling down, or hide close button. I know, I know… Hiding the close button so that they have no choice but to have a look at your popup sounds extremely compelling but do not forget about manners. To give your user a good site experience, make sure your popup is easy to close. You can also enable popup sound; however, make sure it is not distracting or unpleasant.

Popup Styles

Remember when I said that you need to make the button that opens your popup really stand out. Once the button gets attention, the popup itself should match that visual appeal. Always style your popup to match your brand so that it does not look out of place on your website. The Popup Box style gives you plenty of flexibility. In my case, I chose a simple approach by adding an eye-catching background that matched the popup’s purpose.

Here is my final Popup:

What to Do and What to Avoid

Since now we know how and why to use pop-ups, and what purposes they serve, it is also necessary to know the technique of using them effectively, without damaging your online business. Below are some guidelines for using pop-ups correctly and what you should definitely not do.

• Consider user experience.

Make sure that the user considers the popup helpful and not a block. This is the case where Bigger is not better as well as the more the better. Do not overuse.

• Make it easy to close

As I mentioned earlier, popups that are difficult to close and frustrate users feel unprofessional. Do not frustrate users by forcing them to view something they do not want or need.

• Respect first-time visitors

Let first-time visitors explore what your website offers before showing them a popup.

• Use images

Use pictures for grabbing people’s attention because we are visual beings. These pictures may greatly influence how effective your popup becomes, which is why you need to select them wisely. Pick a picture that will convey the context of your popup much quicker than any other medium can do.

• Use specific but clear language

Make sure that your popup delivers its message briefly by using clear, creative, and engaging language. Do not write long sentences in a limited popup space.

• Consider the user's device

The popups that you design for your website might be hard to use for the people who visit your website via their mobile devices. In case most of your visitors come through mobile phones, you should think about replacing them with other alternatives.

Wrap Up

Popups are a popular trend, and when used wisely, they can help you achieve the results you want. I hope this article helps you improve the effectiveness of your popup strategy.

And if you made it to the end, we hope we have earned your subscription. So before leaving, make sure to follow our Facebook and Twitter pages, and for better understanding subscribe to our YouTube channel, where you can find tutorials on learning how to create content by using our WordPress Plugins Step By Step.

Get Started