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.

Create a Floating Bar Campaign

To create a Floating Bar campaign, follow these steps:

  1. First, click the Create New Campaign button on your dashboard.
  2. Next, select the Floating Bar campaign type and any theme.Choose Floating Bar
  3. Then, design your campaign according to the steps in creating your first campaign.Floating Bar Overview
  4. When you’re finished, click Save. 

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.