6 Hello Bar Examples That Drive Conversions (with Templates)

A great home page does two main things:

1. Welcomes new visitors to your site and brand
2. Starts them on a journey towards a conversion

But what happens if you want to have this same effect on another page—be that a blog post, product category or landing page? Or even if you just want to make a concise, impactful announcement to cement your messaging on the home page itself?

Adding a "hello bar" can be a great way to do this.

In this post, we'll go into what exactly these are and how you can use them best to get visitors to take action. Plus, we cover six quality hello bar examples—and then round off with some templates you can use to get started with one on your own site 🙌

What is a "hello bar"?

A hello bar is a banner that sticks to the top of your website, which you can configure to appear on any (or specific) pages. The goal is to give visitors a short message, make an announcement, capture lead details, or direct them to a specific area on your site.

If you've not seen one before, here's what they typically look like:

Note: Technically speaking, Hello Bar is a brand name. The usual, non-branded term is "sticky bar" or "announcement bar". We'll use both interchangeably throughout this guide.

What hello bars are used for

You can use hello bars for multiple purposes, such as:

• Make an announcement (like about free shipping, or warn of shipping delays)
• Capture leads by embedding a form and promoting a lead magnet
• Nudge visitors to a specific page, such as a newly launched product
• Encourage sales, by giving visitors a discount code
• Grow CLTV by cross-selling and upselling to existing customers

The beauty of hello bars is that they can also be used to segment different website visitors, and deliver personalized messages based on that. 

For example: the announcement bar on your home page can be used to direct visitors towards a flash sale. Once they're there, you can configure another sticky bar that asks for their email address just in case they don't purchase there and then.

Now we know how hello bars can be used, let's take a look at a few examples of them being used to great effect on real websites

1. Talkspace's "discount code" sticky bar

Collectively, Americans spend 13 million hours per week searching for online discounts. By giving them a special discount while they're already visiting your site, you remove any risk of having them exit your website in search for one. 

Talkspace does this with its simple welcome bar pushing a discount code:

See full example

Talkspace offers a £100 saving with a special discount code, which is visible to anyone visiting their home page. It’s a superb way to drive sales using a hello bar.

But, it doesn't stop there. You'll also see a different code and/or currency, depending on where in the world you're browsing from:

Even more:

Take a look at other pages on the Talkspace site and you'll notice each one has a different sticky bar. The page for their Psychiatry product, for example, has a different offer and coupon code:

While the one focusing on Postpartum Depression is different again:

This personalized targeting makes sure each visitor has an offer they're most likely to be interested in, as opposed to a blanket announcement that only appeals to a small number of visitors.

PRO TIP:

If you're building sticky bars in ConvertFlow, use location and/or page URL targeting conditions to create a similar campaign to Talkspace:

Learn more about targeting in ConvertFlow

2. ShipHero’s webinar sticky bar

Here’s another hello bar example that shows a discount code in action, this time from Shiphero.

This sticky bar, which is also visible from the home page, gives people a coupon code to redeem $100 shipping credit when they join a webinar:

See full example

It works great because not everyone visiting Shiphero's site will be ready to buy there and then.

So, instead of forcing them into an immediate sale to reclaim the discount, they invite visitors to join their webinar instead. They’ll get the discount code as a “thank you” for joining—giving ShipHero an opportunity to really sell themselves in the webinar itself.

3. Amy Porterfield’s podcast hello bar

It’s not just software and ecommerce companies that can take advantage of hello bars.

Take this sticky bar from Amy Porterfield, for example. She uses the space to direct people towards her latest podcast episode:

See full example

Using a hello bar in this way helps your visitors to build trust with you. Directing people to other content, such as a podcast episode, helps them get to know you.

It’s usually the starting point of their journey to becoming a customer. The more they engage with your content, the more they’ll trust you—and the more likely they are to purchase from you when they need your services.

Plus, in this particular example, it's a great idea to actually embed the episode right in the bar itself—reducing the number of clicks needed 🙌

PRO TIP:

Use a custom code snippet to add a podcast episode (or any media) to a sticky bar in ConvertFlow. Just drop in the embed code from your podcast host, and you'll be good to go:

Learn more about adding video and media to a ConvertFlow CTA

4. Studio Grow’s "book a call" sticky bar

Here’s another hello bar example from Studio Grow. However, unlike the other examples we’ve shared so far, this one has a different purpose in that the call-to-action is directing people to book a call:

See full example

It’s worth testing this on your website if your customer journey is long, or involves multiple people. Those buyers might have questions that need answering before they decide to convert.

Making it obvious that they can do that (using a hello bar) will make that process easier for them.

5. Quickbooks’ urgency discount sticky bar

On Quickbooks’ site, you’ll see a welcome bar with a very obvious, hard sell on their products. They mention there’s a hefty saving (90% off usual price) if you buy now:

See full example

What’s interesting about this example, though, is that urgency plays a huge role.

The focal point of the hello bar is a timer: customers can only get the deal if they sign up before the time runs out. This sense of urgency pushes people to convert while they’re on the website, rather than exiting while thinking “I’ll do that later”... and potentially forgetting.

SEE MORE: 3 Proven Steps to Increase Online Sales on Any Website (Checklist Included)

6. Wayfair’s "start shopping" hello bar

So far, most of the hello bar examples we’ve shared have an obvious goal—be that a customer to join a newsletter, listen to a podcast, or take advantage of a flash sale. But, this one from Wayfair doesn’t do any of those.

Instead of asking visitors to convert, they’re simply being nudged towards a product category page on the Wayfair site:

See full example

Or, take it a step further and use data you’ve previously collected to retarget returning visitors with a personalized sticky bar that points them toward the most relevant site section.

As you can see, hello bars/sticky bars are an ideal way to communicate with your website visitors. They're non-invasive, yet still attract attention and conversions—regardless of whether you’re trying to nudge people to buy, subscribe to your email list, or browse a product category.

Ready to get started building a bar for your website?

In the ConvertFlow library, you’ll find several sticky bar templates to work from. Each can be completely customized for your own message, and embedded on your website (without any complex coding).

Here's a few templates to get you started: