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:
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:
Now you’ll choose your campaign type. For this tutorial, we’re going to select a Floating Bar:
And then you’ll need to choose your template:
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:
In this tutorial, we’re going to use a template called Alert:
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:
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:
Then click the toggle switch to change the position of the Floating Bar:
Now your Floating Bar campaign will be on the top of your editor:
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:
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:
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.
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:
When you click on the color icon (shown above), you can choose a color that better matches your brand and message:
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:
Then you’ll need to click on the Action tab in the left-hand side editor menu:
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:
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:
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:
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:
And publish your campaign! You now have a fully functional website notification bar at the top of your website:
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.
NoteSome 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 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 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
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 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 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:
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:
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:
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:
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.
You may also be interested in the following post on
- How to Add a WooCommerce Announcement Bar to Boost Sales
- How to Create a WordPress Notification Bar in Minutes
- 9 Best WordPress Notification Bar Plugins
These posts will help you further understand how floating bars can help you drive sales and how to install them.
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!
