How to Add a Hello Bar to Your WordPress Site (and Why Everyone is Doing It)

Want to boost your conversion rates? That’s what hello bars are all about. Whether you want to add email subscribers, advertise special deals, drive traffic to a landing page, or make a site-wide announcement, hello bars get the job done.

What are hello bars? Hello bars, more generically called notification bars, are the bars added to either the top or bottom of a webpage to deliver a targeted message. In most cases, they’re sticky, meaning they stay put as you scroll up or down. They usually deliver a marketing message, but their use isn’t limited to marketing, and they are implemented by many, many websites.

Notification bars are popular in part because they can be used to accomplish a variety of goals:

• Run a blog? A newsletter can provide a huge boost in repeat traffic and a notification bar can be used to add email subscribers.
• Have an announcement that you need every one of your visitors to see? A notification bar can display a short message and a link to a page with additional information.
• Running a limited-time promotion? Use a notification bar to let visitors know about the time-sensitive offer.
• Hiring and think your site visitors will want to know about it? Notification bars are a great way to say “We’re hiring!”

Setting up a hello bar is easy and there are several different ways to go about adding one to your WordPress website. However, before you jump into implementation, it’s important to think through and develop a plan for how you will use a notification bar.

Continue reading, or jump ahead using these links:

• Hello Bar: Pros, Cons, and Best Practice
  • How Sites Use Hello Bars
• How to Add a Hello / Notification Bar

Hello Bar: Pros, Cons and Best Practice

Notification bars can be awesome. You can use them to display a targeted message that reaches every visitor. They aren’t obtrusive, yet can be quite eye-catching, and they’re flexible enough to be used to deliver many different types of messages.

However, hello bars can also be ineffective if poorly implemented. If a notification bar is too unobtrusive visitors may ignore it. Popups, long derided as annoying, at least ensure that your visitor must notice your message. If you message is urgent enough to justify interrupting a visitors time spent on site, a popup might be a better option. In addition, notification bars offer limited real estate and are usually only effective delivering a very short sentence and link. If you need to display a more complex message a notification bar may not be up to the task.

With that in mind, here are three things you can do to make sure your hello bar is as effective as possible:

• Make it stand out. Seriously, make it pop. Don’t go crazy, but remember that a hello bar isn’t blocking anyone’s view like a popup, so make it really stand out with strong colors are generous fonts.
• Select notification bar text carefully. If you aren’t a wordsmith, find one. Notification bar messages must be clear, succinct, and powerful to be effective.
• Measure effectiveness and adjust as necessary. Use analytics to track how effective your notification bar is. Then make adjustments and see what happens. Continue to make adjustments until you get results you’re happy with.

How Sites Use Hello Bars

Hello bars are everywhere in the WordPress community and are used for a variety of purposes. Here are five examples of notification bars being used at popular WordPress blogs and companies to get your creative juices flowing.

WPMU DEV

We look no further than this blog for our first example of a hello bar. This notification bar appears if you visit our blog without being logged in. If you want to see it in action, just open up a private or incognito browser window and take a look. After opening the page scroll down until the hello bar appears.

There are a few things you should notice about this hello bar. First, we use a bright color and bold uppercase text to draw attention to the most important words in the message. Second, the hello bar offers something tangible: 14 days of free access and an ongoing discount. Offering something tangible goes a long way toward boosting the effectiveness of a hello bar.

WP Engine

WP Engine utilizes a bold color design and offers a tangible reward. This notification bar is made up entirely of a bold orange color, which makes the entire bar stand out. It appears on the WP Engine blog page and delivers a marketing message that sells WP Engine services based on multiple benefits: a 20% discount, faster sites, and improved conversions.

Personally, I suspect that the performance of this notification bar could be improved. If I worked with WP Engine I would want to perform A/B testing with two modifications to see if the performance of the notification bar could be improved.

1. I would shorten and simplify the message. Selling three different features in one short message is too much.
2. I would increase the font weight and size so that the message is easier to read.

My suspicion is that this particular hello bar would perform better with those modifications, and A/B testing could be used to identify the text and design that produced the best results.

ManageWP

The hello bar at ManageWP takes things in an entirely different direction.

This notification bar is a hybrid design that includes site navigation nested in the notification bar. Much like WPMU DEV’s hello bar, this notification bar attempts to sell ManageWP services with a free trial. However, unlike both WPMU DEV and WP Engine, the ManageWP notification bar is very subdued and blends into the overall color scheme and design of the page.

Since ManageWP has blended the navigation bar into the notification bar, the use of a more subdued design makes sense. In this case, the notification bar exists as part of a core component of the site and not as a standalone marketing widget. Making it jump off the page is unnecessary when the functionality of the navigation menu will naturally draw attention to the message.

