How to Add a Popup on Button Click in WordPress (Full Guide)

Are you looking to turn 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're running an ecommerce store, SaaS company, or a small business, properly customized popups can work wonders. For instance, popups help recover at least 17% of abandoned carts (ResultFirst) and can even boost your sales by up to 25% (VWO). The best part? Popups are incredibly versatile. You can design them to pop up based on user behavior or trigger them with a simple button click. 

In this article, we’ll dive into how to add popups triggered by a button click in WordPress, both with and without a plugin, and show you how to use them to engage your visitors like a pro.

What Is an On Click Popup?

An on-click popup is a type of popup that only appears when a visitor clicks a specific button, link, or image on a webpage. Unlike popups that show up automatically, these are triggered by the user’s action, making them far less intrusive. Since visitors choose to open them, they feel more in control, which makes the experience more pleasant.

Creating an On-Click Popup in WordPress using Claspo

Let’s break down how to add a popup opened on button click in WordPress using the Claspo popup builder step by step.

Step 1: Install and Activate the Plugin in WordPress

1. Login to your WordPress dashboard. Access your WordPress website by logging in as an administrator.
2. Navigate to plugins. On the left-hand sidebar, hover over Plugins and click ‘Add New’.
3. 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.’
4. Connect your Claspo account. If you don't have an account yet, simply follow the prompts to set one up. Once logged in, authorize the connection.

Step 2: Create a Popup in Claspo

Now that the plugin is set up, it’s time to create your popup 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 build your popup from scratch.

Claspo offers various templates for lead generation, discounts, and more.

3. Design your popup by customizing the popup's content and visual elements.

Create a headline that captivates your audience and pairs it with a compelling offer. Tailor your call-to-action button to reflect your brand's personality — consider labels like "Unlock Your Discount" or "Get a Free Shipping on Your First Order!" 

Enhance your popup with dynamic elements like image blocks, video snippets, promo codes, countdown timers, and gamified features. You can upload your own images or use free assets from our built-in media library to create a more engaging experience that drives conversions.

If you want to collect emails or other data, include a form inside the popup. In Claspo popup maker, you'll find ready-made blocks that you can easily drag and drop into the workspace. Simply position them wherever you want within the widget for quick and easy customization. 

4. Set the popup display settings. To trigger a popup by clicking a button in WordPress, you can choose two options: to trigger the widget by clicking on the launcher or by clicking on an HTML element.

Launcher is a floating button or icon that remains visible on your website and can be clicked to trigger a popup or widget. You can create it from scratch in our editor or choose from the templates in the library and customize it to match your design.

If you choose to trigger the widget by clicking on an HTML element, you need to insert the CSS selector into the appropriate field. We’ll cover where to find it later.

Step 3: Add the Button to a WordPress Page or Post

With your popup created, you’ll need to add the button that will trigger it on your WordPress website.

1. 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 action opens the block browser.
2. Scroll down to the ‘Layout Elements’ section and select ‘Button’. Next, enter the full URL you want the button to link to in the provided text field. 
3. To customize the button's text, simply click on the placeholder text that says ‘Add text…’ and start typing your desired text.

Using your keyboard, you can also type /buttons on a new line and press Enter to quickly add a new Buttons block.

Or you can add a button with a plugin. Navigate to the 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'll receive a prompt to confirm your email to opt into the Button Block plugin.

Find a CSS selector and insert it in a widget setting.

1. 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’).
2. In the developer tools, you'll see two panels: the left panel shows a hierarchy of HTML elements, while the right panel can be ignored for now.
3. This setup allows you to easily navigate to the element you're interested in, even if you're not familiar with HTML. Just right-click on the element you want, and the developer tools will highlight it automatically.
4. Once you've found the HTML element, the final step is to copy its CSS selector. Look for the class called .button on the link element, as this can be used as your CSS selector.

Paste the copied CSS selector into the appropriate input field in your widget settings.

Step 4: Test and Customize the Popup

1. Preview your page. Save the page and preview it to see how the button-triggered popup works. Ensure that clicking the button opens the popup as expected.
2. Adjust popup settings (if needed). If the popup isn’t behaving as desired or you want to tweak its appearance, return to the Claspo dashboard and make the necessary adjustments.

Step 5: Publish the Page

Once you're happy with the setup, go ahead and publish your WordPress page or post. The button-triggered popup is now live and ready to engage visitors. Now that you know how to open a popup using a button click in Wordpress, we’ll reveal some tips for higher conversions.

