Why You Should Add a Hello Bar to Your WordPress Website and How To Do It

Last Updated on January 4, 2023 by 49 Comments

Editorial Note: We may earn a commission when you visit links on our website.
Why You Should Add a Hello Bar to Your WordPress Website and How To Do It
Blog / Tips & Tricks / Why You Should Add a Hello Bar to Your WordPress Website and How To Do It

A hello bar is a great alternative to using a pop-up, an option that is unpopular with so many. Hello bars are less obtrusive, yet are constantly on display. This means you can present a specific message to your visitors, without distracting them from your regular content.

In this article, we will discuss the benefits of using a hello bar, or notification bar as they are also known. We are then going to consider some top tips for creating a hello bar and analyze some popular and reputable plugins that will cover how to add a hello bar to your WordPress Website.

Why You Should Be Using a Hello Bar

The main aim of a hello bar is to improve your website’s conversion rates. Therefore, a hello bar should contain a clear message, prompting your audience to complete a particular action of your choosing. This could be to make a sale, opt into a service, enter their email address, or engage with you on social media.

Hello bars can also be used to share information, news, or announcements with your audience. However, using this feature for general chat is a wasted opportunity. If you want to see results, make your hello bar count.

Drive Traffic to a Landing Page

Add a Hello Bar to Your WordPress Website

Hello bars can be particularly successful at sending traffic to a URL of your choice. More often than not this will be a landing page, although it could be another important page, like a contact page or popular blog post.

If you’re promoting an eBook, product or service, advertising a free trial, or offering a discount, then display this news on a hello bar. Add a call to action button linking to a landing page encouraging your audience to complete the specific action you are targeting.

Increase Lead Generation

OptinMonster Hello Bar Email Optin

If your goal is to grow your mailing list then use your hello bar to encourage visitors to join your email list. Add a subscribe button, and if you have a lead magnet, promote it here to increase sign ups.

You can also display your contact information in a hello bar. Help draw attention to your email address, telephone number, or link to a contact page. Giving this information a prominent position on your site will remind your audience to pick up the phone or send a message.

Increase Social Interactions

Hello Bar Social Sharing

Hello bars are a great way to grow your social media following. Try using your hello bar to ask for a follow, share, like, tweet, or pin. Alternatively, simply link to your social media profiles. You could also try combining this tactic with a social media competition or giveaway to increase conversions.

Top Tips for Creating a Hello Bar

Producing a hello bar isn’t rocket science. However, if you want it to be successful there are few top tips you should consider before, and during, creation.

Keep Your Objective in Mind

As already discussed, the objective of your hello bar should be linked to one of your site’s goals. If you want to generate leads, ask for emails. If you want to grow your Facebook following, point your audience to your Facebook page. As a rule, use a hello bar as you would a pop-up.

Consider the Design

It is important that your hello bar catches the attention of your audience. Use bright colors, but ones that still compliment with your branding. You want the hello bar to create interest but not to totally distract from the rest of the site’s content.

Equally, the copy used should be concise and to the point. Tell your audience what you want them to do, and point them in the right direction with a call to action button.

Always Split Test

Always split test a hello bar. Try different variations of the bar color, the size of the button, and especially the text. This will help you to understand what appeals to your visitors and what they respond to. Track the results of each hello bar and then select options accordingly.

How to Add a Hello Bar to Your WordPress Website

There are numerous WordPress plugins you can use to set up a hello bar on your website. Whether you’re looking for features and functionalities, attractive designs, or ease of use, there should be a solution for you. Here is our pick of the bunch, based on features, ease of use, reputation, and popularity.

OptinMonster

OptinMonster Hello Bar Logo

OptinMonster has created a ‘floating bar’, as one of the many lead generation options they offer. Floating bars attach to either the top or bottom of the browser window and scroll along with the page. Primarily designed to increase email subscriptions, the OptinMonster hello bars can be integrated with all major marketing service providers including MailChimp, AWeber and many more.

OptinMonster provides multiple trigger options based on a visitors behavior. Set a floating bar to appear according to a user’s location on the page or time spent on your site. This personalized interaction can help target the right people at the right time and greatly increase conversions.

An easy to use split testing tool is also offered by OptinMonster. Simply click on the split testing button then use the form builder to make changes to your original floating bar. Track the analytics to learn which floating bar appeals to your audience and is more effective.

OptinMonster is a powerful tool for making a real difference to conversions. With the option of split testing and in-depth analytics, you will be able to create a hello bar that adds real value to your site.

Price: from $19 a month

SumoMe

SumoMe Hello Bar Logo

