Creating a Sticky Bar in Unbounce

Sticky bars are banners that appear above or below a page's content. They're available for both desktop and mobile landing pages.

This article will explain the following:

• Building your Sticky Bar,
• Setting up your URL Targeting,
• Setting up Trigger & Frequency Settings,
• Enabling the Form Confirmation Dialog Auto-Close Option, and
• Publishing & Installing your Sticky Bar

What You'll Need:

• An Unbounce account with an active subscription. 
• An Unbounce-compatible browser to create your sticky bar by hopping over to Supported Browsers for Building/Viewing Your Content.

---

Building your Sticky Bar

1. Log into the Unbounce Conversion Intelligence™ Platform, and select Popups & Sticky Bars from the left-hand menu. 
2. Click the blue Create New button on the right-hand side. 
3. Select Sticky Bars under Pick a content type:
   
4. Select a template from our assortment of sticky bar templates (or click Blank Sticky Bar if you prefer).
   
5. Name your page to suit your campaign and click Start with this Template.
6. Once in the builder for your sticky back, click Top or Bottom to set your sticky bar to stick to the top or bottom of your web page.
   
   
7. Design your Sticky bar however you'd like, using the Desktop and Mobile toggle buttons to switch between Desktop and Mobile versions of your sticky bar.
   • If you're new to the Unbounce Builder, check out the Main Features of the Page Builder for some pointers. Learn more about editing the mobile version of your landing page without changing the desktop version within our documentation. 
   • By default, the width of your sticky bar is 800 pixels. To adjust the width/dimensions of your sticky bar,
     1. Navigate to the Sticky Bar Properties panel on the left-hand side of the Builder.
     2. Locate the Geometry section. 
     3. Type in the sticky bar's width.  
8. When you're done, click the Save button at the top right corner:
9. Navigate back to the Sticky Bar Overview page (by clicking the Overview button at the left-hand corner of the builder) to edit its trigger settings and frequency. 

---

Setting URL Targeting

1. Navigate back to the Overview of your sticky bar.
2. In the URL Targeting section, enter the domain where you'd like your sticky bar to appear (in other words, your web page's address):
   

3. Add in the URL paths of your domain where you'd like your sticky bar to be shown. Such as www.yourawesomewebsite.com/signup:
   
   You can also select the page(s) of your domain on which you would like your sticky bar not to show.

See Targeting Your Popups/Sticky Bars to learn more about URL targeting. Do note that Advanced URL Targeting is available for Optimize 2024, Accelerate 2020, and Concierge plans only. 

---

Setting the Trigger and Frequency

1. In the Trigger section, choose when you'd like the sticky bar to appear on the page.
   
2. In the Frequency section, choose how often your sticky bar will be shown to visitors:
   

Trigger Functionality

Trigger on Arrival ("When a visitor arrives on the page") 

The sticky bar will appear on the page right when the visitor launches the landing page or website. 

Trigger after a Delay ("After a delay of __ seconds") 

The sticky bar will appear on the page after the allocated number of seconds has passed. 

Trigger on Exit ("When a visitor tries to exit the page") 

The sticky bar will trigger by cursor movements that signal a page exit (e.g., mouse movement out of the browser window).

Trigger-on-exit sticky bar will launch 1.5 seconds after a cursor moves to the left, right, or bottom borders of the screen, and they will launch immediately when a cursor moves up into the first 20 pixels at the top of a user's browser.

To cancel this trigger, your user must continue scrolling on the page or move their cursor to the middle of the screen. Do note that this trigger setting only works on desktop devices.

Trigger on Percentage Scroll: ("When a visitor ___ percent of the way down the page")

The sticky bar will trigger when a page visitor scrolls down a certain percentage of the page. For example, if it's set to 25, then the visitor will see the sticky bar after they scroll down a quarter of the page.

Trigger on Click: ("When a visitor clicks an element with [ ] of [ ]") 

The sticky bar will trigger with a clickable element on your website, such as a button, a text link, or a photo.

To enable this feature, find the CSS selector, ID, or class of the element on your page that you'd like to trigger with the sticky bar. 

Keep in mind that if multiple elements are using the same selector, ID, or class will all trigger the sticky bar when clicked. If your trigger element has a default click action (for example, a link to another page), this will still fire in addition to your sticky bar being triggered. 

Sticky Bar Functionality 

Once a visitor is converted on your sticky bar, Unbounce will not show the sticky bar to that visitor again.

For example, if your sticky bar's conversion goal is a button click, and your visitor clicks on that button, then they will no longer see the sticky bar, since they have completed the conversion action. 

---

Enabling the Form Confirmation Dialog Auto-Close Option

You can edit the form confirmation dialog within your sticky bar to automatically close after users complete a form submission.  

1. In the Form Confirmation Dialog tab for your form, click the Close dialog after __ seconds box under the Behavior section:
   
2. Enter the number of seconds you wish your form confirmation dialog to wait after being triggered before automatically closing, and click Save to finalize these changes:
   

You're done! Your form confirmation dialog will now automatically close after your visitor converts, without them needing to manually dismiss the message.

---

Publishing & Installing your Sticky Bar

Before publishing your sticky bar, you will want to install its embed code on the website or landing page where you'd like this sticky bar to appear.  

1. Scroll down within the Overview page, and click Copy to grab your embed code:
   
   
2. Before you publish your Popup or Sticky Bar, you’ll want to install this embed code to your page.
   • Follow these steps for instructions on installing your embed code in GTM (Google Tag Manager), Magento, Shopify, Unbounce, or WordPress. Follow these steps for instructions on installing your embed code anywhere else.
3. Once you've installed the embed code, click Publish from the top of the Overview page to publish your changes:
   
   
   1. If this is your first time publishing the sticky bar, another window will appear, confirming that you've installed the sticky bar embed code on your site.
   2. Click the Installed. Publish Now! button to confirm the changes. 
      
      

You're all set! To test your sticky bar, load your website or landing page in a new window. Be sure to clear your browser cache and history to test the most up-to-date version of your page. 

---

Check out these best practice/feature guides for some tips and tricks on getting the best conversion rate possible for your sticky bars:

• Best Practices for Creating High-Converting Sticky Bars
• How to Convert More on Every Page of your Website with Unbounce Sticky Bars

See our documentation for more on Targeting Your Popups/Sticky Bars!

Known Issues

• Auto-play for video backgrounds and embedded videos are currently not firing correctly for "Timed" and "On Exit" triggers.

Glossary Terms

Popups & Sticky Bars: Conversion tools that allow you to show relevant, value-driven offers to targeted web page visitors.

Frequency: How often your Popup or Sticky Bar will appear.

Trigger: When your Popup or Sticky Bar will appear.