The Best Way To Create a Popup On Button Click Within Minutes 2022
FIRST, let's see what popups are!
POPUP is something unexpected, in our case, it is that THING jumping on your computer screen out of nowhere. The usage of Popups is as wide as your imagination. However, there is a common stereotype around Popups saying they are only good for collecting emails. Let's try and break it! Popups are an effective way of showing the needed content, they deliver the content to the engaged visitors. Unlike many ads popups can be of value and last but not least unlike many sidebar ads, there isn't even a 1% chance that popups can be ignored. In other words, Popups are effective machines in the hands of nearly anyone owning a website.
Types of Popups And Use
Popups are of different types: Shortcode, Custom Content, Subscription, Yes or No, Video, Iframe, Contact form. You probably also think about the jumping part. Well, there are several options that apply to all types: on page load (pops on its own), Open Delay (pops after a certain delay), On click (pops when clicking on any button on the website).
Now each of these has its advantages and disadvantages. For example, popups that open on page load offer a 100% view rate but they can be annoying. Open Delay ones can be ineffective as you never know whether the chosen time will interrupt your user's experience or it will be too late. On-Click Popups might not be clicked on, however, you can always place it somewhere that you are positive the user will click. But if it is placed on a specific button that provides relevant information the chance is greater, that your popup will serve its purpose. By Zeigarnik effect (named after psychologist Bluma Zeigarnik): an action that has been started intentionally is more likely to be finished. In other words, your visitors are more likely to follow the instructions or the information given in the popup if they THEMSELVES decide to find out more.
How To Create a Button Click Popup?
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 creating process I got the best user experience and quick feedback to any question from its responsive creators. There is also a Popup Box demo where you can test the plugin before buying the pro version.
To start breaking all the stereotypes on Popups, let's give several Popup ideas other than emails. You can create a product testimonial Popup, size chart Popup for your shop's website, Info about the newest launch, Black Friday/Sales teaser, Product Suggestion, and MANY MORE.
The Stereotype is Broken now to completely SHUTTER it and get to know more about Popups, their usage, and my imagination. Let's create an on-click Popup to get feedback on whether people enjoy healthy or junk food the most. (as if it's not obvious)
- First, make sure that you installed and activated the plugin.
- After activating, click on the plugin icon on the WP dashboard and you are ready to start creating.
On the general page, you will first see the "Enable Popup" field. Check the box to start.
- Write Popup title. In my case, it would be "Do you prefer healthy food or junk food?"
After comes the "shortcode" field. Here you can copy and paste the shortcodes from other plugins. This is used when you want to make popups based on quizzes, polls, etc.
In order to create a Popup based on a question-answer principle, we must:
- Make a poll, (vie Poll Maker plugin)
- Copy the shortcode
- Past it in the "shortcode" field.
After successfully inserting the code into your Popup you can write your Popup description if necessary. I will skip mine.
Then choose the pages it's going to pop on. It can pop on all pages, one page, or selected ones.
The "Popup trigger" button is for choosing the way your popup appears. It can be
- on the page load (also known as the out-of-nowhere type).
- On click (which we are making in this article).
- Combined.
After comes the CSS selector(s) for trigger click, this step is UNSKIPABLE so pay close attention to it.
What is the CSS selector?
If you are a developer or familiar with basic CSS rules you can skip this part. But if you are a beginner KEEP READING!
To put it easy a CSS selector is an element that dictates which HTML element is going to be styled or selected. In order to make your Popup on click, you must give the value of your button in the mentioned field (CSS selector). For that, you must target a button and insert its class name into the CSS selector field.
AND THIS IS HOW YOU DO THAT:
- Press on left-click, and click on inspect.
- From the opened bar find the "class"of your button.
- Copy everything inside quotation marks.
- Past it in the CSS selector field adding a period before the name.
Popup Settings
Looking at popup settings you can see what I meant by saying that it's fully customizable. There are many setting options however some of them are of more importance.
By statistics, on average, people spend at least 7 seconds on any site they enter. So the opportunity that your popup will capture someone's attention is higher when it appears after 5 seconds of page loading. Now you will think "Have you forgotten we are making an on-click popup?"
Nope, dear! In case of on-click popups, make the popup button as appealing as your favorite dish, so that it captures attention within those several seconds. Now, what about closing. Popup box's setting section allows you to close it 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, your taste in sounds should not scare the hell out of people.
Popup Styles
Remember the part where I said you need to make the button that locks up your popup actually POP. And after the button is spotted the popup itself must correspond. Always BRAND your popup so that it does not look alien on your website. The Popup Box's style settings will provide full support. In my case, I chose the easy way by putting an eye-catching and of course, corresponding background to my popup.
Here is my final POPUP:
! DO AND DO NOT!
Now that we know what are popups for, why to use them, and how to create one, It is also important to know the art of making popups work for you and not against you. Here are some tips on what to do with them and what to avoid doing completely:
- Consider user experience.
Make sure that the user conserves the popup as a help 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
I have already mentioned once that popups that cling to their life and the user's nerves are unprofessional. Do not irritate your user by forcing them to view something they do not want or need.
- Pay respect to first-time visitors
Let first-time visitors see what you offer on your website before immediately showing popups.
- Use images
I think using images to catch attention is very logical, people are visual and the images used can play a great role in the effectiveness of your popup so think twice. Use an image that will deliver the context of your popup faster than words.
- Use specific but clear language
Make sure that your popup delivers its massage in short details accompanied by the use of clear, creative, and exciting language. Do not write long sentences in the minimized shifts.
- Consider the user's device
Popups on mobile devices can be a real headache. So if you know your website is mostly viewed by mobile users, replace them with something else. Or use popup plugins that are mobile-friendly.
WRAP UP
Popups are a new trend and unlike many of them, Popups are smart ones so using them wisely can get you the result you are seeking. Hope this article will maximize the effectiveness of your Popup.
And if you are at the finish line, we are probably worth a 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.
