How Can I Create a Custom Popup Using a Popup Builder
on 24 April 2023, by Bogdan, in Blog, Cloud, Guides
by Bogdan
If you want to direct the attention of your visitors to something going on in your business like an ongoing sale, or sales promotion, or ask them to sign up for something, then you’re in the right place.
You can use a popup builder to create custom popups that easily grab your visitors’ attention and guide them toward taking specific actions on your cool-looking website.
With the right design and messaging, popups can help you increase your conversions, drive more sales, and grow your email list. You can use them to showcase your latest products, offer special discounts, or encourage visitors to subscribe to your newsletter, and more
In this article, we will walk you through how to create a custom popup with the help of Brizy Pop-up builder, included in Brizy Cloud
But first, let us briefly have a look at what a pop-up is and why it is important for your business.
Why your business might need a custom popup
Using custom popups on your website is a smart move that can help you achieve certain goals in your business. A custom popup is a box that “pops up” on a visitor's screen and encourages them to do something specific. For instance, it could be to sign up for a newsletter or to take advantage of a limited-time offer.
By using custom popups, you can significantly increase your chances of converting visitors into customers. You can use popups to promote exclusive discounts, remind visitors of items left in their cart, or provide important information about your business.
Custom popups can also help you capture more leads and build your email list. By asking visitors to fill out a form or sign up for a newsletter, you can get their contact information and reach out to them later. This way, you can generate more leads and grow your business.
So, if you want to promote sales and products, increase your conversion rates, capture more leads, and more, custom popups are definitely worth considering for your website.
Some tips you can use to create high-converting custom popups
Although custom popups are so important to your business, they can also backfire if not implemented properly. Some of your site visitors may find them bothersome or interruptive, leading them to leave your website.
If you want to avoid such problems with custom popups on your website, you must design and show them correctly. Here are some tips that can help you create effective popups that your customers will appreciate.
State your offer and its benefits clearly
To create a custom popup that customers will appreciate, you need to have something valuable to offer. Visitors may view popups as an interruption, so it's important to make it worth their while. Here are some tips:
- Provide your visitors with an undeniable offer – If your offer is not clear, customers may not bother to engage with your popup, or even worse, they may misunderstand it and become annoyed.
- Clearly explain the benefits of that offer – if your visitors understand what they stand to gain from interacting with your popup, they will be more likely to engage with it.
- Use a straightforward call to action – This will increase the chances of the customer taking the desired action, such as signing up for a newsletter, and more.
By following these tips, your customers will be more likely to understand the value of interacting with your popup and take the desired action. In addition, these tips can help build trust with your audience and foster a positive relationship.
Display your popups at the right time
If you don't want your visitors to find your popups disruptive, you must choose the right time for displaying them on your website. You don't want to show them too early or too late during a user's visit, as this could be annoying and counterproductive.
Instead, consider using a timer or trigger based on user behavior to display your popups at the most appropriate moment. This way, you can increase the chances of your visitors being receptive to the message presented in the popup. By improving the effectiveness of your popups, you'll be more likely to achieve your desired outcomes and provide a better user experience for your site visitors.
Conduct thorough testing on your popups
When you create popups for your website, they consist of various parts like headlines, images, offers, form fields, size, timing, placement, and more. Each of these elements plays an important role in how your visitors perceive and respond to your popups.
Even a tiny mistake in any of these components can have a big impact on your popup's effectiveness. So it's crucial to test all aspects of your popups carefully until you get everything right.
When you take the time to make sure everything works together, you'll have a better chance of getting a positive response from your visitors. By doing so, you can increase the likelihood of them engaging with your popups and achieving your desired outcomes.
Optimize your custom popups for mobile devices
Since 60% of website traffic comes from mobile devices, it's important that you also optimize your popups for smaller screens and ensure that they also load quickly.
If your site visitors who use mobile devices will have a smooth and pleasant experience with your popups, they’re more likely to engage with them and do whatever you want them to.
Therefore, it's important to prioritize mobile responsiveness when designing and implementing your popups on your website.
With all that being said, let’s now build a custom popup for your website with the help of a plugin, Brizy Popup Builder.
How to build a Custom Popup using a Popup Builder
In this section, we will walk you through the steps you can use to create any custom popup for your website using Brizy’s Popup Builder.
Introducing Brizy Popup Builder
Brizy makes it super easy to create custom popups that will grab your visitors' attention and get them to do whatever it is you want them to. Brizy popup builder enables you to build a custom popup from scratch or you can load one from its vast selection of pre-made and ready-to-use popup designs.
With Brizy Popup Builder, you can create custom popups for any purpose you can imagine. From sales & promos to newsletter subscriptions, sign-ups, videos, galleries, age verification, contact forms, GDPR-compliant cookie notifications, various call-to-actions, notices, and more.
In addition, Brizy enables you to set various automatic triggers and display conditions for your popups. You can use triggers to determine when and how a popup will appear depending on how a visitor interacts with your website. For example, you can decide that a popup will only appear when a visitor loads a page, is about to exit a page, scrolls a page, and more.
On the other hand, Brizy’s display conditions allow you to decide on which pages, posts, or custom posts you want to display your popups. By default, your popups will be displayed on all pages and posts. You can also:
- Include or exclude specific pages or posts
- Show them only to specific categories or tags, or
- Display popups on specific devices such as mobile or desktop.
The best part is all of your popup projects are stored in one place. This makes it easy for you to invite other team members to manage some of your projects.
So, with all that being said, it’s now time to build a custom popup for your website from scratch.
Step 1: Register or log in to your Brizy Cloud account
If you haven’t created an account with Brizy Cloud:
- You can go to Brizy’s official website and register a new account from here to get started. Put in your email and enter a password. That is all that's required from you.
- You will receive an email notification to verify your registration.
- This will welcome you to Brizy Cloud’s dashboard from where you can create new projects like websites, popups, and stories.
Let’s now create a custom popup for your website from scratch.
Step 2: Start building your popup with Brizy’s popup builder
Take the following steps to build a popup from scratch, add content, and style it. To begin:
- Click the + button to Create New Project and then click the Create button to create a popup or alert to use on external websites. This should create a new popup project on your dashboard, Project #1.
You can give your project a name if you like, for example, Sign-up.
2. Next, hover over your popup Project #1 and click the Edit Popup button.
3. This will land you on the Brizy Popup builder platform, which is quite similar to its page builder. You can click the + button to Start building your popup.
4 Since we’re creating a popup builder from scratch, click the Create your own block and start building your custom popup.
Note: You can step up to Brizy’s PRO plan to get access to a vast selection of ready-to-use popup designs from your popup library. You’ll get designs ranging from discount offers to videos, cookie notices, sign-ups, age verification, galleries, and more.
5. The next will be to add various elements and content to your popup. You can create various popups with Brizy from scratch.
For example, if you want to create a sign-up popup, simply click the Add Elements button at the top left corner of your screen and drag elements to your content area.
- You can add text elements, for the main heading and another one for the description.
- You can also add a form element and an image and start editing.
- You will be able to change font sizes, font family, and weight, add padding, add effects, play around with positioning, colors, background colors, and more to build something simple. Make sure to make it global.
6. You can also click the Close tab to determine how the popup will close. You can allow your visitors to click outside the popup to close it, display a close button, or delay the appearance of the popup for a few seconds.
7. Finally, when you’re satisfied with all the changes you’ve made, click Save Draft at the bottom right corner of your screen to save your popup.
That’s it. You will find your custom popup in the global blocks section of your popup builder. In the next step, we’ll show you how you can set different display conditions and automatic triggers.
Step 3: Set various automatic triggers and conditions for your custom triggers
You can use Brizy’s automatic triggers to determine when a popup will appear. Conditions on the other hand determine where a popup will be displayed on your website.
Set display conditions for your popups
To access the triggers and display conditions, go to your newly created popup settings at the top right corner of your screen and click the popup icon.
You will Display Conditions at the bottom of the window that appears. The number 2 indicates the number of triggers and conditions active on the popup. Click on it.
.jpg)
As we’ve said, display conditions determine the location where your custom popup will be displayed on your website. The default setting is Include All, which means the popup will be displayed on all pages on your website.
Let’s say, for example, you want your popup to appear on your blog page. To do this, just click the dropdown menu and select the page option. Then, click again the All dropdown menu to choose the blog page from the list of all your created web pages.
You can click Add new display condition to display your popup on other pages as well. You can also choose to display your popup on all pages and exclude it only on the contact page. When you’re done click Save.
Set automatic triggers for your popups
Triggers let you determine when a popup will appear on a page. The first thing you’ll do is toggle on the triggers switch and set your triggers.
- On page load — lets you set the popup to display after a few seconds when a web page is loaded.
- On click – allows you to display your popup after some number of predetermined clicks by the visitor on your website.
- After inactivity — determined by cursor movements, for example, when a user stops to scroll, maybe because they’re reading something.
- On-page exit intent – it will show the popup when it determines that the visitor is planning to leave the site
- Show After X – This gives you two options:
a. Page views – enables you to show your popup after a visitor visits a specific page a certain number of times, for example, 3 times.
b. Sessions – you can use this when a visitor comes to your site. For example, if you set sessions to two, it means that your popup will show the third time when a user visits again.
6. Show on device – allows you to show popups on desktop, mobile, or tablet. For example, you can design a popup that’s mobile-friendly and show it only on a mobile.
7. On Scroll – allows you to show when a visitor scrolls your page up or down. For example, you can set on-scroll, down, 50 to mean that when a user scrolls the page down, a popup will appear halfway.
Always make sure that you save your triggers and conditions before setting new ones. Now, let’s publish our popup.
Step 4: Publish the custom popup project to your website
From your Brizy Cloud dashboard, hover over your popup project and click the three dots and select Publish. A page will pop up with an embed code you can copy and use on your website.
Here, you can choose to create your own layout from scratch or import prebuilt layout templates from the Layouts tab.
Conclusion
That’s it. By now you should be confident in your ability to create custom popups using a popup builder. You can effectively use popups to capture your visitors' attention and encourage them to take action on your website which will in turn benefit you and boost your total sales and revenue.
With Brizy’s Popup Builder, you can build custom popups that can help you promote special offers, collect valuable customer details, or simply guide your visitors toward important information.
Article by Bogdan
Co-founder & Head of Design, Bogdan has a passion for everything that works great and looks awesome. Guilty for most of the UI and UX around this place, you can say "Hi" to him at bogdan at brizy dot io
RESOURCES
Choose Roadmap for
You will be redirected to our external roadmap boards on Trello