10 Real Examples of Button Popups in WordPress and Why they Work

Ever wonder how real brands use on-click popups without disrupting the experience? This section breaks down 10 real examples of button-triggered popups and explains why they work from a UX and marketing angle. You'll see what’s possible beyond basic forms and how to drive signups, sales, or grow referrals. Each example comes with clear takeaways you can apply right away.

Subtle Yet Powerful: Growing Your Email List

This use case shows how a button popup in WordPress can be designed to gently invite users to subscribe — without disrupting their browsing.

What to notice
Brooklinen places a small envelope icon in the menu section that behaves like a discreet notification. The red dot mimics the psychology of a new message — a smart way to grab attention without being aggressive. When clicked, the onclick popup opens as a floating bar offering a discount on the first purchase in exchange for an email address.

From a UX and marketing perspective, this does several things right:

• It feels like a natural part of the interface, not a forced interruption.
• The floating bar layout stays visible without blocking the main content — improving the user experience.
• It targets high-intent users who are already navigating the site and more likely to convert.
• The clean design aligns perfectly with the overall aesthetic — no visual friction.

This approach is ideal for any WordPress site looking to display a popup for email capture — especially when user trust and aesthetics matter.

Prompting Registration Through Helpful Microinteractions

Here’s a clever way to use a WordPress popup on click that feels both helpful and strategic: when a reader wants to save an article, they’re met with a click popup window that invites them to register.

What to notice
Instead of redirecting users to a third-party tool like Pinterest, the ‘Save Article’ button triggers a popup with a simple message: create an account to unlock this feature. It’s a seamless blend of user interaction and subtle conversion.

From a UX and marketing perspective, this works because:

• It catches users at the right moment — they’ve shown intent by wanting to save.
• The widget appears instantly, offering context and value, not just a cold login wall.
• It nudges users toward account creation in a way that feels like a benefit, not a barrier.
• It creates a natural path toward deeper engagement — newsletters, personalization, and more.

This example shows how on-click popup WordPress plugins can be used not just for sales or email collection, but also for on-site behavior triggers that guide users toward long-term commitment.

Increase Average Order Value with a Smart Threshold Offer

This product page example shows a subtle yet persuasive way to trigger a popup on clicking a button in WordPress — one that nudges users to spend more without pressure.

What to notice
A floating gift icon on the right edge of the screen hints at something rewarding. When clicked, a popup appears informing the user they’ll receive a bonus if their order reaches a certain amount. It doesn’t interrupt shopping; instead, it offers an enticing upgrade.

Why this works from a psychological and UX angle:

• The icon design taps into curiosity — gifts feel fun and desirable.
• The incentive is progress-based, which activates the goal-gradient effect: the closer users feel to a reward, the more motivated they are to complete the journey.
• It appears at the perfect moment — while viewing a product.

With Claspo, you can take this further. By using Data Layer events, your WordPress on-click popup plugin setup can display dynamic content based on user behavior. For instance, instead of a generic ‘spend $50 to unlock a gift’, your widget could say: ‘Spend $50 on puzzles to unlock a surprise!’. If the user is browsing a product in the Puzzles category. 

This small touch makes the offer feel more personal and relevant — improving user interaction and conversion potential. And yes — this level of personalization is available without coding if you already have your Data Layer configured.

Triggering a Popup for Back-in-Stock Alerts

Running out of popular sizes or products? That doesn’t have to mean lost revenue. This example shows how to use a WordPress popup on click to capture demand, not lose it.

What to notice
Instead of redirecting the user or showing a dead-end message, the button opens a lightbox inviting the visitor to leave their email. This does two things at once — sets the expectation that the product will return, and keeps the user in the brand’s ecosystem.

From a UX and marketing standpoint, this is incredibly smart:

• It prevents friction or disappointment — there’s a next step available even when the item is unavailable.
• It creates a clear intent signal — the visitor wants this exact product in this specific variant.
• It captures an email in the moment of high interest — not later, when the user may have forgotten.
• It leverages the ‘fear of missing out’ subtly — making the item feel in demand, worth waiting for.

And all of it is done with a clean modal that feels native to the page — exactly what you’d expect from a good WordPress modal popup plugin, not a clunky redirect or disruptive overlay. It’s a win for both the user experience and the business. Whether you're building your own customizable form or using an on-click popup WordPress plugin, this is a must-have use case for any store that juggles limited inventory or frequent restocks.

