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.
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.
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.
In WordPress, go to Plugins and then click on “Editor.”
At the top right we will select “BugMeBar” from the dropdown menu and click “Select.”
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;
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!
As always feel free to leave your comments below.
Get More Stuff Like This
Marketing, WordPress, Blogging Tips, SEO and Reviews, once a week.
Thank you for subscribing.
Something went wrong.
BugMeBar is a great alternative to Hello Bar, with a great price and many more features! Why pay a monthly fee when you can have the same thing for $11?