How to Add a Button Click Popup in WordPress [With and Without Plugins]
Posted: Tue Dec 03, 2024 7:18 am
Clasp Blog How to Add a Button Click Popup in WordPress [With and Without Plugins]
Want to convert more of your website visitors into customers or subscribers? Popups are the secret weapon you need. In fact, studies show that well-timed popups can increase conversion rates by up to 9.28% on average.
Whether you run an ecommerce store, a SaaS company, or a small business, properly customized popups can work wonders. For example, popups help recover at least 17% of abandoned carts (ResultFirst) and can even increase sales by up to 25% (VWO). The best part? Popups are incredibly versatile. You can design them to appear based on user behavior or activate them with the click of a button.
In this article, we’ll dive into how to add button click popups in WordPress, both with and without a plugin, and show you how to use them to engage your visitors like a pro.
Easily create your own pop-up with Claspo's free WordPress plugin
Start
What is a Click Popup?
A click-based popup is a type of popup that appears only when norway whatsapp number data 5 million a visitor clicks on a specific button, link, or image on a web page. Unlike pop-ups that appear automatically, these are triggered by user action, making them much less intrusive. Because visitors choose to open them, they feel more in control, which makes for a more enjoyable experience.
Atmosphere_popup
6 Ways Click Popups Are Effective
Let’s take a closer look at why WordPress click popups are so effective.
1. Hot Lead Targeting
These pop-ups target warm leads — those visitors who have already shown interest by clicking a link or button. Because users have taken action, they are engaged and curious, making them more likely to convert. By focusing on these interested visitors, you can achieve higher conversion rates without wasting effort on cold leads who may not be ready to commit. This approach helps you make the most of your resources by capturing qualified leads at the perfect time.
2. Higher Conversion Rates with Less Advertising Spend
Click-based pop-ups only appear after a user clicks on a relevant CTA, like “Download Now” or “Get 10% Off,” meaning they’re shown to people who are already interested in your offer. This targeted approach leads to higher conversion rates, since you’re engaging an audience ready to take action. The best part? Because more of your traffic converts into leads, you spend less on advertising, lowering your cost per lead (CPL) and maximizing your return on investment. It’s a smart way to make the most of your advertising budget.
3. Efficient Use of Traffic
WordPress modal popups on click only target visitors who have taken an action. Instead of showing a generic popup to everyone, you focus on those who are already engaged, which increases your chances of conversion. By only reaching intent users, you avoid wasting impressions and resources on less engaged visitors. This efficient approach helps you get more out of your existing traffic, making every dollar spent on attracting visitors go further and delivering a higher ROI.
4. Reducing Waste in Advertising Spending
By ensuring a higher percentage of your paid traffic takes meaningful action (like subscribing, purchasing, or further engaging with your content), you make your ad spend more efficient. By focusing on engaged visitors, you spend less to reach your conversion goals, lowering your cost per acquisition. A click-activated popup can make the difference between losing an interested visitor and converting them into a customer, ensuring you get the most out of your marketing dollars.
5. Reduction of the Bounce Rate and Abandonment
Traditional pop-ups that appear instantly can alienate users, increasing bounce rates and wasting valuable traffic. In contrast, click-activated pop-ups appear at just the right time — when users are already engaged. This thoughtful timing helps keep visitors on your site longer, reducing bounce rates and increasing the chances of conversion. With fewer users abandoning your site, you can get more value from each visitor, which reduces your average cost per lead. It’s a win-win for both you and your audience.
If you’re wondering how to create a custom popup in WordPress , we’ve outlined all the steps and included some examples to help you design eye-catching popups that grab attention and increase conversions.
6. Cultivate Leads Without Additional Costs
When users interact with click-activated pop-ups and opt-in to your email list, you open the door to nurturing those leads through automated email marketing — a much more cost-effective approach than ongoing paid ads. This means you can maintain engagement without the constant need to spend on advertising. Instead, you can focus on creating email campaigns, which have a lower cost per contact. Over time, this strategy not only keeps your audience engaged, but also reduces your cost per lead, maximizing your marketing budget.
If you are not sure how to add an email subscription to WordPress , we have detailed all the steps and provided some interesting examples to make the process of creating subscription forms easier and help you increase conversions.
Try for Free and Get More Subscribers & Customers Now!
Sign up
Create an On-Click Pop-Up in WordPress using Claspo Plugin
Let's see step by step how to add a popup that opens when a button is clicked in WordPress using Claspo's popup builder .
Step 1: Install Claspo Plugin in WordPress
Log in to your WordPress dashboard. Log in to your WordPress site as an administrator.
Go to Plugins. In the left sidebar, hover over Plugins and click 'Add New'.
Search for the Claspo Plugin. In the search bar at the top right, type 'Claspo'. Once the plugin appears in the results, click 'Install Now' and then 'Activate.'
Connect your Claspo account. If you don't have an account yet, simply follow the instructions to create one. Once logged in, authorize the connection.
Step 2: Create a Pop-Up in Claspo
Now that the plugin is configured, it's time to create your pop-up in the Claspo dashboard.
1. Go to the Claspo dashboard from the WordPress menu.
2. Create a new popup . Click on 'Create New Widget' and select a pre-designed template or choose to create your own popup from scratch.
new_widget
Claspo offers various templates for lead generation, discounts and more.
templates_library
3. Design your popup by customizing the popup content and visual elements.
Create a headline that grabs your audience’s attention and pair it with a compelling offer. Tailor your call-to-action button to reflect your brand personality, with labels like “Unlock Your Discount” or “Get Free Shipping on Your First Order!”
Make your popup more engaging by adding dynamic elements like image blocks, video snippets, promo codes, countdown timers, and gamified features to create an engaging experience that drives conversions.
If you want to collect emails or other data, insert a form inside the popup. In the Claspo popup maker , you will find ready-made blocks that you can easily drag and drop into the workspace. Simply place them wherever you want inside the widget for quick and easy customization.
4. Set popup display options. To activate a popup on button click in WordPress, you can choose two options: activate the widget by clicking on the launcher or by clicking on an HTML element.
Trigger_the_widget
A launcher is a floating button or icon that stays visible on your website and can be clicked to activate a popup or widget. You can create one from scratch in our editor or choose from our library of templates and customize it to match your design.
If you choose to activate the widget by clicking on an HTML element, you must enter the CSS selector in the appropriate field. We will explain where to find it later.
Step 3: Add the button to a WordPress page or post
Once you have created your popup, you will need to add the button that will activate it on your WordPress site.
Go to Posts in your WordPress dashboard. To add a button to your content, click the + icon in the top left corner of the editor. This will open the block browser.
Scroll down to the 'Layout Elements' section and select 'Button'. Then, enter the full URL you want the button to link to in the text field.
To customize the button text, simply click on the placeholder text that says 'Add text…' and start typing your desired text.
Using the keyboard, you can also type /buttons on a new line and press Enter to quickly add a new Button block.
Or you can add a button with a plugin . Go to your WordPress dashboard and select Plugins > Add New. In the plugin search bar, type 'button block' to find the relevant plugin. Install and activate it. Once activated, you will receive a prompt to confirm your email to access the Button Block plugin.
Find a CSS selector and insert it into the widget configuration.
First, open your homepage in a new tab. Right-click anywhere on the page and select the 'Inspect' option (it may also appear as 'Inspect Element').
In the developer tools, you will see two panels: the left panel shows a hierarchy of HTML elements, while the right panel can be ignored for now.
This setup allows you to easily navigate to the element you are interested in, even if you are not familiar with HTML. Simply right-click on the desired element and the developer tools will automatically highlight it.
Once you have found the HTML element, the last step is to copy its CSS selector. Look for the class called .button on the link element, as it can be used as your CSS selector.
Paste the copied CSS selector into the appropriate input field in your widget settings.
HTML_element_click-based
Step 4: Test and Customize the Popup
Preview your page. Save the page and preview it to see how the button-activated popup works. Make sure that clicking the button opens the popup as expected.
Adjust the popup settings (if necessary). If the popup is not behaving as desired or if you want to change its appearance, go back to the Claspo dashboard and make the necessary changes.
Want to convert more of your website visitors into customers or subscribers? Popups are the secret weapon you need. In fact, studies show that well-timed popups can increase conversion rates by up to 9.28% on average.
Whether you run an ecommerce store, a SaaS company, or a small business, properly customized popups can work wonders. For example, popups help recover at least 17% of abandoned carts (ResultFirst) and can even increase sales by up to 25% (VWO). The best part? Popups are incredibly versatile. You can design them to appear based on user behavior or activate them with the click of a button.
In this article, we’ll dive into how to add button click popups in WordPress, both with and without a plugin, and show you how to use them to engage your visitors like a pro.
Easily create your own pop-up with Claspo's free WordPress plugin
Start
What is a Click Popup?
A click-based popup is a type of popup that appears only when norway whatsapp number data 5 million a visitor clicks on a specific button, link, or image on a web page. Unlike pop-ups that appear automatically, these are triggered by user action, making them much less intrusive. Because visitors choose to open them, they feel more in control, which makes for a more enjoyable experience.
Atmosphere_popup
6 Ways Click Popups Are Effective
Let’s take a closer look at why WordPress click popups are so effective.
1. Hot Lead Targeting
These pop-ups target warm leads — those visitors who have already shown interest by clicking a link or button. Because users have taken action, they are engaged and curious, making them more likely to convert. By focusing on these interested visitors, you can achieve higher conversion rates without wasting effort on cold leads who may not be ready to commit. This approach helps you make the most of your resources by capturing qualified leads at the perfect time.
2. Higher Conversion Rates with Less Advertising Spend
Click-based pop-ups only appear after a user clicks on a relevant CTA, like “Download Now” or “Get 10% Off,” meaning they’re shown to people who are already interested in your offer. This targeted approach leads to higher conversion rates, since you’re engaging an audience ready to take action. The best part? Because more of your traffic converts into leads, you spend less on advertising, lowering your cost per lead (CPL) and maximizing your return on investment. It’s a smart way to make the most of your advertising budget.
3. Efficient Use of Traffic
WordPress modal popups on click only target visitors who have taken an action. Instead of showing a generic popup to everyone, you focus on those who are already engaged, which increases your chances of conversion. By only reaching intent users, you avoid wasting impressions and resources on less engaged visitors. This efficient approach helps you get more out of your existing traffic, making every dollar spent on attracting visitors go further and delivering a higher ROI.
4. Reducing Waste in Advertising Spending
By ensuring a higher percentage of your paid traffic takes meaningful action (like subscribing, purchasing, or further engaging with your content), you make your ad spend more efficient. By focusing on engaged visitors, you spend less to reach your conversion goals, lowering your cost per acquisition. A click-activated popup can make the difference between losing an interested visitor and converting them into a customer, ensuring you get the most out of your marketing dollars.
5. Reduction of the Bounce Rate and Abandonment
Traditional pop-ups that appear instantly can alienate users, increasing bounce rates and wasting valuable traffic. In contrast, click-activated pop-ups appear at just the right time — when users are already engaged. This thoughtful timing helps keep visitors on your site longer, reducing bounce rates and increasing the chances of conversion. With fewer users abandoning your site, you can get more value from each visitor, which reduces your average cost per lead. It’s a win-win for both you and your audience.
If you’re wondering how to create a custom popup in WordPress , we’ve outlined all the steps and included some examples to help you design eye-catching popups that grab attention and increase conversions.
6. Cultivate Leads Without Additional Costs
When users interact with click-activated pop-ups and opt-in to your email list, you open the door to nurturing those leads through automated email marketing — a much more cost-effective approach than ongoing paid ads. This means you can maintain engagement without the constant need to spend on advertising. Instead, you can focus on creating email campaigns, which have a lower cost per contact. Over time, this strategy not only keeps your audience engaged, but also reduces your cost per lead, maximizing your marketing budget.
If you are not sure how to add an email subscription to WordPress , we have detailed all the steps and provided some interesting examples to make the process of creating subscription forms easier and help you increase conversions.
Try for Free and Get More Subscribers & Customers Now!
Sign up
Create an On-Click Pop-Up in WordPress using Claspo Plugin
Let's see step by step how to add a popup that opens when a button is clicked in WordPress using Claspo's popup builder .
Step 1: Install Claspo Plugin in WordPress
Log in to your WordPress dashboard. Log in to your WordPress site as an administrator.
Go to Plugins. In the left sidebar, hover over Plugins and click 'Add New'.
Search for the Claspo Plugin. In the search bar at the top right, type 'Claspo'. Once the plugin appears in the results, click 'Install Now' and then 'Activate.'
Connect your Claspo account. If you don't have an account yet, simply follow the instructions to create one. Once logged in, authorize the connection.
Step 2: Create a Pop-Up in Claspo
Now that the plugin is configured, it's time to create your pop-up in the Claspo dashboard.
1. Go to the Claspo dashboard from the WordPress menu.
2. Create a new popup . Click on 'Create New Widget' and select a pre-designed template or choose to create your own popup from scratch.
new_widget
Claspo offers various templates for lead generation, discounts and more.
templates_library
3. Design your popup by customizing the popup content and visual elements.
Create a headline that grabs your audience’s attention and pair it with a compelling offer. Tailor your call-to-action button to reflect your brand personality, with labels like “Unlock Your Discount” or “Get Free Shipping on Your First Order!”
Make your popup more engaging by adding dynamic elements like image blocks, video snippets, promo codes, countdown timers, and gamified features to create an engaging experience that drives conversions.
If you want to collect emails or other data, insert a form inside the popup. In the Claspo popup maker , you will find ready-made blocks that you can easily drag and drop into the workspace. Simply place them wherever you want inside the widget for quick and easy customization.
4. Set popup display options. To activate a popup on button click in WordPress, you can choose two options: activate the widget by clicking on the launcher or by clicking on an HTML element.
Trigger_the_widget
A launcher is a floating button or icon that stays visible on your website and can be clicked to activate a popup or widget. You can create one from scratch in our editor or choose from our library of templates and customize it to match your design.
If you choose to activate the widget by clicking on an HTML element, you must enter the CSS selector in the appropriate field. We will explain where to find it later.
Step 3: Add the button to a WordPress page or post
Once you have created your popup, you will need to add the button that will activate it on your WordPress site.
Go to Posts in your WordPress dashboard. To add a button to your content, click the + icon in the top left corner of the editor. This will open the block browser.
Scroll down to the 'Layout Elements' section and select 'Button'. Then, enter the full URL you want the button to link to in the text field.
To customize the button text, simply click on the placeholder text that says 'Add text…' and start typing your desired text.
Using the keyboard, you can also type /buttons on a new line and press Enter to quickly add a new Button block.
Or you can add a button with a plugin . Go to your WordPress dashboard and select Plugins > Add New. In the plugin search bar, type 'button block' to find the relevant plugin. Install and activate it. Once activated, you will receive a prompt to confirm your email to access the Button Block plugin.
Find a CSS selector and insert it into the widget configuration.
First, open your homepage in a new tab. Right-click anywhere on the page and select the 'Inspect' option (it may also appear as 'Inspect Element').
In the developer tools, you will see two panels: the left panel shows a hierarchy of HTML elements, while the right panel can be ignored for now.
This setup allows you to easily navigate to the element you are interested in, even if you are not familiar with HTML. Simply right-click on the desired element and the developer tools will automatically highlight it.
Once you have found the HTML element, the last step is to copy its CSS selector. Look for the class called .button on the link element, as it can be used as your CSS selector.
Paste the copied CSS selector into the appropriate input field in your widget settings.
HTML_element_click-based
Step 4: Test and Customize the Popup
Preview your page. Save the page and preview it to see how the button-activated popup works. Make sure that clicking the button opens the popup as expected.
Adjust the popup settings (if necessary). If the popup is not behaving as desired or if you want to change its appearance, go back to the Claspo dashboard and make the necessary changes.