{"id":18056,"date":"2023-03-22T02:07:44","date_gmt":"2023-03-22T06:07:44","guid":{"rendered":"https:\/\/optinmonster.com\/?post_type=optinmonster_docs&p=18056"},"modified":"2026-01-23T15:27:28","modified_gmt":"2026-01-23T20:27:28","slug":"how-to-create-a-floating-bar-optin","status":"publish","type":"optinmonster_docs","link":"https:\/\/optinmonster.com\/docs\/how-to-create-a-floating-bar-optin\/","title":{"rendered":"How to Create a Floating Bar Campaign"},"content":{"rendered":"\n

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.<\/p>\n\n\n\n

In this article, you will learn how to create a Floating Bar campaign.<\/p>\n\n\n\n

Create a Floating Bar Campaign<\/h2>\n\n\n\n

To create a Floating Bar campaign, follow these steps:<\/p>\n\n\n\n

    \n
  1. From the Campaigns<\/a> screen, select the Create New Campaign<\/strong> button.
    \"Select<\/li>\n\n\n\n
  2. From the modal, select Templates<\/strong> as the type of campaign you\u2019d like to create.
    \"Select<\/li>\n\n\n\n
  3. On the next screen, select Floating Bar<\/strong> as the campaign type.
    \"Select<\/li>\n\n\n\n
  4. You can filter, sort, and search from available Floating Bar campaign templates.
    \"Filter<\/li>\n\n\n\n
  5. Hover over any template in the list to Preview<\/strong> or Use Template <\/strong>to select it and open the campaign builder.
    \"Preview<\/li>\n\n\n\n
  6. Once you’ve selected a campaign you’ll be prompted to give it a name and assign it to a site in your account.
    Select the Start Building<\/strong> button to create the campaign and open it in the builder to customize.
    \"Name<\/li>\n\n\n\n
  7. You can now configure and customize your campaign in the builder, be sure to Save<\/strong> the changes as you work.
    Just getting started?     Follow our guide here<\/a> to customize your campaign, or join a demo<\/a>!<\/li>\n<\/ol>\n\n\n\n

    Reposition Campaign<\/h2>\n\n\n\n

    By default, Floating Bar campaigns appear on the bottom of the page. You can reposition the Floating Bar campaign to show at the top of the page on your site.<\/p>\n\n\n\n

    To reposition the Floating Bar, follow these steps:<\/p>\n\n\n\n

      \n
    1. In the campaign builder, select the Settings<\/strong> icon.
      \"\"<\/li>\n\n\n\n
    2. Next, from the Basic<\/strong> tab expand the Floating Bar Settings<\/strong> option and toggle the Load Floating Bar at top of page?<\/strong> option and the campaign will automatically move to the top of the page.
      \"\"<\/li>\n\n\n\n
    3. When you’re finished, click Save<\/strong>.<\/li>\n<\/ol>\n\n\n\n

      FAQs<\/h2>\n\n\n\n

      Can I reposition the Floating Bar campaign?<\/h5>\n\n\n\n

      Yes, follow our guide here to reposition the Floating Bar campaign<\/a>.<\/p>\n\n\n\n\n\n

      Troubleshooting<\/h2>\n\n\n\n
      My Floating Bar campaign is sitting on top of the header \/ navigation of my site instead of pushing it down.<\/h5>\n\n\n\n

      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.<\/p>\n\n\n\n

      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.<\/p>\n\n\n\n

      This can be addressed by adding the following Javascript code directly to your site. Be sure to update the code as mentioned in the comments:<\/p>\n\n\n\n