SumoMe’s free ‘smart bar’ sits at the top of your website reminding your audience to take action. The smart bar design is professional and stylish, as well as 100% mobile responsive. The smart bar is part of SumoMe’s suite of apps, which can be quickly installed and involves minimal setup.

The smart bar app has various customization options available to help you create a hello bar that will suit your site’s needs. Write your own message, and select a call to action or social media button, to reflect your hello bar’s objective. Change the color of the background and button, as well as alter the style of text, to work with your site’s branding. Additional extras like adding a timer or an opt-in disclaimer are also possible.

To access SumoMe’s advanced features, you will need to upgrade to the Pro package. Select from one of their 15 custom designed templates. Tailor smart bars to be displayed on certain pages, or to a particular audience. And set up split testing so you can test copy, templates, buttons and behavior.

SumoMe offers an impressive service, whether you opt for the free or premium version. If you are looking for a beautiful and effective hello bar, with the option of adding further features, then this is the plugin for you.

Price: from free / $29 a month

Hello Bar

Hello Bar Logo

The hello bar, from Hello Bar, floats on the top or bottom of any page you enable it for. Use it to promote a link, collect emails, display your phone number, show social media share buttons, or make an announcement.

Designed for desktop, tablet, and mobile, Hello Bar is extremely quick to set up with an attractive style. The simple interface and visual editor make it easy to alter colors, fonts, and even textures. You can also add the appropriate call to action buttons and change the size and positioning of the bar.

All the features mentioned above are free to use. However, if you want further in-depth functionalities you will need to upgrade to the Pro Plan. This will include unlimited, targeted hello bars, as well as the ability to remove the Hello Bar branding, and lots more.

Price: from free/ $12 a month

WPFront Notification Bar

WPFront Hello Bar

WPFront Notification Bar is a free WordPress plugin that enables you to add a hello bar to your website. Offering a range of options, you can select to display your hello bar at the top or bottom of your website, add a close button, and select specific pages or posts you want the hello bar displayed on.

The appearance of the hello bar is also easy to customize. Write your own text, add a call to action button, change the colors, and choose your preferred height for the bar. WPFront Notification is a good option for those on a budget, or who are just starting out in the world of hello bars.

Price: free

Final Thoughts

All of the solutions mentioned are great options for creating and managing a hello bar on your WordPress website. Once up and running, try comparing different variations of your bars, and monitor your results. Analyze how successful each hello bar is at increasing conversions. Then make the necessary adjustments to produce a truly effective hello bar.

How are you going to use hello bars on  your WordPress website? Please share your thoughts in the comments below.

Divi Anniversary Sale

It's The Divi Anniversary Sale! Save Big For A Limited Time 👇

Save big on Divi and Divi products for a limited time.

Access The Sale
Divi Anniversary
Premade Layouts

Check Out These Related Posts

Splice Video Editor: An Overview and Review

Splice Video Editor: An Overview and Review

Updated on March 10, 2023 in Tips & Tricks

Video is a valuable form of content for social media. Unfortunately, creating quality videos is usually a long process that involves moving mobile footage to a desktop app for editing. However, mobile editing is on the rise. Apps such as Splice Video Editor make it possible to efficiently create...

View Full Post
How to Use Font Awesome On Your WordPress Website

How to Use Font Awesome On Your WordPress Website

Updated on September 16, 2022 in Tips & Tricks

When given the choice between using a vector icon or a static image, it’s a good idea to go with the vector. They’re small and fast to load, and they can scale to any size without a loss of resolution. Font Awesome is a superb library of vector icons that you can use on your websites,...

View Full Post