Create Demand Before Stock Arrives

Pre-orders are more than just a workaround for out-of-stock items — they’re a smart demand-building tool. This example shows how a WordPress popup on button click can be used to turn anticipation into email leads and early conversions.

What to notice
On the product grid, one item is marked with a ‘Pre-Order’ label. Clicking it doesn’t immediately add the product to the cart. Instead, it opens a stylish popup window inviting users to leave their email for updates or early access — signaling high demand and exclusivity.

From a psychological and marketing standpoint, this strategy hits multiple goals:

• It taps into the scarcity effect — if it’s not available now, it must be popular.
• It makes customers feel in the know — like insiders who’ll be first to get launch alerts.
• It gives the brand a clear indicator of interest before committing to production volume or logistics.
• It avoids cart friction — users aren’t disappointed by hitting ‘add to cart’ only to find out they can’t buy.

Plus, the popup is smooth and contextual — it appears as part of the natural flow, not as an interruption. It’s a prime example of how widgets can enhance user interaction while supporting your sales pipeline.

If you're running a store that relies on limited batches, timed launches, or new product drops, this tactic lets you create popups that serve as mini waitlists — and gives you a ready-made audience for the next launch email.

A Gift-Nudging Popup That Feels Personal

Sometimes your customers don’t want to buy — they want someone else to. That’s where the ‘Drop a Hint’ comes in.

What to notice
In this luxury jewelry example, the ‘Drop a Hint’ button sits quietly next to ‘Add to Bag’. When clicked, it opens a soft, elegant pop-up that helps the user send a not-so-subtle nudge to a loved one. No awkward copy-pasting or screenshots required — it’s a polished way to say ‘I want this’ with class.

Why this works so well from a UX and marketing angle:

• It turns a moment of admiration into a shareable action.
• It extends the reach of your product page to a second, highly relevant person — the gift-giver.
• It reduces friction — everything happens inside a tidy popup, without the need to load a new page.
• It plays into natural behavior around birthdays, anniversaries, and wishlists — without feeling salesy.

It’s a customizable way to blend charm with strategy — perfect for high-consideration items or moments when visitors just need a little help getting what they want.

Using a Popup to Highlight Customer Reviews

If you're in the hospitality game, one glowing review can book a room — and one bad one can cost you a customer. That’s why this popup on click strategy is so effective.

What to notice
In this hotel website example, the star rating and review count aren’t buried at the bottom of the page — they’re front and center, right in the header. Clicking the review link opens a dedicated pop-up showing recent feedback, right where the user is. And for deeper exploration, there’s a smooth transition to a separate page filled with detailed customer experiences. Here’s why this works:

• It puts social proof in the spotlight — when it matters most (while a visitor is still deciding).
• The popup format keeps users on the current page, reducing drop-off or friction.
• It gives a sense of trust and transparency, which is critical in industries like hotels, restaurants, and events.
• The visual design is clean and non-disruptive — users feel in control, not ambushed.

More than just a conversion trick, this is a UX-first way to display a popup that informs, reassures, and persuades — without ever needing to leave the page. Especially in sectors where trust and reputation drive bookings, this is one of the simplest and smartest WordPress popup on click ideas you can implement.

Get Actionable Insights with a Click-to-Open Popup

Want to know what your customers really think — without interrupting their browsing flow? This use case from The Body Shop nails it.

What to notice
A subtle ‘Feedback’ button sits at the bottom corner of the page. It doesn’t scream for attention, but it’s always visible. When clicked, it opens a multi-step popup form where users can quickly share their experience. From rating satisfaction to suggesting improvements — it all happens in a clean, focused flow. Why this works so well from a UX, psychology, and marketing angle:

• It respects the user’s time and space — they can share thoughts when they’re ready.
• The step-by-step structure breaks the form into small actions, reducing overwhelm and increasing completion rates.
• It encourages honest, in-the-moment feedback, which is more valuable than post-purchase surveys.
• For the brand, it’s a goldmine: unfiltered insights that improve products, support, and content.

If you’re wondering how to add a popup on button click in WordPress for feedback, this is the perfect model. It's also a great example of how to open a popup on button click in WordPress without disrupting the journey — especially when you're looking to gather data without annoying your visitors.

Invite Shoppers to Join Your Loyalty Program

