How to Build a Popup That Opens on a Button Click- Tutorial
If you are looking for a super-easy tutorial on how to build a popup that opens on a button click, you are at the right place.
Visitors trigger popups with a simple button click to boost conversion rates.
We have a straightforward solution if you lack professional coding skills.
Fortunately, the solution is simple with Popupsmart.
This tutorial will show you how to create a popup that opens when users click on a button.
Why Show Popup on Button Click
Let us clear the air and tell you why on-click open popups are a valuable conversion optimization addition to your website.
-
Compelling Clickable Buttons → A two-step opt-in mechanism empowers visitors to trigger the popup by clicking on a button adorned with a compelling call-to-action, instantly capturing their attention and interest.
-
Harness the Zeigarnik Effect → Unlike traditional popups that merely seize attention, on-click open popups leverage this psychological phenomenon. By leaving tasks unfinished, they instill a sense of intrigue, motivating users to take action and complete the interaction.
-
Deepen User Commitment→ This initial interaction signifies more than just interest—it's a commitment. As the Zeigarnik effect takes hold, users are propelled toward completing the conversion process, ensuring a higher likelihood of successful engagements.
-
Enhanced User Experience → Users actively participate in shaping their experience by initiating the popup, fostering a positive and empowering interaction.
-
Tailored Call-to-Action Precision → On-click open popups allow you to strategically place buttons, ensuring relevance and resonance with your audience, thereby optimizing the effectiveness of your conversion strategy.
-
Seamless Integration Across Platforms → Achieve versatility in your conversion strategy with on-click open popups seamlessly integrated across various platforms, which helps impactful user experience, regardless of the user's device or preferred browsing environment.
How to Build a Popup That Opens on a Button Click- Step-by-Step Tutorial
We will be using Popupsmart to create our on-click popup form.
You can create on-click popup forms or show any popup with a button click on any website, such as showing a WordPress popup form or a Shopify popup form on-click.
Popupsmart is a popup builder that allows you to build modern popups in a simple way and generate leads and sales.
We make sure you achieve your business goals with our user-friendly popup designs and smart audience-targeting technology.
And yes, with Popupsmart, you can create a button and launch your popup campaign super easily by clicking the button. Here's how.
Step 1- Create a Popupsmart Account.
That’s very good and all you need is ready if you have a Popupsmart account.
However, if you don’t, you can simply go to the Popupsmart Register page.
With your first name, last name, and email address, you are set to go.
To integrate your Popupsmart account with your website, you can use your Embed Code on the left sidebar.
Copy your embed code and paste it into the source code of your website.
For a clear process, you can check How to Embed the Code on your Site.
Or, there is a chance to set up your Popupsmart account with Google Tag Manager as well.
To create your first popup campaign, here is a helpful video for you to check:
Step 2- Create a New Campaign.
After you view your dashboard, there is a button to create a new campaign as “+ New Campaign”. Click on it.
Then, you should name your campaign and save the changes by determining your website.
Step 3- Choose a Popup Template.
When you move forward with your campaign, there are many different templates that you can choose from.
If you want to see templates beforehand, check Popupsmart Playbook now.
Otherwise, the very first step of your campaign is to decide the templates to start your campaign.
If you want to go with a blank template, there are also different blank popup templates, too.
You can choose a blank template and fully customize it by yourself.
Step 4- Customize Your Popup Campaign.
With the 1st and 2nd steps, you can customize your popup body and style it as you like.
You can check Popupsmart elements to add.
That’s how you can diversify your campaign to interact with your visitors.
The customize step and style step work coordinatively. However, they address different areas effectively.
Step 5- Add ‘On-Click Targeting’ on the Segment Step.
When you go to the Segment step, add “On-Click Targeting” on the ‘User Behaviour’ section.
By choosing “On-Click Targeting”, you will easily manage to open your popup with a simple button click.
Step 6- Add a Custom Code to Your Website.
To activate your targeting, there is one more thing to do.
Here is the following code to add to your source code of the website:
<button onclick="window.ps.show({ id: xxxxxx });">Open It</button>For the id, you should enter your own id on the On-Click targeting.
For the part, ‘Open It’, you can customize it as you like. Even, you should differentiate it according to the needs of your campaign.
If you are wondering more about On-Click targeting, you can check this out: On-Click Targeting.
Step 7- Save and Publish Your Campaign.
After arranging your campaign’s segmentation, you should save your campaign and move to the next step.
The Publish step is where you overview the campaign details and get ready to publish.
And that’s all!
You can click and activate the popup easily.
The Use of “Teaser”
A teaser is a mini popup that comes before or after the main popup.
It engages with visitors in a friendly way.
It generally remains on the website with or without a main popup.
Using a teaser is effective when you announce a new event, attract your visitors or use a help center to go when you need help.
Since they are tinier, they can be used as a button to click to open a popup.
Therefore, using a teaser will be nearly a solution for opening a popup with a button click for you.
Conclusion
We hope this tutorial clarifies how to open a popup with a button click.
Now you can show a WordPress popup form on click or for any website builder without any plugins.
You will be able to create a popup campaign easily and create a button to click and open a popup.
Popupsmart prepares all the necessary customization and segmentation details for you to set up.
Don’t waste your time and start creating your own popup that works with a button-click.
Frequently Asked Questions
There are a few questions that can be asked when it comes to opening a new popup with a button click. Here, let’s check them!
Is Popupsmart Compatible with CMS to Display Popup Campaign?
Yes, it is. When you decide on creating and publishing your popup, all you need to do is to customize your campaign and make sure that your embed code is properly working on your website.
How Can I Ensure a Seamless UX with Popups?
Focusing on the timing and relevance of your popups is essential. Utilize the features to allow users to initiate interactions when they are ready, reducing the likelihood of interrupting their browsing experience.
Can I Track the Performance of My Popups?
Yes, Popupsmart provides Leads and Analytics pages, where you can monitor metrics such as conversion rates, click-through rates, and engagement data to assess the effectiveness of your popups and make data-driven improvements.
Recommended Blog Posts
If you are trying to leverage your conversion rates with popups, here are some helpful articles you might like:
- How to Create Converting Mobile Popups (Without Lowering Your SEO)
- Email Popup: Complete Guide with 15 Brilliant Examples
- Popup Video: How To Add One To Your Website (No Coding)
- How to Handle Popup Windows in Selenium- Details & Methods
- How to Add MailChimp Popup to WordPress with Practical Steps