49 Comments

  1. I tried the WPFront Notification Bar and it doesn’t appear to work. I sent an email to the designer twice but received no response. I guess I’ll have to try one of the other ones.

  2. Just in time! I have already set up ConvertPlug as Marcus mentioned.
    All in all its a good plugin but its needs some improvement to compete with its competitors.
    Sometimes, less is more.

  3. Great Post…
    Really a Great Explanation of the Stuff that we need to know.
    Now Personally speaking I have Used Hello Bar for a Year now. Mostly the Free Versions and they still performed great for me.
    I am really excited to go for the Pro Versions but I am a bit confuse to which one should I Upgrade with??
    Will OptinMonster be a good Choice?
    Thanks…

  4. Hello bar in a website is better option. I will implement it.

  5. I have seen Hellobar reduces the site speed. Sumo me is also good it also affects site loading speed but still its a better option

  6. This feature and one similar to Exit Intent would be lovely additions to Bloom.

  7. +1 for adding this functionality to Bloom.

  8. +1 for adding this functionality to Bloom.

  9. Would be interested by a floating hello bar at the bottom of the screen.

  10. +1 for tweaking Bloom to make it easy to create hello bars or even just informational popups/slide-ins.

    It would be great if Bloom buttons could take a URL or just dismiss the popup, rather than being purely so focused on “submit your email”. Then you get full advantage of all the other Bloom features/styling/responsiveness in one plugin! (Yes, I know you can sort of hack this together using the HTML option in Bloom, but it’s very hacky…)

  11. Bonjour, moi je l’utilise pour pour informer les internautes que nous utilisons des cookies pour améliorer nos services…

  12. How is the hello bar on the elegantthemes.com made?

  13. How ’bout a Divi module that does this? Thanks for considering it.

  14. We are using the “Foobar Notification Bars” Plugin. This plugin is also not available free of charge, but we have increased clicks on our landing page heavily…

  15. Just what I was looking for – spot on! Just trying to make WPFront Notification Bar work with Bloom…

  16. I really like this idea – and actually have an exit popup. But my concern is Google. They recently stated that sites using pop-ups would be penalized.
    I totally get this. It is extremely annoying to enter a site, and then less than 10 seconds after landing on the site a pop-up appears. I havent even had time to see what the site is about, before being asked to subscribe. To me it is such a nuisance, that I immedately leave the site.

    A hello bar however seem less intrusive. But again what about google?

    • The pop-up penalty is only for mobile.

      • Interesting. So with bloom or any of these hello bar plugins is there a way to set them so that they only appear on computers and not on mobile devices? Then again most visitor these days actually do use mobile devices…

      • Thanks 🙂

  17. Wouldn’t it be great if Bloom supported this feature? I’m already using Bloom on my site and would rather not add another plugin to my site when I’m already using an opt in plugin. Especially since I’m using Divi and not able to use Hello Bar. Why would I continue to use Bloom when OptIn Monster offers this in one plug in?

  18. Hi. Nice tip. Did you test those plugins in Divi? WPFront Notification Bar displays at the bottom, but not at the top, except in the Dashboard.

    • There’s a configuration option for the WorPress plugin: from the Control Panel choose WPFront then go to WPFront Notification Bar settings. From there you will see the second option “Position” where you can set it to top.

      If you don’t see it, it may be that the z-index is too low and being hidden by another layer like the WordPress Admin bar or your menu. You can test it by setting the position to “Botttom” confirm that it displays, then reset it back to top and fix the z-index.

  19. Can you also make a Hello bar with DIVI?

  20. Thanks for the plugin suggestions, Joe. I use DIVI for my websites and have hoped that the team at Elegant Themes would add a hello bar to the DIVI modules.

    • No problem, Heather. Yes it would be great to see it added to Divi or Bloom in the future.

  21. Doesn’t the Elegant Themes Bloom plugin have something like this? If not, why doesn’t it? Update the Bloom to have these if it doesn’t have them already. 🙂

    • Agree!!!!!

  22. Out of curiosity, what is Elegant Themes using for the Hello Bar on this site? Right now I see a bar with “Divi 3.0 & The All New Visual Builder Has Arrived! LEARN MORE” in it.

    • This is the QuickieBar plugin that is used here. An awesome free plugin.
      I’m surprised that it is not mentioned in this article…

      • QuickieBar doesn’t work with Divi’s fixed header. Unless you modify your header template to include a class specified by QuickieBar. I would imagine that’s why it isn’t included in the article.

    • I asked this same question in ET support a couple of days ago but only was told to use a third party plugin – – would love to know what ET uses. On another note, wouldn’t it be great if Bloom supported this feature?

    • Yes, I would like to know that, too. Good question, Mark.

      • I would like to know that, too!!!!!

  23. Any chance this will become a Divi feature?

  24. Can hello bars be created with Bloom?

    • I would love this feature to be added to Bloom!

      • +1

      • Second this suggestion. Would love to see it added to Bloom.

        • agree!!

  25. Thanks for this! Any chance of Hello Bar functionality being added to Divi anytime soon?

  26. Hello Bars are great. I would add ConvertPlug to the list. Very useful, simply & less expensive than some of the other options. You can also force Bloom to act as a Hello Bar.

    • Thanks for the recommendation Marcus, I will take a look at ConvertPlug.

    • Marcus, I would love to know how to force Bloom to act as a Hello Bar. Is it easy enough to share here?

      Thanks,
      Wendy

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

👋 It's The Divi
Anniversary Sale!
Get The Deal
Before It's Gone!
Get Started With Divi