Getting someone to join your loyalty program isn’t just about points — it’s about timing, visibility, and ease. This example gets it right.

What to notice
The ‘Loyalty Program’ button floats gently at the bottom of the screen. It’s noticeable but never annoying. When clicked, it opens a popup form on button click in WordPress that gives a quick overview of the perks — without hijacking the page or forcing a redirect. Why it works from a UX and marketing perspective:

• The placement feels optional but inviting — a perfect balance of subtle and strategic.
• It offers immediate value: customers can explore the program in the popup instead of digging through the menu.
• It keeps the main journey uninterrupted — shoppers can view, close, and continue browsing in seconds.
• And from a brand perspective it’s a soft gateway to turn one-time buyers into loyal fans.

If you’re already using one of the best pop-up plugins for WP, this is the kind of feature that’s easy to add — and easy for shoppers to love. Loyalty popups help you stay top-of-mind, collect emails, and turn casual visitors into repeat customers — all without cluttering your site.

Use a Clickable Popup to Power Your Referral Program

When your customers love what you do, they’ll want to tell their friends — you just need to make it easy. This example from MeUndies shows how to do it right with a button-triggered referral popup.

What to notice
A slim ‘Get $25’ tab hugs the side of the screen. It doesn’t compete with the main call to action — instead, it offers a tempting side bonus. When clicked, it opens a clean, branded popup inviting users to join the referral program, share a link, and get rewards. Why it’s smart from a UX and marketing perspective:

• It’s always visible but never in the way — a perfect example of user-friendly design.
• It opens at just the right moment — by choice, not interruption.
• The message is clear, the reward is tangible, and there’s no friction to participate.
• It’s a subtle nudge that can turn happy buyers into brand advocates — organically.

This kind of feature is easy to replicate using a button click popup WordPress plugin — just set a sidebar tab, customize the message, and let your customers do the outreach for you. It’s a great way to keep your referral program working in the background, without overwhelming your site layout.

6 Ways On-Click Popups Are Effective

Let’s take a closer look at why WordPress popups opened on click are so effective.

1. Targeting Warm Leads

Such popups target warm leads — those visitors who’ve already shown interest by clicking a link or button. Since users have taken action, they’re 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, capturing qualified leads at the perfect moment.

2. Higher Conversion Rates with Less Ad Spend

On-click popups only appear after a user clicks a relevant CTA, like "Download Now" or "Get 10% Off," meaning they are shown to people already interested in your offer. This targeted approach leads to higher conversion rates, as you're engaging an audience that’s primed to take action. The best part? Since more of your traffic converts into leads, you spend less on ads, lowering your cost per lead (CPL) and maximizing your return on investment. It’s a smart way to make the most of your ad budget.

3. Efficient Use of Traffic

On-click WordPress modal popups target only visitors who’ve taken action. Instead of showing a generic popup to everyone, you focus on those already engaged, which boosts your chances of conversion. By only reaching users with intent, you avoid wasting impressions and resources on less interested visitors. This efficient approach helps you get more out of your existing traffic, making every dollar spent on driving visitors go further and delivering a higher ROI.

4. Reduced Ad Spend Waste

By ensuring that a higher percentage of your paid traffic takes meaningful actions (such as subscribing, purchasing, or engaging further with content), you make your ad spend more efficient. By focusing on engaged visitors, you spend less to reach your conversion goals, driving down your cost per acquisition. A click-triggered popup can be the difference between losing an interested visitor and converting them into a customer, ensuring you get the most out of your marketing dollars.

5. Lower Bounce Rate and Abandonment

Traditional popups that pop up instantly can drive users away, increasing bounce rates and wasting valuable traffic. In contrast, click-triggered popups appear at just the right moment — when users are already engaged. This thoughtful timing helps keep visitors on your site longer, reducing bounce rates and providing more chances for conversion. With fewer users abandoning your site, you can extract greater value from each visitor, ultimately lowering 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 pop-up in WordPress, we’ve laid out all the steps and included some examples to help you design eye-catching popups that grab attention and boost conversions.

6. Nurturing Leads Without Additional Cost

When users engage with click-triggered popups and join your email list, you open the door to nurturing those leads through automated email marketing — an approach that’s much more cost-effective than continuous paid ads. This means you can maintain engagement without the constant need to spend on advertising. Instead, you can focus on crafting 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're not sure how to add an email subscription to WordPress, we've detailed all the steps and provided some interesting examples to make the process of creating subscription forms easier for you and help boost conversions.