iThemes

The iThemes notification bar is a classic example of hello bar marketing. The design of the notification bar causes it to stand out from the rest of the page and the message it delivers is targeted and urgent.

Using a notification bar to deliver a time-sensitive message can be effective as long as it isn’t overdone. Use a notification bar to display a “special” or “limited-time” offer all of the time, and visitors will quickly catch on that the offer isn’t nearly as “special” as you’re making it out to be.

WP Beginner

And now for something entirely different.

The notification bar at WP Beginner takes things in a new direction and promotes new content rather than a product or service. Why is this? The answer has to do with the fact that WP Beginner is an entirely different kind of site than any of the others we’ve looked at so far.

At WPMU DEV, we don’t include any affiliate links in our blog posts. So, while we certainly want you to frequent our blog and read every post, we don’t make money when you read our blog and click on the links in our articles. We are a premium WordPress products company that just happens to have the best WordPress blog on the web. WP Beginner operates on an entirely different revenue model. Their goal is to drive the highest volume of traffic possible to their blog, keep those eyeballs on their blog for as long as possible, and get visitors to click on the affiliate links included in the posts and sidebars.

When you think about the WP Beginner business model, encouraging site visitors to visit other popular, click-inducing content makes a lot of sense. It keeps visitors reading (and clicking) for longer and increases their chances of earning a commission when you buy hosting or a WordPress product from a link on their site.

Hello bars occupy prime real estate on your website. Don’t use them flippantly. Use them to deliver important messages.

To be clear, I’m not criticizing WP Beginner. I point this out to make a related point: Use a notification bar to sell whatever it is that makes money for your business.

That’s the thing you need to take away from these is examples. What is your business built on? How does your website earn money? That is the thing you need to advertise with a notification bar.

• Do you earn money with an email newsletter? Advertise your newsletter with a notification bar.
• Do you earn money by selling products or services? Advertise those products and services with a notification bar.
• Do you earn money with affiliate links embedded into blog posts and article? Advertise your most clickworthy content with a notification bar.

How to Add a Hello / Notification Bar

If you want to add a notification bar to your WordPress website, you’ve got quite a few options to consider. If you like knowing exactly what’s going on in your site’s code and have some basic HTML and CSS skills you could make your own. If you want more functionality, there are many notification bar plugins available from the WordPress Plugin Directory.

There are also several website marketing widget services such as Hello Bar, SumoMe, and GetSiteControl that integrate nicely with WordPress and offer notification bars and other website marketing widgets.

Roll Your Own

Notification bars can be created with pure HTML and CSS. That means you can add one to a WordPress website by modifying just two files: header.php and style.css. As always, before making manual modifications to a WordPress website, always create a backup and set up a child theme.

If you’re already a competent front-end programmer you can check out right now and get to work. However, if you want a tutorial to walk you through the process of creating the notification bar, here are two options to consider:

• How to Make Pure CSS Notification Alerts: This tutorial shows you how to build HTML and CSS alert bars.
• Pop From Top Notification: Chris Coyier’s quick tutorial will give you a way to display a notification bar with cross-browser compatibility that will hide itself automatically after a preset time interval.

Once you’ve created the notification, you can add it to your WordPress site by adding the relevant CSS to your theme’s style.css file and the HTML to your theme’s header.php file.

• Hello Bar

  

  Hello Bar is the namesake after which all hello bars are named. In reality, Hello Bar is one notification bar product, but Hello Bar has been so successful that it has become the defacto name for all notification bars of similar style–much like Klennex, Chapstick, Rollerblades, and Band-Aids are all brand names that are used to refer to entire product categories.

  You can get an original Hello Bar up on your site in a matter of minutes. Hello Bar makes it silly-easy to create a notification bar, and it’s a snap to use with WordPress.

  To get started visit Hello Bar, sign up, connect your website, style your hello bar, and click Save & Publish. Next, install the hello bar you just created in one of two ways: by adding a single line of HTML to your site or by downloading and installing a customized zero-configuration WordPress plugin.

  You can use Hello Bar for a variety of purposes: to collect email addresses, provide a contact phone number, connect to social media channels, display an announcement, or encourage visitors to visit a link. Use Hello Bar for the most common goal: to collect email addresses, and you can have email addresses synced to several popular email marketing platforms including MailChimp, AWeber, Constant Contact, and several others.

  Hello Bar is free to use for up to 10 sites, but includes a Hello Bar logo on each bar. To get rid of the logo or create bars for more than 10 sites you’ll have to sign up for a premium account.

