How to Create a Website Notification Bar to Keep Visitors Informed

Are you updating your website’s services and looking for the best way to inform all of your clients? Sometimes it can be frustrating to look for the most effective way of communicating this information.

Luckily, there’s an easier solution: website notification bars.

That’s why, in this post, we’re going to explain what a website notification bar is, look at 5 awesome examples of notification bars from popular websites, and show you how to create a website notification bar with OptinMonster.

By the end of this article, you’ll know exactly how to create a notification bar on your website. Then you can update your clients on all of your company’s most critical changes.

Let’s get started.

What Is a Website Notification Bar?

A website notification bar is a small banner that sits on the top of your website and provides your visitors with information without getting in the way of any content. You’ve probably seen these before. They look something like this:

OptinMonster website notification bar

These types of campaigns are effective for sharing information such as:

  • Sharing a new promotional offer
  • Creating urgency with a countdown timer
  • Growing your email list
  • Notifying your site’s visitors about significant changes like new business hours, shipping and purchase information, or new content updates on your site
  • Providing emergency or time-sensitive alert messages
  • Updating your company’s services

And much more.

Today, we’ll be focussing on how you can make a website notification bar with OptinMonster to communicate service changes to your customers.

Let’s get started.

How to Create a Website Notification Bar

Creating a website notification bar with OptinMonster couldn’t be more simple. First, you need to log in to your OptinMonster account:

Then, in the top right-hand side of your dashboard, click Create New Campaign:

Create a new campaign final picture

Now you’ll choose your campaign type. For this tutorial, we’re going to select a Floating Bar:

Floating Bar Campaign min

And then you’ll need to choose your template:

Select your template min

Here’s the cool thing: OptinMonster has over 50 templates that you can use to save time when creating your website banner alert. Because we have so many options, you’re likely to find one that already matches the look you’re going for.

But if you don’t see a template that you like, that’s ok.

You can simply build your website notification bar from scratch and customize it exactly how you’d like with our blank template, Canvas:

Floating bar canvas template for website notification bars

In this tutorial, we’re going to use a template called Alert:

Alert floating bar template

The reason we’re using this template is that it has a bright red color that grabs your visitor’s attention right away.

If you find that you like the template but not the color, that’s ok too. We’ll also show you how you can change the color to match your professional or personal brand’s particular style.

Now, your website notification bar template is in your OptinMonster editor:

Floating Bar in the Editor

The first thing that we’ll do to our template is to change the position and make it rest at the top of the page. To do that, go click Floating Settings on the left-hand side editor:

Floating Settings

Then click the toggle switch to change the position of the Floating Bar:

Put Floating Bar on the Top of the Page

Now your Floating Bar campaign will be on the top of your editor:

Floating bar at the top of the page

Then we need to change the text of your campaign. With OptinMonster’s easy-to-use campaign editor, this is super simple.

Just click the text that you want to modify, and you’ll be able to change the text in the left-hand side menu:

Change the text of your floating bar campaign

Even though we’re using this website notification bar to communicate service changes to your customers, you still want to use a headline that will grab their attention.

In this tutorial, our headline will be fairly straightforward.

But you should consider setting some time aside to come up with good web copy that uses the right language to connect with your audience.

Remember, the language that you use will depend on your overall goal. If you just want to provide your users with new service policies, like we’re doing here, then the language will be more to the point.

But if you’re using your website notification bar to show your customers a new promotion, for example, then you’d want to use web copy best practices. One suggestion is to use power words to enhance your message.

And to help you out, here’s a list of over 700 power words that you can use to make your messages more persuasive.

Again, for today we’ll simply go with a basic announcement just like we would with a typical company-wide service change.

Now it’s time to change the button. If you’re redirecting your visitors to landing pages or a separate site to review your service updates in more detail, the simple default text will likely work just fine.

But if you do want to change some aspect about your button, you simply need to click the button element in the editor. Then you can modify every part of your button in the left-hand side menu, like the text:

Change Button Text for Floating bar

In the OptinMonster editor, you can customize just about anything for your website notification bar button that you want. You can change the:

  • Width
  • Alignment
  • Color
  • Icon
  • Icon spacing
  • Text decoration
  • Border

And so much more.

Edit Button Options

For most of our users, the default text “Read More” will work for basic service announcement updates. So let’s look at some other things you can change for your website alert message.

In some cases, the bright red background might be too bold for the type of announcement that you want to make. In that case, you can change the background color by simply clicking on the background in your editor:

Change the campaign color

When you click on the color icon (shown above), you can choose a color that better matches your brand and message:

Choose your color from the color palette

Ok, at this point, we’ve seen how you can change your website banner alert’s text, button, and background. But what happens when someone clicks on your call to action?

To change what happens when someone clicks on your call to action, you need to click on the button element in your campaign editor. That will pull up the button editing tools:

Button Editing Tools

Then you’ll need to click on the Action tab in the left-hand side editor menu:

Click Action Button

By default, your call to action button will redirect your visitors to another web page. You’ll want to put the URL of the web page with more information about your service changes in the Redirect URL field:

Insert Redirect URL

And that’s it!

You now have a notification bar to let all of your visitors know about important company-wide announcements and service changes.

Now there’s just one more minor change to help you better target your customers. Head over to the Display Settings at the top of your editor menu:

Click Display Rules in the Top Editor

By default, your campaign will appear to visitors who are on your page for 5 seconds or longer. We suggest changing the Is at least setting to Is immediate:

Change to Is Immediate-min

That’s because, for important service updates like we’re discussing today, you should try to make your Floating Bar campaign embed seamlessly with your site.

Avoiding a popup for information without a value proposition will enhance your user experience (UX).

And there you have it. You have a fully functional Floating Bar website notification bar to give your visitors updates.