Additional Tips for Button-Triggered Popups

Triggering a widget with a button is an effective way to target only interested audiences. You can also increase the widget's chances of success by adding additional display rules. With Claspo, you can easily customize options like:

• Targeting specific visitors: Choose to show widgets based on visitor location, whether they’re new, returning, or even by referral source.
• Device targeting: Display widgets on desktops, mobile devices, or both.
• Frequency control: Decide how often your widget appears — just once or at regular intervals.
• A/B Testing: Experiment with different button designs, popup content, and trigger actions to see what resonates best with your audience. Claspo has built-in A/B testing functionality. You can test two or more widgets and get automated results.
• Analytics еracking: Use Claspo’s built-in analytics to monitor popup performance, track conversions, and make data-driven adjustments. You receive performance data for each widget, which is continuously updated and presented in easy-to-read charts with separate metrics for mobile and desktop views.

How to Create a WordPress Popup on Click Using HTML Code

If you want to know how to create a pop-up in WordPress without plugins, follow these 3 steps.

Step 1: Create the Popup in Claspo

Before embedding a popup on your WordPress site, you need to create it within the Claspo dashboard.

1. Create a new popup widget. On the Claspo dashboard, click ‘Create New Widget’ Choose the type of popup you want (e.g., lead generation, discount offer, newsletter signup). Select a pre-designed template or build a custom popup from scratch.

2. Design the popup. Customize your popup by adjusting the elements, as explained in Step 2 of the Creating an On-Click Popup in WordPress using Claspo Plugin.

3. Set popup triggers. In the Triggering section, set your popup to be triggered by a button click:

• Choose HTML element click-based.

4. When you create a button on your WordPress site, you will need to copy its CSS selector and paste it into the appropriate field in the widget settings in Claspo.

5. Save your widget as a draft.

6. To display the popup created in Claspo on your site, you need to install a script. This is a small piece of code that you need to add to the pages where you want the popup to appear just before the closing </body> tag. It doesn't take much time, and your account will have detailed instructions on how to do it.

Step 2: Add the Button and Popup Embed Code to WordPress

Now that your popup is ready, the next step is to add the button to your WordPress page or post.

Add a button as explained in Step 3 of the Creating an On-Click Popup in WordPress using Claspo Plugin.

1. First, open your homepage in a new tab. Right-click anywhere on the page and select the ‘Inspect’ option (it may also say ‘Inspect Element’).
2. In the developer tools, you'll see two panels: the left side displays a hierarchy of the HTML elements, while the right side can be ignored for this task.
3. This layout makes it easy to navigate to the element you need without requiring a deep understanding of HTML. Simply right-click on the desired element, and the developer tools will automatically highlight it.
4. Once you've located the HTML element, the final step is to copy the CSS selector. The link element will have a class, so look for a .button class, which can be used as a CSS selector. 

Finally, copy the CSS selector and paste it into the appropriate input field in your widget settings.

Step 3: Test the Popup

After embedding the popup, it’s essential to test it on your live site.

1. Open the page. Go to the live version of the page or post where you added the button-triggered popup.
2. Click the button. Click the button to ensure the popup appears correctly. Verify that the popup’s design, message, and behavior (e.g., form submission) function as expected.
3. Check responsiveness. Test the popup on different devices (desktop, tablet, mobile) to make sure it displays correctly and does not affect page performance.

Final Words

If you’ve scrolled all the way down, here’s the short version: button-triggered popups work — and we’ve shown you exactly how and why. Whether you want to grow your list, promote a sale, or guide users toward registration, adding a popup on click in WordPress gives you control over when and how your message appears. Instead of distracting visitors, it meets them at just the right moment — on any post or page.

This guide gave you everything from a practical tutorial to real-life examples, plus step-by-step instructions on how to build click-triggered popups with or without code. We even covered how to personalize them, optimize them for different devices, and track performance.

No matter your goal — from driving email signups to encouraging referrals — you’ll find options here that go beyond basics. Try a free version of Claspo to test what works best for your audience. Already using email subscription WordPress plugins or exploring exit-intent popup plugins for WordPress? Button-triggered popups can complement those strategies without creating noise.

And if you’re just getting started or want something easy to manage, a solid Claspo’s WordPress popup plugin will do the heavy lifting — no coding, no stress, just results.