6 Website Notification Bar Examples That Drive Leads, Sales & Engagement

Wouldn’t it be nice if you could give website visitors a subtle nudge to take your desired action? 

The good news is, you can with a website notification bar. 

Think of a website notification bar as the ultimate user experience (UX) design feature to point website visitors where you’d like to direct traffic, whether that’s to a limited-time offer or a blog post that explains your latest product update.

In this post, we’re sharing what a website notification bar is, some potential use cases, as well as six examples to inspire you. 

What is a website notification bar?

A website notification bar is most commonly placed at the top or bottom of the screen to draw visitors’ attention to a specific update or message. Also known as a banner bar, sticky bar, or announcement bar, a website notification bar is typically used to promote an ongoing sale, upcoming campaign, updated product feature, or similar announcement.

Most notification bars only take up about 5% of a webpage; however, there’s a ton that can be done within that small space. From font size to color scheme and clever copy, an effective notification bar will stand out from the rest of the website without disrupting a visitor’s experience. Considering not every notification is relevant (or riveting) for every visitor, being non-disruptive is a major benefit. 

Website notification bar use-cases

Have you ever wondered why massive brands like Nike use a website notification bar to announce just about everything?

t’s because these brands know that nine times out of 10, an announcement made through email will land in the promotions folder, never to be seen again—or worse, the constant flurry of brand emails will force a customer to unsubscribe. 

A website notification bar is the most non-disruptive UX pattern, but it’s also the first thing a customer will read when they enter your site. It’s practically guaranteed that a website visitor will acknowledge your announcement via a notification bar, whereas communicating via other marketing channels, like email or SMS messaging, can be increasingly hit or miss. 

Take a look at the most common announcements made via a website notification bar.

• Capture leads. Whether you are promoting an ebook, a white paper, or just want to get more demos, a notification bar can help you get more people on your email or SMS list. With rising ad costs and iOS privacy updates, first-party data has never been more valuable and important. 
• Share a coupon code. This is one of the most common use cases, alongside free shipping, on ecommerce websites. 
• New feature or product launch. Many SaaS companies will use sticky bars to drive awareness and adoption of new features and products. 
• Provide shipping information. Whether you are promoting free shipping for all shoppers or once a shopper hits a certain price threshold, this is another common use case for sticky bars. If you use Shopify, our integration allows you to personalize the copy in this notification based on the total price of the products in a shopper’s cart.  
• Promote an upcoming event. Hosting a big webinar, virtual summit, or in-person event? A sticky bar can drive more signups. 
• Drive urgency with a countdown timer. This is particularly useful for flash sales, lightning deals, and other limited-time offers on ecommerce sites.

Thinking of adding a notification bar to your website? Check out these six examples of effective notification bars for some extra inspiration.

1. ApproveMe flash sale website notification bar example

ApproveMe is an eSignature platform that allows users to create, collect, and organize UETA/ESIGN compliant electronic signatures with a variety of powerful integrations.

The first thing visitors see when entering the ApproveMe website is a sticky navigation bar (read: the bar will move with readers down the screen) accompanied by a countdown timer:

With copy that reads "LIMITED TIME: Save $1,099 this Flash Sale," ApproveMe leverages two of the most fundamental marketing principles:

1. Urgency
2. Price

As soon as a visitor enters the site, they know exactly how much money they can save. The countdown timer creates a sense of FOMO since they know the deal won’t last forever. A quick look at the three bullet points in the notification bar reveals other details of the promotion, like a 14-day risk-free guarantee.

According to Kevin Michael Gray, founder of Approve Me Technologies, adding a sense of urgency with the countdown timer in the notification bar caused a whopping 69.7% increase in daily revenue 😱

Note that the targeted website notification bar is also paired with a time delayed popup:

This reiterates the details of the current promotion for visitors that veered away from the home page. 

2. Tushy coupon code notification bar example

A bidet attachment might be one of the last things you’d think to get your significant other for Valentine’s Day, but Tushy found a way to make it work. They use a combination of clever copy and an eye-catching banner color in their sticky bar to draw attention to a Valentine’s Day Sale:

They take this a step further by making the discount 14% to go alongside the whole Valentine’s Day theme. 

But, it doesn't stop there.

This sticky bar rotates through three messages. Another one promotes free shipping, while a third message is particularly effective at driving more people to their SMS marketing list:

