How To: Easily Install Hellobar on Your Blog

Want to easily install hellobar on your blog, then look no further. This article will tell you how to set this people friendly bar on your site in minutes.

What is Hellobar?

You might have noticed recently that we are using a big orange colored bar on the top, which is also known as the Hellobar. This very catchy bar was announced a long time back but recently we decided to let our users know why we use it and how to get this bar for your very own blog or website.

How Can Hellobar Help Me?

Naturally this bar is no doubt the first thing you see when you visit our blog. Its catchy, attractive and very sexy. The Hellobar also allows you to track how many clicks and impressions have been made on the bar.

Easily install hellobar on your blog - hellobar stats

Click on image to enlarge

Many of our visitors can notice the important announcements on our blog easily and know about the latest giveaways through this bar.

In fact, we used  this bar to tell our readers about the winner of our GD Presstools plugin giveaway we held recently, and I got to experience a good clickthrough rate with the help of this bar.

Say, you want to drive people to a certain page on your site, then Hellobar is a very powerful tool to make that happen. Even the well-known ProBlogger, Darren Rowse uses this bar on his blog, so why shouldn’t you?

Steps to Easily Install Hellobar on your Blog:

Ok, lets get to the point. Here are the steps outlined below on how you can set this Hellobar up and running on your site in just minutes.

Step 1: Get a free account by signing up at Hellobar. If you wish to run a virtual demo of Hellobar on your site then visit this page.

Step 2: Once you log in you will end up at the Manage tab where you can create your first Hellobar. Click on the Create New button to give it a go.

Step 3: Styling your bar is relatively easy because you get all the customization tools for your use. There are the three main things to take care of.

Easily install hellobar on your blog - hellobar dashboard

The Message: This is the most important part of your Hellobar. Make sure you write something enticing in here so that people actually go ahead and make the click. Please keep the subject to a minimum of 50 characters or less, your visitors won’t have time to read that long line of text.

The Link URL: Copy paste the url of a particular page of your blog, you want your readers to visit to in this area. Make sure the url is on its own page i.e it isn’t being redirected to another page. People don’t like redirections, they consider it spam and unhealthy. Keep it nice and clean.

The Link Text: As of 2012, Hellobar displays a button where you specify a link, this way you can enjoy a better CTR. Don’t worry its enabled by default. Just specify a short and attractive text so that visitors are just one step away from reading your article, such as Read More, Click Here, Check it out, etc. you get the general idea.

Apart from these you also get to change the look of your bar such as Fonts and Themes. Hellobar already gives you a nice set of themes to choose from. My personal favorite is Crikey.

If you want you can Purchase the Pro account where you can fully customize the bar to your liking, although i think Free account is enough to get you started.

Step 4: The next step is to take care of the Settings of your bar. Here you can change how the bar behaves. You can make the bar floatable i.e. it is visible even while you scroll the page.

Easily install hellobar on your blog - hellobar settings

You can also show or hide your bar after a specified interval of time. There is an option known as Wiggle effect which shakes your bar often to let the visitors know the bar is getting impatient for your click.

I think the default options are good enough. After you finish configuring your bar, just hit the big Save button to save your changes.

Step 5:  Now its time to insert the code on your blog. Remember this is a one time thing, after you insert this code on your blog, there is no need for you to change it again the next time you wish to customize your hellobar.

Easily install hellobar on your blog - install javascript

Go to your Manage tab and then click the Embed button next to your hellobar. You will be given a small code of javascript which you need to insert in the footer of your blog.

End of Tutorial.

For best practices it is advised to place it just before the closing </body> tag to ensure the browser loads your main content first and then the hellobar.

Thats it! Wasn’t this tutorial about how to easily install hellobar on your blog helpful? Make sure to visit your site homepage and enjoy the cute looking Hellobar!

If you haven’t yet subscribed to our newsletter, its time to do so. You sure don’t want to miss such tutorials again!

Subscribe to our Weekly Newsletter

I take your privacy very seriously


  1. Vaibhav Panwar Reply

    This is a useful utility, thanks for sharing !

  2. Pavan Somu Reply

    Special offers, discounts, Giveaways and unique content can easily be attracted by this hello bar. This is really awesome.

    • Gautam Doddamani Reply

      thats right pavan its a great way to increase our page views and to make people view our special content or also to announce a major update of the blog! :)

  3. Ambar Reply

    very nice and descriptive information. about hello bar!

Leave a Reply

Your email address will not be published. Required fields are marked *

Notify me of followup comments via e-mail.