Hello Bar: Promote Anything on Your Site, Stylishly

If you manage websites, you know how important it is to keep your content fresh and up-to-date. It’s also crucial to guide your users towards your new content, without marring the site design and experience you’ve spent a lot of time and effort creating. Pop-ups and banners are distracting and so 2003. Is there a way to grab your users’ attention while being subtle about it?

Consider Digital Telepathy‘s Hello Bar. It’s a customizable bar that positions itself at the top of your website and displays messages, links or even data from RSS feeds. You can use it to promote new products or services in your online store, announce the launch of a new section on your blog, display tweets from a live event or anything else you want your users to see. Will it work for your site? Let’s deploy our own bar and find out.

Previewing a Hello Bar on our site

Previewing a Hello Bar on our site

Overview

Hello Bar is easy to customize and implement and works on all kinds of static and CMS-based sites. All you’ve to do to implement it is enter your message and link, tweak the look and behavior and paste a snippet of code onto your site. The app has a free plan as well as various paid plans (with pro features) based on the number of clicks per month. You also get clickthrough stats, multiple bars and A/B testing.

Creating a demo bar

Creating a demo bar

Getting started

To see a Hello Bar in action, simply visit the app site and look at the message at the top of the screen. You can try the demo without signing up and customize the bar right there to see how it works – change the message text, link text and URL, the bar and text colors and even the font. Once you’ve signed up to use Hello Bar, you can create your first bar with just a few clicks and keystrokes.

The excellent dashboard with your bars and previews

The excellent dashboard with your bars and previews

The free plan allows for 25 clicks/month while paid plans start at US$4.95/month for 100 clicks/month, SSL support (so you can place your bar on shopping cart pages and the like), the ability to save your color themes and for displaying content from RSS and Twitter and removal of Hello Bar branding. The other plans vary only in the number of clicks per month and go up to $49.95 for 7500 clicks/month.

Customizing the look and content of a Hello Bar

Customizing the look and content of a Hello Bar

Creating your first bar

To set up your bar, give it a name, enter a message and a link, choose colors for the bar and text, adjust the bar’s behavior settings, copy the embeddable code and paste it into your site’s theme template. There are a few preset color themes to choose from and you can also make your own. There’s a preview bar on the same page which reflects your changes as you make them.

A variety of behavior settings to choose from

A variety of behavior settings to choose from

As for the bar’s behavior, there are several parameters to tweak, inlcuding its positioning (whether the bar should push your page down or sit on top of it), whether it should stay at the top of the page when scrolling, when to show (set a delay if you like) and hide, whether it should shown on the page you’ve linked to and more.

Grabbing the Hello Bar script

Grabbing the Hello Bar script

Implementing the Hello Bar on your site

Once your bar is set up, you can grab the JavaScript code snippet that’s been generated for you and paste it into your site. If yours is a static HTML site you can paste it anywhere within the body tag. If you’re running a CMS, you can check out this guide that explains how to implement the code on many common CMSes – Tumblr, WordPress, Squarespace, Blogger, Weebly, TypePad, Drupal, Joomla and DotNetNuke are listed at present.

I’m running my photography portfolio website on WordPress and found it easiest to just head to the Theme Editor and paste the code into the header.php file, just before the title tag and voilà! My Hello Bar was immediately installed and running, and didn’t increase the page load time significantly. I found this to be an elegant, fuss-free way to invite visitors to check out my newly-launched Facebook page.

Implementing a Hello Bar on my WordPress site

Implementing a Hello Bar on my WordPress site

Using Hello Bar

So what can you use your Hello Bar for? You can promote your social network presence like I did by linking to your Facebook page, or to your Twitter/LinkedIn/Behance/Dribbble profile, for example. You could run a promotion on a separate landing page with a newsletter sign-up form and direct users to it with your Hello Bar.

The Hello Bar can also display content from specific tweets that you hashtag, so it’d be great for live coverage of events like expos and conferences on your blog. You could also indicate whether you’re currently available for freelance projects and link to a contact form/quote form. You can even have these (or a web page) open in a modal window when the link is clicked.

Checking out Hello Bar stats

Checking out Hello Bar stats

There are a couple more things you can do to get the most out of your Hello Bar – the first is to set up A/B testing so as to try out variations of your message and see which one is most effective in getting clickthroughs. Hello Bar lets you do this really quickly and doesn’t require you to paste in any additional code. You can then login to the app site to check your stats – see how many times each bar variation was displayed, which got more clicks, and your clickthrough rate.

Four different kinds of content in Hello Bar Solo

Four different kinds of content in Hello Bar Solo

Hello Bar Solo – the self-hosted version

If you’re looking to launch your Hello Bar on multiple sites, run custom content in it and host it yourself, you can purchase Hello Bar Solo for US$29. While this lacks a GUI and stats tracking, it does allow you to add custom content and forms, and even use custom web fonts and social media widgets. This is a great option if you’re comfortable with code and would like to add further interactions and chain multiple Hello Bars together.

Conclusion

I simply loved using Hello Bar. The app site is extremely well built and is very easy to use. Implementation is a snap too – I was particularly happy with the way variations of a bar deploy themselves. Plus, the wide range of customization options allow you to add bars to virtually any site layout without ruining the page design.

The free plan will give you enough of a taste to decide whether the app is worth paying for. I highly recommend this for anyone looking to boost sales or traffic on their site.


Summary

Hello Bar allows you to direct your visitors and promote your website’s most important content easily.

10
  • http://www.hellobar.com Chuck

    Abhimanyu,

    Thanks for the review. We’re flattered with the 10/10 and glad to you had such a great experience using Hello Bar.

  • Joseph

    Maybe I’m missing something essential, but what’s the difference between putting this ‘bar’ on a site and just coding a bar oneself?

    I mean, isn’t it just a slim, window-wide container?

    • Ashit Vora

      This is for people who don’t know programming.
      Plus it provides analytics. If you know HTML CSS, you can do it yourself too.

  • http://www.omegaweb.com Ian Eberle

    I currently use a free plugin called Viperbar on my WordPress blog, but I’m thinking about buying Hello Bar Solo to replace it. I love the idea of chaining bars together.

  • Andrew Munsell

    HelloBar is a pretty cool service, but they didn’t offer everything I needed in a service. I ended up building an alternative myself called ThreeBar (https://www.threebar.net).

    You can register for free to get some pretty cool features like analytics and SSL support.

theatre-aglow
theatre-aglow
theatre-aglow
theatre-aglow