All that’s left is to hit Save:

Don't forget to save

And publish your campaign! You now have a fully functional website notification bar at the top of your website:

Example website notification bar

You can also rest assured that you’re not the only one using this type of campaign. In fact, loads of big brand names use website notification bars to increase their users’ experience. Check out these 5 examples.

5 Examples of Website Notification Bars Used by Popular Companies

If you’re not using a website notification bar yet, you really should be. And if you’re missing some inspiration on how to build your own, just take a look at how the following 5 alert bar website examples from well-known companies.

Note: Some of these Floating Bar campaigns will extend beyond website alerts. Due to the spread of COVID-19, most campaigns focus on service updates around that situation. To find a wider array of examples, we’ll also be including Floating Bar notifications in the form of promotions.

1. Amazon

Amazon wesbite notification bar

Amazon is one of the biggest businesses in the world. This means if they’re using a marketing strategy, it probably works.

On their site, they use a Floating Bar website notification bar to give shipping information to warn clients about potential delays.

Since they have 150.6 million users worldwide, it’s safe to say that this notification bar is one of the most efficient ways to get their message across.

2. WPBeginner

WPBeginner floating website notification bar example

WPBeginner will sometimes use a Floating Bar campaign to inform their users about specific deals. In the example above, they use an alert banner to reduce shopping cart abandonment.

Highly targeted banner notifications are an excellent way to get the right message to the right people. This not only boosts sales, but it also helps get users back who may have otherwise left without making a purchase.

3. Old Navy

OldNavy Floating Bar at the Bottom of the screen min

When most people hear the term “website notification bar,” they think the campaign must be at the top of the webpage. But as you can see, sites like Old Navy keep their Floating Bar at the bottom.

And you can do the same, even for your alert notifications.

Old Navy informs their users of a site-wide promotional deal to entice users to make a purchase. Plus, they make great use of the 2-step optin process by asking users to simply “Tap” to see more offers.

Thanks to the Zeigarnik effect, Old Navy can expect higher conversions from this campaign. The Zeigarnik effect is a psychological principle that suggests people are more likely to finish a process once they’ve started.

Smart marketers, like those at Old Navy, know how to leverage this tool to their advantage.

4. Great Lakes Student Loans

Great Lakes Website Notification Bar

Great Lakes is a popular company that handles student loans all across the United States. They recently used a website notification bar to inform students that they can put their loans on hold interest-free for the foreseeable future.

Since they handle such a large amount of student loan accounts, they’ve done a great job utilizing this Floating Bar campaign to inform their clients about company-wide policy changes.

5. Apple

Apple Website Notification Bar example min

Apple added a website notification bar to their website. They use this to notify users that while their stores are closed, people can still shop online. They remind users that delivery is both fast and free, which makes a great value proposition for their visitors.

Plus, they included various ways clients can contact the company if they have further questions.

Just like Amazon, if a company as large as Apple uses banner notifications, then these campaigns must be effective.

And there you have it. 5 stellar examples of big brand names using website notification bars across their site to update their users.

But remember, Floating Bars aren’t limited to just informing your site’s visitors about company changes.

You can also use them for promotions, growing your email list, or creating urgency with countdown timers. If that’s the case, you may have one other decision to make:

Do you want your Floating Bar campaign to be on the top or the bottom of your webpage?

Floating Bar campaigns can be placed on the top or bottom of your browser if you’re using them for promotional purposes.

Again, here’s a reminder of the example we saw earlier from Old Navy that keeps their Floating Bar on the bottom of the page:

OldNavy Floating Bar at the Bottom of the screen

So how do you know which position is more effective for your site? We recommend you run an A/B split test and try out both.

Then you can decide which campaign has a higher click-through rate (CTR) and decide which one to keep.

A Few Final Thoughts on Website Notification Bars

While Floating website notification bars are an excellent way to inform your clients about service changes, they shouldn’t be the only campaigns you have on your site.

The best strategy is to have multiple campaigns working together. So you can start with something like we created today in the tutorial:

Example website notification bar

And then you can also increase revenue with a Content Locker, or grow your email list with Lightbox Popups.

Whole Whale, for example, increased their sign ups by 100%, and boosted conversion by 62% with this simple Content Locker:

Whole Whale Obscured Content Locker

You’ll notice at the top they have their optin form. Then, at the bottom, the content is obscured, so users need to sign up if they want to read it.

Shockbyte is another excellent example of the results you can get with OptinMonster. They more than doubled their sales conversion with a simple Exit-Intent® popup. These campaigns target your users who are trying to leave your site:

Exit Intent GIF from OptinMonster

When you’re using OptinMonster, you can easily do all those things and so much more. The point is that you shouldn’t limit yourself to only one type of campaign. Use your website notification bar with other optin campaigns to get the highest conversion rates possible.

Are you all pumped to add a website notification bar to your site? We sure hope so. And if you did get motivated by this article, feel free to share it with others in your network.

Related Content: You may also be interested in this post on how to add a WooCommerce announcement bar to boost sales!

You can also reach out to us on Facebook, Twitter, or down in the comment section below. If you aren’t spam, we love hearing from you. 😉

And for even more tutorials on cool subjects like this one, head over to our YouTube channel. We’ve got some killer stuff over there.

Finally, if you’re serious about driving more traffic to your site, increasing your conversions, and getting more revenue, you need a conversion optimization kit. So why not treat yourself to the best in the business?

Join the OptinMonster family today, and watch your company’s marketing strategy explode!

Nathan Thompson
Nathan Thompson is a father, a writer, and a lover of travel (in that order). When he’s not wrestling with his kids, you’ll likely find Nathan giving his eyes a much-needed break from screens with a good book or planning a family trip with his awesome wife.

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.