Popups have been there for quite a long time, even though they can be annoying to users. However, if you can harness the power of Popups, omitting its (widely used) nature of annoying the visitors to your website, then you’ll be golden, you know?

Well, what are these sticky and floating bars we mentioned? Simply said, they are somewhat like a younger sibling of the good old Popups. These sticky floating bars are innovative since they wouldn’t bother your potential customer if utilized properly and will only show up at the exact time you want them to appear. Furthermore, they take only a portion of the screen by design, and you can place them anywhere you want. 

How to Create a Sticky Floating Bar in WordPress

Imagine how measuring up the correct timing and exact positioning of a great marketing tool/an action taker/lead conversion tool could benefit your business. What is more, you’ll have millions of use cases for sticky floating bars at your fingertips. 

Let’s see how to make your own sticky floating bar in your WordPress website in minutes.

How to add a sticky floating bar to your WordPress site

In this article, we’ll discuss how to create a Sticky, Floating bar in your WordPress website using the FireBox plugin. Despite being relatively younger than most WordPress plugins out there, it’s modern and very powerful, with a convenient interface. You’ll definitely love it. 

Download and Install FireBox

Downloading and installing the FireBox plugin is very easy and will take only a few seconds. First, log in to the Admin Dashboard of your WordPress website.

Then go to Plugins -> Add New

Type “FireBox” in the search bar. In the search results, you can see the plugin “Popup Builder for WordPress – FireBox” By FirePlugins. Click on Install Now. Once the installation process is complete, simply click Activate. 

Upon activating the plugin, you will see a new menu entry called “FireBox” on your left sidebar.

Click on that newly added menu item to continue.

Create and design the sticky floating bar

Click on New Popup on the top menu inside the FireBox dashboard.

Search for a floating bar in the FireBox Library and select Floating Bar. 

Then, you’ll be directed to the design/customization screen of your floating bar. Scroll down to see the available FireBox settings.

Customize and style your floating bar

You’ll be presented with a few vertical settings tabs as Design, Behavior, Publishing Rules, Actions, and Advanced settings.

Design Settings

Here, you can customize the design of your floating bar and how it should be displayed to the visitors.

You can customize the floating bar itself via the customization options such as bar dimensions (width and height), Padding and Margins, Colors (text color, background color), text positioning within the floating bar, and Shadow options. Additional customizations are available for the Popup animations (open and close animations), add and customize borders, add and customize an overlay and background image if needed.

You can also customize the close button (You can choose to hide the close button of the floating bar or show the close button and change its positioning), button colors and add a delay between clicking on and hiding the floating bar from view.

Change the way your pop-up shows up

You can change the workflow of the pop-up from the Behavior tab.

You can select a Trigger point to display a floating bar to the visitor automatically on page load or when a visitor clicks on an element. You can also manually trigger a popup via HTML attributes or via Javascript. Both are available in the Lite version.

Moreover, there are several ways to trigger the popup.  Some of them are 

  • show the Pop Up depending on page scroll depth
  • when a certain element is first visible to the visitor 
  • when a user tries to exit the website (exit intent)
  • when the visitor is detected using an adblocker 
  • when the visitor is idle for a specific period 

You can even customize the position for displaying your floating bar. Available options include three by three (3*3) grid locations. The locations are Top, Middle, and Bottom, with each option having three variations as Left, Right, and Center. (Ex: Top Center). 

Furthermore, there are two variations for the Popup mode. One is to show your Floating bar as a Popup, which will be displayed above all other elements and positioned according to the option you choose. The other is to set the Popup mode as Page Slide, which will show your Floating bar as a slide-in positioned at the top of the page, which will not be positioned consistently, but scrolls along when a visitor scrolls down the page. 

You can even set an opening sound to play when the Pop Up is triggered, along with the option to change the Pop Up frequency and what to do when a visitor clicks on the close button of the Popup.

Publishing Rules

FireBox provides you the option to apply a set of publishing rules, which you can use to apply conditional logic to decide whether to show or not to show the Floating bar according to your needs. You can set multiple conditions and select to show the Floating bar when all the conditions are met, or any of the conditions are true. 

Furthermore, you can choose to show or hide the floating bar when a visitor is browsing a specific menu item(s), on a specific URL, visits on a specified date (using your server’s date-time values), visits on specific time range, and target specific registered users by their role or ID. Apart from that, there are many more conditions to choose from.

These options will be helpful in performing targeted marketing or targeted campaigns only for specific visitors, which is an advanced methodology used in modern marketing. It will help you utilize the best possible leads, resulting in gaining the best sales or lead conversions.

FireBox also offers some advanced options such as custom action listeners, the ability to use custom CSS and JS, and few other options. You can try these options to see how to utilize them to best fit your requirements.

Final thoughts

While you can always create a custom Popup from scratch by coding, using the FireBox plugin is very convenient and could help you get a hassle-free marketing experience. Moreover, there’s no need for any coding nor troubleshooting when using this plugin. Besides, implementing a custom solution when there is a far better solution will indeed be a waste of time. 

FireBox provides many options out of the box and allows you to customize Popups as you wish. On top of that, it offers a number of Popup types to suit different needs. As discussed in this article, you can use FireBox to have a (Sticky) Floating bar in your WordPress website header or footer. You can use this floating bar Popup as a notification bar, a cookie notice (although FireBox has a dedicated template for Cookie notices), a GDPR notice bar, or to display any promotional information such as Coupon codes, auction reminders, or product sale notifications. 

This way, your imagination will only be the limit on what you can do with a Floating bar Pop Up on your website. It offers endless possibilities and can also have a significant impact on your success if utilized effectively.


Co-Founder & Team Leader

Tassos is the co-founder and team leader at FirePlugins. With a background in user-centric design and full-stack development, he is dedicated to ensuring that our products are both intuitive to use and aesthetically beautiful.