How to create & deploy HTML popups on any site

on 25 May 2023, by Bogdan, in Blog, WordPress, Cloud, Guides

by Bogdan

Looking to convert more site visitors? HTML popups are perfect for you. In this article, we’ll walk you through how to create and add a popup to your website using a no-code white-label popup builder.

Popups are a critical part of digital marketing today. Whether you’re a digital marketing agency, content creator, or startup entrepreneur, HTML popups can help you to convert more site visitors. There are tons of popup builder solutions that can help you to do this code-free, but a no-code popup builder is the best way to go as it will allow you to market it as your own.

We’ll show you how to do all of this using the Brizy external popups solution. To kick us off, let’s first understand why popups are so important.

Video version of this article

Why are HTML Pop-ups so important?

Popups are one of the most effective ways to convert the traffic coming to your website. The average conversion rate for all websites is about 2–5% but you can double this to about 11% by using popups effectively. Apart from optimizing conversions, HTML popups can also help you to:

Generate leads - To collect information on site visitors such as their emails. This helps to get site visitors interested in your product or service, making them prospective buyers. You can then nurture them towards making a purchase via email marketing.
Promote special offers - Popups are an effective way to highlight limited-time offers, discounts, or promotions. They help to draw the attention of customers to your promotions, and since customers are always looking for deals, this can lead to more sales.

To promote user engagement or interaction - If you include surveys, feedback forms, or quizzes, you’ll be able to initiate interactions and engage visitors on your website.
To encourage newsletter subscriptions - You can also use popups to encourage site visitors to sign up for your newsletters so that you keep them informed on your product launches, new content, updates, etc.

This is simply a brief overview; there are other numerous ways in which you can utilize popups. Having said that, we can now look at why a white-label HTML popup builder is a great solution for businesses.

How to Create HTML Popups with Our No-Code White Label Website Builder

In this section, we’ll walk you through a step-by-step process on how to build an HTML popup with our no-code white-label website builder - Brizy.

Build high converting popups with Brizy No-code Popup Builder

Brizy Cloud’s external popups builder is our solution for digital marketers, ecommerce site owners, or web designers who want to build HTML popups for their websites or clients. With the external popups builder, you can create any type of HTML popup including sales and promotions, newsletters, sign-ups, age verification, and more.

With the Brizy Cloud’s external popup feature, you’ll be able to do the following:

Build custom HTML popups quickly and easily

The popup builder has an extensive library of ready-to-use popups for any use case you can think of, for instance, lead capturing, cookie consent, etc. All you have to do is select one and customize it to your liking. And you can do this directly from the Brizy builder and see a live preview as you make your changes in real time.

If you want an entirely custom HTML popup, you can build one from scratch. You’ll be able to customize everything, from setting the stilling to deciding the positioning of the close button.

Take full control over when your popups are displayed

The popup builder has a variety of display conditions and triggers that will help you to decide when your popup is displayed. You can choose to display the popup after a page load or inactivity or when a user expresses the intent to leave your webpage. In addition, it allows you to choose how long (in seconds) it will take for the popup to appear after the trigger.

Add your HTML popup on websites built on any platform

Once you’ve created your popup, you can add it to any website, including those created on other platforms like WordPress and Squarespace. We created the external popups feature specifically for this purpose.

Market the popup builder as your own solution

The tip of the iceberg is that you can rebrand Brizy’s popup builder as your own under its white-label offering. You can add your logo, domain name, support links, etc., and resell it as an extension of your services.

This is a brief overview of what Brizy’s external popups solution offers, now let’s dive into the process.

Create an HTML popup

After purchasing your PRO plan, log into your Brizy Cloud dashboard and follow these steps to create an HTML popup.

Click on Create New Project and under Popup & Alert, click the Create button. A new project will be created for you. Click on the name to change it and then click the Edit Project button to customize your popup.

2. Once the Brizy builder is open, click on the Start Building Your Popup button. If you want to build it from scratch, click on the Create Your Own button. Otherwise, you have the option to select a template and edit it to your liking.

