Convert More Clicks – How To Make Your Hello Bar Open a Modal Popup Box

You can make your Hello Bar open its link in a modal box with just a few extra lines of code. This allows you to convert your Hello Bar clicks directly into action. You might want to do this for an email sign up, Facebook Like, Twitter Follower, Wufoo contact form…etc. You might even notice that the Hello Bar homepage is set up this way (at the time of this writing). There are two main steps to achieving this effect, but before you read on, check out the Demo pictured above and the use cases below.

Here are a few specific use cases:

Wufoo Form integration

Mailchimp Form integration

Facebook Like / Twitter Follow Integration

Step 1: Give Your Hello Bar a #hash as it’s Link URL.

Typically, when a hyperlink needs to perform an action instead of taking you somewhere, we web developers use a hash at the end of the URL both for identification and convention purposes. In this case, my demo Hello Bar goes to #open-sesame as it’ll be opening a modal.

Step 2: Tell Fancybox to Open Something Specific.

There’s no non-code way to do this yet, but for now you’ll need to load Fancybox on your page (There’s a WordPress plugin available too). Once you’ve loaded Fancybox, you then need to tell it what you’d like to pop-open when someone clicks the link in your Hello Bar. Head on over to the demo and view the source code to see the specifics. It should be pretty self explanatory and if you know your way around jQuery then you can use any selector to target your Hello Bar link. I used a selector that specifically looks for links ending in #open-sesame.

Here’s a sample of the code used:

$('#hellobar-wrapper [href$="#open-sesame"]').fancybox({
type: 'iframe',
href: 'http://www.wikipedia.org/',
width: 800,
height: 600
});

View Demo

Download Demo

Let me know if you found this little tip useful and if this is something you’d like to see integrated into Hello Bar as a feature in the future. Just leave a comment with your thoughts.

Update:
I’ve updated the code examples in the demo files and the .zip archive for better IE7/8 compatibility.

Related posts:

1. A/B Test with Hello Bar to Drive More Clicks
2. Make Your Website Message Stand Out with Hello Bar Textures
3. How To Help Japan: Use Your Website To Promote Aid and Awareness
4. Deploy Your Hello Bar Anywhere!
5. Introducing a Simple WordPress Plugin for Hello Bar