A Cheaper Hello Bar Alternative for WordPress that is also Responsive

Cheaper and Better Hello Bar Alternative

Most bloggers and search engine marketers know the importance of a good CTA and have probably tried using the Hello Bar at some point in time. Even we have better conversion rates with a notification bar. It is even used by one of my favorite marketers, Niel Patel, over on Quick Sprout. However, Hello Bar is not responsive out of the box. That is one reason I don’t like it. Also, Hello Bar is only free for the first 25 clicks, after that you have to upgrade to their $4.95 a month plan. To me that seems a little ridiculous to pay that much for a small bar.

Here is a quick screenshot of how Hello Bar looks on QuickSprout.com when scaled down to a mobile device.

Hello Bar Not Responsive

You can see that it just collapses wrong. So I will be showing you a cheaper Hello Bar alternative, that is actually very more customizable.

It is a WordPress plugin called BugMeBar. We are actually using it on our website. It is a one time charge of $11 and scales a lot better on responsive websites for both mobile phones and tablets.

What does BugMeBar do?

BugMeBar lets you add a message to the top of the screen which a user can dismiss. You can use a cookie if you like so that the notification bar can stay gone once the website visitor has clicked close. Here are the main options…

  • Set the target of where the bar will go, you can add it to anywhere you want
  • Enter the message (including HTML content)
  • Set colours for message, links and transition colours
  • Align message and close button
  • Remember close with a cookie
  • Set cookie expiry time
  • Name your cookie
  • Turn CSS3 transitions on/off
  • Turn CSS3 animations on/off
  • Use a fixed position bar so it sticks to top of the page
  • Already got a fixed header? No problem, use a fixed spacer to push existing fixed headers down
  • Set a z-index to make sure BugMeBar stays on top of everything.

You can see the BugMeBar in action on my website if you have not already closed it.

bugmebar in action

There are a few tweaks I recommend adding to it right off the bat. For me the default line height was way too much and I also like a small white border on the bottom, very similar to what Hello Bar does. Follow the steps below to tweak the plugin.

Step 1

In WordPress, go to Plugins and then click on “Editor.”

WordPress Plugin Editor

Step 2

At the top right we will select “BugMeBar” from the dropdown menu and click “Select.”

Edit BugMeBar

Step 3

Select the bugmebar/bugme.css file and then we will change the line-height down to 1.0 and add a bottom border. Then click on “Update File.”

border-bottom: 3px solid #FFFFFF;

Change CSS

Other Settings

I also changed a few other settings under the BugMeBar’s settings. BugMeBar has a very easy to use settings dashboard.

  • I disabled showing transition colors
  • I disabled animations
  • I enabled fixed position so the bar will remain at the top when scrolling down
  • I enabled fixed spacer so that it doesn’t float over my main menu
  • Tweaked color to match my WordPress theme
  • I enabled plugin option to match my sites font
  • Tweaked the message and added hyperlinks for my MailChimp newsletter

You can see the developer’s roadmap for updates with this plugin here.

You now have a great notification bar for $11 that is responsive and very customizable!

Buy BugMeBar

As always feel free to leave your comments below.

author bio
Brian Jackson

I craft actionable content and develop performance-driven WordPress plugins. Connect on Twitter or subscribe to my newsletter (once a month, no spam).

11 thoughts on “A Cheaper Hello Bar Alternative for WordPress that is also Responsive”

  1. Great, informative article Brian. I am curious as to what plugin you use for the bottom of the article (has all the sharing options and your bio). Thank you!

  2. Nice plugin choice :). I switched over from Hellobar to Firebar by WPsite, but this plugin looks pretty cool too. I may need to give a go!

    • Hey Ariel :) You seem to be launching new blog/sites every week lol. Somehow I keep stumbling upon them. I think it was something to do with bacon?

      Yes this plugin is great, I have been using it for years. It is very lightweight. I wouldn’t advise using it though if you need a subscription box or signup as you would have to manually input your own HTML. I use it just for simple CTAs that I change up. I know Devesh uses this plugin sometimes on WPKube when he has a holiday offer going on.

  3. Hi Brian. Looks a good plugin, but I actually went ahead and created one for myself because I wasn’t totally happy with all the extra stuff that was in these CTA plugins – I just wanted one to showcase my most important link on a post or page!

    My CTA Plugin allows a user to add a gorgeous, high converting floating skin at the bottom of a post or page, where the user can completely change everything about the skin – from image, to colours to text.

    We have had some great results with it so far, and I’m hoping you will consider reviewing it or adding it to your site. And of course there is a generous affiliate program too: ctaskin.com/jv/

    Thanks, Richard.


Leave a Comment