How to Display Popup on Button Click in a WordPress Website
This is a beginner-friendly step-by-step tutorial on how to display popups on button clicks. Learn how to use on click trigger using the WordPress Popup plugin. This is a useful tool for increasing conversion rates. This trigger requires coding skills but with the Popup Box plugin, you will be able to do it with just a few easy steps. Read the article and add a button-click popup to your website within just minutes or even seconds.
Step 1: Crete your Popup
For the first step, you will need to, first of all, go to the Popup plugin and click on the Add new button for creating a new popup. Then choose your preferred popup type and template to match your branding elements and logo design. The main structure of the popup is already set. Let’s move on.
Step 2: Choose the trigger
Now as we have already chosen our preferred type and template it’s time to add a button click trigger. For the second step, all we need to do is to go to the General Tab, scroll a little bit down and find the Popup trigger option. From the presented triggers choose the On click trigger. But this trigger works with CSS selector(s) for the trigger click option. You will need to add your preferred CSS selector(s).
Step 3: Find the CSS selector
For the third step, we will need to write the CSS selector. When a user clicks on a certain CSS element on your website, the trigger shows a popup. In the “CSS selector(s)” option, define the CSS element. You must provide the button’s value in the corresponding field (CSS selector). To do so, you must choose a button and enter the class name of the selected button into the CSS selector field. For finding the class name, open the inspect element.
Press on the left click >Inspect > find the needed button “class” > copy everything that is inside the quotation marks.
That’s all. Now the popup is ready to be opened with just a button click.
Why do we need to display popups on button click?
Button-click popups are a well-known way of increasing the conversion rate of the website. The traditional popup openings are somehow known to be an expected way. But how to add more engagement to your popup? Yes, open it at the appropriate but at the same time in the most unexpected way. They have a great advantage over the traditional ones. To promote more visitors to subscribe to your email list, complete a form, register on your website, and do other actions, use clickable popup buttons.
Wrapping Up!
This guide displays all the steps that are needed for creating a popup and opening it with a button click. You do not have to be a good programmer or have coding skills for adding this option to your popup. Even if you were not familiar with CSS selectors and didn’t know how to find them, now you are already a master.
To keep up with the latest news, be sure to subscribe to our YouTube channel and check the Blog.
