Display a bar to collect emails, grow lists, and message your visitors. Whether you're looking for a quick and easy way for visitors to opt in to your blog's newsletter, inform your customers of free shipping, bring awareness to your new privacy policy, or promote your new business hours, there are all types of ways bars can be a stellar add-on to your site.
The fine print
- Bars remain in place as a visitor scrolls on your page and can be closed by clicking the X at the right of the bar by default. Learn more on positioning your bar below.
- Bars stick to the bottom of mobile browsers by default as the bottom of a mobile device's display is most easily accessible.
- If dismissed, a bar will reappear upon page reload or any other page it is present.
Create a new bar
- Navigate to Conversion Tools in your navigation menu, then click Alert Bars.
- Select Create New Bar and name your bar.
Bar layouts and click events
To access bar layouts, select the Layout tab from the left pane of the builder. To change the layout of your bar, simply click on a different layout display.
Opt-in
With the opt-in bar layout, you have the ability to collect opt-ins from visitors.
To edit your integrations and fields in the opt-in bar layout, simply hover over the form and click Edit Integrations or simply click the form field or call-to-action button.
Your form settings will open on the left-hand side and you can customize your integrations, form fields, and follow-up sequence (i.e. thank you page, lead magnet).
If this is your first time connecting an integration, or you'd like to connect another account or new service, click here for more information.
Bars will default to only include an email form field. While it is possible to add more fields to your bar, we recommend not exceeding two fields on a bar.
Editing form fields on a bar is similar to that of a form widget. Click here for more information.
Under ③ ACTIONS you can choose where you'd like to send your visitors after they opt in to your bar as well as attach a lead magnet.
We have a resource for each of these actions here:
Button
You can send visitors to a Calendly pop-up, an external URL or a landing page via the button bar layout.
To edit the click event for your button, simply hover over the button and click Add Click Event.
You have the option to send visitors to "Open a Calendly pop-up," "Link to an external URL" or "Link to a landing page." Once you've selected your event and either pasted your URL or selected a page from the list of landing pages, click Save.
Text link
Just like the button layout, the text link layout gives you the ability to link a visitor to a Calendly pop-up, an external URL or a landing page.
Hover over the text link to edit your click event and follow the steps as laid out for the button layout to select and save a click event.
Text
The text bar layout is great for getting messaging and announcements out to your visitors. Just like the button layout and the text link layout, the text layout also gives you the option to link a visitor to a Calendly pop-up, an external URL or a landing page.
To link your text, select the text you'd like to link, then click the link icon.
Bar position
Bars are positioned at the top of a page and remain in place when scrolling by default. However, by clicking the Settings tab and navigating to "Position," you can choose to reposition your bar.
Select "Top" or "Bottom" to decide where you'd like your bar to appear on the page.
Leave the "Remain in place on scroll" toggle on if you'd like the bar to remain in place, always at the top of the page, when scrolling. Toggle it off if you'd like the bar to scroll away as a visitor scrolls down the page.
Editing, formatting and styling
Headline Swap
Our Headline Swap feature also works with Alert Bars. Use it to craft unique and eye catching copy for your Alert Bar text. This is available on all plans.
Bar color
To change the color of your bar, select the Settings tab from the left-hand side of the builder. Use the "Background" color picker to choose from your brand colors, a few default colors under "Recent Colors," or click ADD next to "Recent Colors" to enter hex codes or select a different color/opacity for your bar as seen here:
Text editing and formatting
To edit any text or change its color and styling, simply select the text with your cursor or simply hover over the element and click the pencil icon.
When editing button text, select the text, then click the font icon (Aa).
You can link any text in your bar to a Calendly pop-up, an external URL or to a landing page. Highlight the text you’d like to turn into a link, then click the link icon in the widget settings panel. Once you've selected your event and either pasted your URL or selected a page from the list of landing pages, click Save.
Button style
If you have a button on your bar, click the button or hover over it and click the "customize button" to adjust its settings as shown here: 
On the next screen you'll see the various button style options as shown here:
The color picker allows you to choose from your brand colors, a few recent colors, or click ADD next to "Recent Colors" to enter hex codes or select a different color/opacity for your button as shown above. Change tabs between "BKG" and "Text" to edit the background or text colors on your button.
Tracking
If you're looking to include third-party tracking code on your bar, navigate to the Settings tab on the left-hand side of the bar builder.
Paste the code where the provider recommends, then click Save.
Publishing
To publish your bar on a page, you'll use an embed code. You can then publish that embed code wherever you'd like your bar to appear.
For publishing Alert Bars to Wordpress, see this article here: Publish Alert Bars to Wordpress
Get embed code
If it's your first time publishing your bar or you're inside the bar builder, you'll simply click Publish or Update at the top-right corner of the builder to access your bar embed code.
You can also access your bar embed code from your account navigation menu by selecting Conversion Tools, then Alert Bars.
From the action menu more of the bar you’d like to publish, select Publishing Options then Copy Code.
Leadpages landing pages and sites
To publish a bar on a landing page or site, navigate to the Settings section on the left-hand side of your page's builder, then Analytics.
Paste your bar embed code in the section labeled "Immediately before the closing <body> tag." Click Save and Update your page.
External site
We recommend pasting your bar embed code before the closing </body> tag on your site or blog.
For step-by-step directions on embedding a bar on your site, it's best to consult with the experts on the support team of whichever site builder you use.
Frequently asked questions
Can I use this bar in addition to the bar I already have inside my website builder?
You can certainly try! We can't guarantee that the two will play nice together. From a marketing standpoint, we'd recommending using one or the other not to overwhelm your visitors.
Need more help?
You can always get in touch with our support team—just click Support in your Leadpages navigation menu, or submit a ticket ↗