[BETA] Sticky Bars added to Convertables

Cole_Derochie

Hey everyone!

I’m thrilled to announce that Convertables are being expanded to include Sticky Bars - and it’s available in Labs today 🎉

What’s a Sticky Bar?

Sticky Bars are a second Convertable type which allow you to add full-width bars to the top or bottom of any, or all, of your websites and pages. They are especially good for getting more leads, directing more traffic, and reaching more of your website’s audience with deals and announcements.

As they are less intrusive than Overlays, you can more easily get your message in front of more of your traffic without interrupting the experience of your website.

We put together this page to showcase the new functionality.. On it, you’ll see we’ve added 2 Sticky Bars:

  1. Bottom Bar set to trigger after scrolling ~75%
  2. Top Bar set to trigger after 30s

**NOTE: Only one Sticky Bar can appear at a time.

How to Enable

Enabling Sticky Bars is super easy. Just follow this link and you’ll be brought to the labs section in Unbounce where you can enable the feature yourself. Once enabled, you’ll see a new option when you click Create New Convertable.

Known Issues

As the feature is still in Beta we are still in the midst of adding some features and functionality you may be looking for. Our known issues include:

  • We do not currently support horizontally displayed forms but the work is in progress.
  • We do not currently support placeholder text for form fields but the work is in progress.
  • Sticky Bars with forms: You will want to ensure your Form Confirmation Dialog is the same height as your Sticky Bar so that content doesn’t “jump” when a visitor converts
  • Form Confirmation Dialogs do not disappear automatically. There is work in our backlog to allow you to set a time for it to auto-close.

Questions or Feedback?

Please share it here! We’re really excited to get you using these and want to know if there are any blockers or essential functionality that you feel is still missing.

Thanks!

12 replies

A

Hey! I’m actually having trouble making the sticky bar opaque. Any ideas why?

Cole_Derochie

Hey @ashitapatel 🙂
Unfortunately we do not currently support transparent backgrounds for Sticky Bars.

You’ll notice that when your page is fully scrolled (top or bottom depending on your placement) the Sticky Bar does not cover your site’s content. That means it is adding the height of the Sticky Bar to the top or bottom of your page (depending on your implentation). If it were transparent there would be an empty space in place of your Sticky Bar’s content.

Could you elaborate on what you are trying to accomplish?

Thanks!

A

Hey @Cole_Derochie,

We have a chat pop-up at the bottom left of our page that’d we’d still like to be visible to customers (easycanvasprints.com). The sticky bar covers it fully.

Cole_Derochie

Interesting @ashitapatel

Thanks for bringing this up.

I’m curious, how would you expect the sticky bar to behave with your chat pop-up?

I’ll bring this up with the team

Ander

Hi @Cole_Derochie ,

Would it be possible to interact between the sticky bar and the main page?
I see it’s an iframe with a URL different of ours and a cross-domain error happens when I try to interact between them. Do you have any solution or alternative?

Thanks!

T

Hi there, I’d like to ask you how can I hide the “x” symbol on the right. I want to be able to keep the bar there without giving the option lo close for users

Ander

Hi @tonyyondo,

Just add this script code in those pages where you dont want the “x” simbol.

     $(".ub-emb-close").hide()

NOTE: The code must be in the page not in the Sticky Bar.

Hope this helps 🙂

T

thanks for your quick answer. Where exactly should I add this code in the page, into the java scripts or in a custom HTML, or in the property page. if you could share a screenshot, showing me the right place well be awesome. cheers.

Ander

Hi again,

Add it into the javascript section:

into%20the%20javascripts

Write the code as you see in the next image (you can change the name) and choose placement “Before Body End Tag”

code

Finge
Userlevel 6
Badge +4

HI @Ander. Do you known a way to hide the X using CSS? I tried the following

<style>
  
  .ub-emb-bar .ub-emb-close {
    display: none !important;
}
  
</style>

When loading the stickybar iframe in a separate window the X is hidden, but when loaded on a page the X still displays.

Finge
Ander

Hi @Finge,

Have you tryed using this CSS in both pages; the main page and the Sticky Bar page?

Finge
Userlevel 6
Badge +4

Thank you @Ander. I just realized this yesterday. All is good now 😉

Finge

Reply


Terms & ConditionsCookie settings