How to Create a Floating Bar Campaign

OptinMonster makes it easy to create and display a Floating Bar campaign on your site. Convert subscribers without interrupting their browsing experience, displaying your campaign at the top or bottom of the browser window.

In this article, you will learn how to create a Floating Bar campaign.

Before You Start

Here are some things to know before you begin:

Create a Floating Bar Campaign

To create a Floating Bar campaign, follow these steps:

  1. From the Campaigns screen, select the Create New Campaign button.
    Select the Create New Campaign button to get started in OptinMonster.
  2. Next, select Floating Bar as the campaign type. You’ll be shown the available templates for the Floating Bar type campaign, choose one to begin building your campaign.
    Select Floating Bar as the campaign type
  3. That’s it! You’ll see your new campaign load in the campaign builder where you can customize it.

If you’re serious about jumpstarting your website business growth, then get started with OptinMonster today!

Get Started With OptinMonster Today!

BONUS: Done-For-You Campaign Setup ($297 value)
Our conversion experts will design 1 free campaign for you to get maximum results – absolutely FREE! Click here to get started →

Troubleshooting

Why doesn’t the Floating Bar push the content down when I reposition it to the top of the browser?

The default behavior for the Floating Bar campaign is to push the page content down when the campaign is positioned at the top of the browser.

If you’re seeing the Floating Bar overlay your page content instead of at the top, it’s likely that your site’s theme or styling is interfering with the natural behavior of the campaign. For example, if your site has a sticky header or navigation bar this can result in the campaign overlaying that sticky header or navigation bar.

This can be addressed by adding the following Javascript code to your site:

document.addEventListener('om.Campaign.afterShow', function(event) {
    if (event.detail.Campaign.id == 'zjd3hxxogbfvmy2iz0rp') // your slug
    {
        var campaignID = 'om-'+ event.detail.Campaign.id;
        var campaignHeight = document.getElementById(campaignID).offsetHeight;
        var fixedElement = document.getElementById('top'); //give ID for your fixed element OR document.querySelector('.yourClassName.yourSecondClassName');
        fixedElement.style.top = campaignHeight + 'px';
    }
});
document.addEventListener('om.Campaign.close', function(event) {
    var fixedElement = document.getElementById('top'); //give ID for your fixed element or document.querySelector('.yourClassName.yourSecondClassName');
    fixedElement.style.top = 0;
});

If you can, add that code to your site where you have our embed code. It will help ensure it appears visually as expected.