The Hello Bar Guide for Bloggers

Want your blog visitors to hone in on a brilliant message? Try a Hello Bar!

A Hello Bar displays a message at the top of your blog that directs your readers somewhere. Where oh where is that somewhere? Well, that’s up to you! Welcome them. Entice them. Give them something. This post gives you lots of ideas for using a Hello Bar on your blog, no matter what you write about. Plus, I walk you through creating your own (without being a snooze) and displaying the bar on your blog.

Ways Bloggers Can Use a Hello Bar

Hello Bar offers a free account that allows you a maximum of 25 clicks per month. There’s no limit on the amount of visitors that see the bar though (until you hit the number of clicks). If you find you’re going through that too early in the month, you can upgrade to a Pro account which starts at $4.95/month for 100 clicks.

I use the Hello Bar periodically when I have something special I want my readers to notice, but many bloggers keep their Hello Bar running all the time with lots of success. You can even create multiple Hello Bars and then switch them out every so often to keep things fresh. You can encourage readers to:

• Subscribe to your RSS feed
• Sign up for your email list
• Visit a special info page like a welcome page, start here page or resource page
• Buy your book, e-book or product
• Register for a live event
• Hire you for freelancing or consulting
• Share a special offer or promo code
• Download a free printable
• Read seasonal content like back-to-school posts, holiday posts or gift guides
• Learn more about a meme you host
• Follow you on a social media network
• Share news with your readers

Try to stay away from the first two (or at least use them sparingly). Most bloggers stick with those two so visitors may just gloss over it.

Create Your Own Hello Bar

Creating a custom Hello Bar takes just a few minutes. The hardest part is figuring out what to say (which I cover in step 5)! Once you sign up for an account, follow these steps to Hello Bar glory:

1. Select Create New.

2. Give your bar a descriptive title (only you will see this).

3. Unless you signed up for the Pro version which can update the bar via RSS feed, leave Manual selected.

This just means you’ll create and edit your Hello Bar manually.

4. If your Settings section isn’t visible, click the drop-down arrow to see the settings. Below you see the default settings.

I changed the following:

Show: After 1 second (thinking it might get noticed more if it comes up after the page loads)

Open link in: New window (don’t want people leaving the page they’re on- I may adjust this in the future)

5. Now you need to wax some words and create your message!

The Message section is where you get your reader excited about clicking over. Don’t get generic about it though. Never ever say “Sign up for my email list here” or “follow me on Pinterest.” BORING! Instead, answer the question “Why should my reader care?” Tell them what you’ll give them. For example, one of my Blog Design for Dummies bars says “Learn How to Pick Colors, Select Fonts & Use Basic CSS with Blog Design for Dummies.”

The Link Text is your “call to action.” Since this text is inside a button, keep the text very short. Resist the urge to just say “click here.” For example, if you convinced people to visit your fabulous and informative Start Here page, you might say “Jump in!”

The Link URL is the place you want people to go. Don’t forget to include the http://!

6. Pick your bar’s colors and font (you only have a few to choose from with the free account).

7. Save!

Once you save your embed code will appear in a pop-up. Copy the code then read on!

But before you copy the code, you can also create a variation of your text to do a little A/B testing. For example, maybe you create two versions with different call-to-actions. Hello Bar then alternates displaying the two versions. If you decide to do A/B testing, just close the embed code window, then select Create Variation from the screen. Repeat steps 2 – 7, then select the Back button and click <Embed> beside your bar’s name to get your code.

How to Install the Hello Bar Code

The last thing you have to do is get the Hello Bar appearing on your blog. (Before playing with code, back up your blog! ) Here are a few ways to do it:

WordPress.org:

1. Navigate to Appearance > Editor from your WordPress.org dashboard.

2. From the right column of Template files, select header.php.

3. Paste the code after the <body> tag.

4. Save by clicking Update File.

In some themes, such as the Twenty Eleven theme, it might say <body <?php body_class(); ?>>.

If you’re on Genesis: The easiest way to add the code on Genesis is to go to Genesis > Theme Settings > Header and Footer Scripts. Paste your code into the Header field and save.

If you’d prefer to use a plugin: use the official Hello Bar plugin. Just remember that too many plugins can slow down your blog.

Note: You may need to log out of WordPress to see your bar. The dashboard’s toolbar covers most of it up.

Blogger:

1. Click Template from your Blogger dashboard.

2. Click Edit HTML.

3. Find the </body> closing tag.

If you have trouble, just do a Control + F on your computer (Command + F on a Mac) then type in the code to find it.

4. Paste your Embed code above the </body> tag.

5. Select the orange Save Template button.

To deploy the bar on other platforms, visit the Hello Bar post explaining other platforms.

Once you have your Hello Bar set up, you can track how many visitors and clicks it receives. Don’t get discouraged if the click-through is too low. One of the founders of Hello Bar said this on Quora:

We’ve seen positive results from CTRs from 0.25% up to 25%. Think of it this way, if you are above 1%, you are engaging at least 1 in every 100 visitors in your call to action.

 Share Your Hello Bar with Me!

I’d love to see what you do with your own Hello Bar! Share a screenshot on my Facebook page or post a link!