Add a notification bar with a Call to Action to WordPress – Hellobar

By | March 4, 2015

Introduction

Hellobar is a notification bar that shows up at the top of your (WordPress) website. It’s used to get your visitor’s attention to something specific, and increase the chances of them performing an action you want. This is also known as a call to action (CTA).

The finished result could look like this:

Hellobar-finished-result

You can add a Hellobar for 3 different purposes; drive traffic to a specific link, to get sign-ups for your e-mail list, or to get likes/follow for your social media pages. The process to configuring and installing the Hellobar is similar for all three purposes.

In the example in this article, I’m going to make a Hellobar to make a visitor like a specific Facebook page.

Making your Hellobar

Go to www.hellobar.com, and add the URL to your website in the bar. Then, click the button ‘Continue, It’s Free’.

Hellobar-site

On the next page, select a goal for your Hellobar. For the Facebook like CTA, I select ‘Connect & Share’. Click ‘Select this goal’.

Hellobar-site-goal

Bar settings

Now, you’re on a page where you can configure your bar. On the left, you can edit the options for your notification bar, and on the right, you’ll see a preview of your bar with the currently selected options.

In my case, I select ‘Like on Facebook’.

 

Hellobar-WordPress-Like-on-Facebook

Find your Facebook page link, add it to the text bar ‘URL to like’, and click ‘Next’.

Hellobar-Facebook-page-like

Bar style

With the following step, you can configure some more style options. For all of these, simply click the button on the right side to switch them on or off.

Hello Bar branding: the free version has a ‘Hellobar’ logo on the left side of your notification bar, that says ‘Get Hellobar for your website’. You can only disable this if you buy the premium version

Animate entry/exit: Click this to animate the bar. When this is on, the bar will fall down once a page loads, and slides back up if the visitor clicks to hide the bar.

Wiggle button: To grab attention, you can also make the CTA button wiggle. Note that this might be annoying to the visitor. This option does not work for some social media buttons.

Allow to hide bar: This adds an option for the visitor to hide the Hellobar. This adds an upwards arrow to the right side of your, that hides it when clicked.

Pushes page down: With this option switched on, the bar won’t hide anything behind it, but push your entire webpage down. To get noticed more, switch this off. To be less obnoxious, switch this option on.

Bar size. Use the dropdown menu to select a bar size. There are two options; regular (30px), or large (50px).

When you’re done, click ‘Next’ to go to the next configuration options.

Hellobar-configure-style

Bar colors

Here, you can change the color of the background, text, button, and button text on your bar. Button and button text do not apply when using social media buttons.

Click on the dropdown menu to select a color, and add a color in hex code, or in RGB.

To get more attention to your bar, use a color that contrasts with the rest of your theme. For a less intrusive look, choose the same color or similar colors to the  rest of your theme.

Click the green ‘Next’-button to go to the next step.

Hellobar-configure-color

Text and content

Here, you can edit the text that appears on the bar, and change the font. There are four different fonts you can choose from the drop-down menu; Helvetica, Arial, Georgia, and Sans Serif.

Click ‘Next’ when you’re done adding text, and have picked a font.

Hellobar-configure-text

Targeting

Targeting is for paying users only. Here, just click ‘Save & Install’.

Hellobar-configure-targeting

Creating an account

Once you click ‘Save & Install’, a popup will appear that asks you to create an account. This is necessary to install the Hellobar.

Enter your email address, and a password. Then, click ‘Install Hello Bar’.

Hellobar-create-account

You’re now immediately logged in. Here, click ‘I use WordPress’.

Hellobar-Install-WordPress

This menu will fold out. Now click ‘Download’ to download your WordPress plugin to your computer. The plugin is a .zip file.

Hellobar-Download-WordPress-Plugin

Installing the Hellobar to WordPress

Go to WordPress, and click ‘Plugins’, and then ‘Add new’.

Installing-hellobar-plugin

On your plugins page, click ‘Upload plugin’.

Installing-hellobar-plugin-2

Now click ‘Choose File’, and navigate to the .zip file you’ve downloaded. Select the file, and click ‘Open’.

Installing-hellobar-plugin-uploading

Click ‘Install now’ to install the plugin.

Plugin-install-now

The last step is to click ‘Activate plugin’.

Hellobar-Plugin-install-activate

Done! Your website now has the Hellobar notification bar with a CTA!

Hellobar-installed

Leave a Reply

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

*