In fact, this "Get $5 off sent to your phone" promo leads to a landing page with further clever copywriting:

Tushy can use subscribers’ phone numbers to send delivery updates, poop memes, and run upsell, cross-sell, and various customer loyalty campaigns. 

3. Kohl’s free shipping website notification bar example

Kohl’s is the largest department store chain in the United States—and if the brand wants to avoid major bankruptcy à la Sears, its marketing efforts must remain up to par.

So, it’s a no-brainer that Kohl’s adopted a similar carousel-style website notification bar as other best-in-class retailers, like Nike. But, this has an interesting twist.

The home page features a stagnant website notification bar above the main nav in the header and a dynamic website notification bar in the footer:

The notification bar in the header lists three different announcements: free shipping, free store pickup, and a Kohl's Cash® offer. The dynamic footer bar spotlights each of these three announcements on a rotating carousel.

When a visitor scrolls through the home page, the footer remains sticky while the main nav and header notification bar disappears. Of the two website notification bars, the footer is dynamic, so it definitely makes sense to choose that one to remain on-page.

When a visitor enters a category page, only the header notification bar with all three promotions remains:

While this might seem like information overload for the consumer, it’s actually quite simple. Kohl’s continuously reiterates the same three announcements, just in different formats.

In this way, the brand can guarantee at least one announcement will apply to a website visitor, whether they’re a store member or a potential new customer looking for a discount.  

4. Grace & Lace discount notification bar example

Grace and Lace, a women’s fashion boutique, is leveraging its sticky bar, alongside the main banner on the home page, to run an as-is sale:

In Q1, many ecommerce businesses, like Grace and Lace, face the killer trifecta of:

1. Holiday returns
2. Inventory shrinkage
3. Slower sales after the busy holiday shopping season

In fact, 15% of US retailers experienced an inventory shrinkage of 3% or higher in 2020. 

This campaign is a clever way to recoup some of the costs of inventory that is slightly damaged or imperfect but still sellable, as well as free up valuable warehouse space for the upcoming spring collection. 

Similar to other examples in this post, this sticky bar rotates with different messaging. One of the other sticky bars encourages visitors to get on Grace & Lace's SMS list:

With most texts getting opened in minutes and first-party data even more valuable, this is a trend that will only grow in 2022. 

5. Mailmodo SaaS signup notification bar example

You’d be hard-pressed to find a more competitive niche than email marketing software. As an email marketing platform, Mailmodo faced an uphill battle to not only stand out in a saturated market but drive signups on a product with high switching costs.

One of the ways Mailmodo does this is by using a floating sticky bar on the footer of its product feature pages to drive more signups:

In fact, the bar becomes visible only after a person has scrolled past the first fold of the page. For a user who is already engaged to a degree, the notification bar works towards converting them to a product signup.

According to Anushree Sadhu of Mailmodo, this single optimization has led to consistent 2-3% signups from these pages.

6. FreshBooks urgency-based notification bar

The FreshBooks brand has become synonymous with accounting software. But if you’re a business owner yourself, you know that these solutions can quickly become costly.

What better way to boost sales than by running a 60% promotion—and then advertising for said promotion with an eye-catching website notification bar?

Though FreshBooks’ notification bar uses the same color scheme as the home page, it’s the bold text that grabs a visitor’s attention. Like ApproveMe, FreshBooks relies on the primary marketing principle of promotion and uses timeliness to evoke a sense of urgency.

The larger font of “BUY NOW AND SAVE” is both self-explanatory and self-selling.

Like many of the above examples, the FreshBooks website notification bar is right above the main navigation bar. Though the main nav is sticky, the notification bar is not.

However, the verbiage listed in the notification bar is also prominent on the home page above the fold, making it difficult for website visitors to avoid this limited-time offer.

Ready to create your own website notification and sticky bars? 

This process is easier than ever with ConvertFlow’s sticky bar templates. Each of which can be configured to drive more email signups, share coupon codes, display free shipping details, and more.  

You can also change the copy, links, colors, and signup forms to drive more visitors to take your desired action. 

If you are a Shopify customer, you can even use ConvertFlow’s Shopify integration to further personalize the information a visitor sees in your sticky bar based on what items are in their cart 🙌

Here are a few templates to get you started:

‍