• SumoMe

  

  SumoMe offers notification bars and many other marketing tools. To get started with SumoMe sign up for an account and then add SumoMe to your WordPress website. You can add SumoMe to your site in two different ways:

  • Add a short script right into header.php or to functions.php with the wp_enqueue_script function.
  • With the SumoMe WordPress plugin.

  Once you’ve added SumoMe to your site, you can create a notification bar, an option which SumoMe calls a Smart Bar.

  The bar is highly configurable. You can fully customize the color and message, control how frequently the bar is displayed to the same visitor, integrate with email marketing platforms to collect email addresses, and much more.

  SumoMe is free for up to 1 million monthly pageviews. However, if your traffic exceeds that, if you want to remove SumoMe branding, or if you want access to premium features, you’ll need to sign up for a premium account.

• GetSiteControl

  

  GetSiteControl provides the ability to add a notification bar or notification window in any one of nine different positions on a webpage.

  The notification can be crafted to achieve seven different goals: adding subscribers, providing a means of contact, advertising a promotion, linking to a survey, adding social media follow links, adding social media sharing links, or adding a chat prompt.

  That’s a lot of power out of a single service.

  Just like SumoMe and Hello Bar, GetSite Control can be installed by either manually adding a bit of JavaScript to the site header or by downloading and installed a WordPress plugin. GetSiteControl is free to use with one website. However, if you want to manage more than one website from a single account, or gain access to advanced features like A/B testing and branching surveys, you’ll need to sign up for a premium account.

• 8Degree Notification Bar

  

  This WordPress plugin doesn’t boast a lot of active installs or a ton of reviews. However, it is the most powerful, free, general purpose notification bar plugin I tried out.

  After installation, this plugin adds a new top level menu item titled Notification Bar to the admin menu. The plugin can be used to create one notification bar at a time, and there are many available options. One really nice feature offered by this plugin is the ability to display social media icons for your Facebook, Twitter, LinkedIn, and Google Plus accounts right in the notification bar.

  Other option include the ability to display the notification bar just once to each visitor and to give visitors the ability to dismiss the notification bar. You can display a simple HTML message or an email opt-in form. You can move the bar to the top or bottom of the page, adjust notification bar height, change colors, and rearrange the social media icons in any order.

  If you do use the notification bar to display an email opt-in form, subscribed email addresses are saved to the plugin settings page in the WordPress admin area. From there you can download all subscribed email addresses in CSV format and import them into the email marketing platform of your choosing.

• WPFront Notification Bar

  

  If you want to execute custom scripting from a button in the notification bar, WPFront Notification Bar is your best option.

  Installing and activating this plugin will add a new top-level menu item titled WPFront with two submenus. The first is a marketing screen with information about all WPFront plugins. The second, Notification Bar, provides a one-page settings menu from which you can configure a notification bar.

  The settings menu includes many options, including the following options:

  • Enable or disable the notification bar.
  • Position the bar at the top or bottom of the page.
  • Make the notification bar sticky so that it remains in place as a visitor scrolls or choose to display the bar after a visitor has scrolled a certain amount of space down the screen.
  • Configure bar height, styling, offset from the top of the screen, and set the bar to close automatically after a set time period.
  • Only display the notification bar to guests or to users with specific priviledges.
  • Set up a start and end date during which the notification bar should be displayed.
  • In addition, you can configure a button in the notification bar to open a link or to run a bit of custom JavaScript.

• WP Notification Bars

  

  If you’re looking for a dead-simple notification bar to display a short message and link, look no further.

  After activation of WP Notification Bar look for the new Notification Bars menu option in the site admin menu. From there you can control basic notification bar settings such as colors, font size, and width.

  In addition, fields are provided in which to enter a text notification, link text, and a link URL. A few limited settings provide the ability to limit display of the notification bar based on whether pages, posts, or the homepage are being viewed. Finally, you can also limit display of the notification bar to visitors reaching the site from Google or from Facebook for highly targeted messages.

Next Steps…

There you have it. Eight different ways you can add a notification bar to your WordPress website that will help you achieve your conversion goals.

So, what’s the next step?

Before you jump into trying out some of these tools, take a few minutes to think through the goal you want to achieve with a notification bar. What is it you hope to accomplish?

• Do you want to add email subscribers?
• Do you want to drive traffic to a product landing page?
• Do you want to let users know about an important announcement?

It’s important to know what you want to accomplish before you start trying to figure out how to do it. Settle on your conversion goals, and then take the time to see if one of the tools we’ve presented can help you accomplish what you’ve set out to do.

Editor’s Note: This post has been updated for accuracy and relevancy. [Originally Published: July 2016 / Revised: March 2022]

Tags:

• notifications