Instead of scrolling through each one, use the filters on the left sidebar to display the relevant categories. This will help you to narrow down your search.

3. Here’s what you’ll be able to do to edit your popup:

You can add elements to your popup by clicking the plus button. This includes textboxes, a map, images, buttons, and so on. All you have to do is drag the element from the elements library and drop it on your popup area.

You can add elements to your popup by clicking the plus button. This includes textboxes, a map, images, buttons, and so on. All you have to do is drag the element from the elements library and drop it on your popup area.
Change the styling of the text including the font family, size, typography, and weight.
Edit the sizes of the elements using relative units like em, rem, and vw.
Edit the positioning of elements using simple drag-and-drop.

4. Once you’re done making your changes, click on Publish on the bottom right. For subsequent changes, you’ll need to click on Update.

Step 3: Configure when your popup will appear on a webpage

The external popups feature allows you to select when a popup will appear on a webpage using triggers. To do this:

1. While you’re in the popup builder, click the settings icon on the top right. Click on the Popup option (left-most).

2. Click on the Close tab to access the Close settings. Here you can allow users to close the popup by clicking outside it. You can also delay displaying the close button to force site visitors to look at the popup for a few seconds before the close button appears.

3. To select when the popup appears, click the Popup tab and select Display Conditions. This will give you access to the triggers.

4. If you want the popup to display only once, click on the Trigger Popup Only Once toggle switch.

5. While still on this page, you can add any the following trigger options.

Trigger popup:
On page load
On click.
After inactivity.
On page exit intent.
And more.

6. Click Update when you’re done with your changes.

Step 4: Invite clients or collaborators to receive feedback

Before finalizing your HTML popup and adding it to a website, you might need to get feedback from clients or your partners. To do this, you can invite them to a project as team members. To invite clients or collaborators:

1. Click on the dropdown menu at the center of the header and select Create New Workspace. Add the specific client’s project to this workspace.

2. Click on Team Members (top right) and add the client’s email address.

3. You will see a dropdown next to the email field, click on it and assign your client a role, for instance, ‘Editor’.

4. When you’re done click Send. Brizy will send an email notification to the client inviting them into the workspace.

Once they accept it, they will be able to join the workspace as team members and have a preview of the popup. However, they won’t be able to create new projects for themselves. If they want a new one, they have to contact you to do it for them.

Step 5: Add the HTML popup to a website

The external popups feature allows you to add this HTML popup to a website not created on Brizy Cloud. For this tutorial, we’ll show you how to do this using a WordPress website.

From your Brizy Cloud dashboard, hover on your popup project and click the Get embed code link. Copy the code.

2. Log into your WordPress admin area and install this plugin: WP Code (formerly known as Insert Headers and Footers).

3. Once it is activated, go to Code Snippets > Header & Footer and paste the code you copied on the footers section.

4. Click the Save Changes button on the top right and that’s it.

NOTE: You can still add this popup to a website that you’ve created on Brizy Cloud. Just copy the code and go to Settings > Code Injection and then paste the code into the footer section.

Can You create HTML popups with Brizy for free?

Yes, you can. You can build your HTML popup from scratch and add it to a website not created on Brizy Cloud for free. The external popups feature is also included in Brizy Cloud FREE. However, here’s what you won’t be able to do:

You won’t access any of the prebuilt templates. The template library is strictly for PRO users only.
You won’t be able to create workspaces for your clients or collaborators.
You won’t have access to the white-label offering.
Also, you won’t have access to the display triggers that determine when the popup will be displayed.

For these features to be enabled, you’ll have to upgrade your account to any of the Brizy PRO plans here.

Wrapping Up

With Brizy’s external popups feature, you can create attention-grabbing and engaging popups to boost conversions on your website. It allows you to do this quickly and easily, and once you’ve created them, you can display them on websites created on other platforms like WordPress and Squarespace. With its white-label offering, you can resell the popup builder to your clients and increase your services and revenue.

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