Don’t take our word for it though, head on over to Bundlelytic and check out the deal for yourself.

So where does the money go? In this case the charity is UNICEF’s Silent Emergencies Appeal fund, which helps UNICEF respond to and provide aid for emergencies that break out around the globe, even if they don’t make the headlines. From Bundlelytic:

The Silent Emergencies fund is UNICEF’s reserve of available money to be used during emergencies around the world that may not have made headlines but still require urgent and immediate support. It helps to provide access to basic health services, clean drinking water and food for malnourished children in emergency situations.

The Bundlelytic guys are good guys too, donating 100% of proceeds to UNICEF. What could be better? Sweet new tools to style your WordPress setup, helping people in need and scoring a sweet deal — that’s all win in our book. Grab the bundle now. The catch? Once the first 300 are claimed it’s gone forever. The Hello Bar deal is good for new customers only.

Want to learn more? Check out the little video the guys from Bundlelytic made about the WordPress bundle below.

Before we get started, let’s familiarize ourselves with the files Hello Bar Solo comes with. Nested in the zip file, you’ll find a directory titled hellobar-solo. This directory houses all the files we’ll need to install Hello Bar Solo on WordPress.

Inside that directory you’ll find the following files:

hellobar.js
This is the library that houses all of the code that allows Hello Bar Solo to work properly. We’ll be telling WordPress to enqueue this file.

hellobar.css
This is the style sheet that makes your Hello Bar Solo install look pretty.

sprite-8bit.png
This is an image sprite that houses all of the visual elements referenced in the CSS file.

textures.png
This is another image sprite that contains all of the textures available for use with Hello Bar Solo.

Step One:

We’ll need to move the files listed above into the right folder in the WordPress installation directory in order to get things working.  To do this, place the “hellobar-solo” directory we referenced above into your WordPress website’s theme folder. (for example /wp-content/themes/twentyeleven/). This will get things nice and comfy within our theme.

Step Two:

Now we need to reference our files within WordPress. While we can place <script> tags and <link> tags directly into the header.php file, it’s a WordPress best practice to register and enqueue scripts to be output appropriately. If you aren’t familiar with this technique, we recommend you check out the WordPress codex documentation on wp_register_script(), wp_register_style(), wp_enqueue_script() and wp_enqueue_style() for more information. This method will output the  scripts on a page when they are needed, and also allow other scripts to detect what is being loaded so that files are loaded in the correct order and only output once.

To help you out with this, we’ve provided a simple code snippet that takes care of this for you. Just copy the code snippet below and paste it into the bottom of your functions.php file.

function hellobar_scripts() {
    wp_register_script( 'hellobar_solo_js', bloginfo('stylesheet_directory') . 'hellobar-solo/hellobar.js');
    wp_enqueue_script( 'hellobar_solo_js' );
}
add_action('wp_enqueue_scripts', 'hellobar_scripts');

function hellobar_styles() {
    wp_register_style('hellobar_css', bloginfo('stylesheet_directory') . 'hellobar-solo/hellobar.css');
    wp_enqueue_style( 'hellobar_css');
}
add_action('wp_enqueue_scripts', 'hellobar_styles');

We’ll now be able to access the functions in the hellobar.js file on every page, and the style sheet will be loaded on each page so that the Hello Bar looks awesome.

Step Three:

Now we’ll need to output a Hello Bar. We recommend doing this at the end of your footer file, which would give us a Hello Bar on every page. However, if you want to limit your Hello Bar to only specific pages you can also place the code within a template file. The following code snippet will give us the basic bar, but please check out http://www.hellobar.com/solo for a few demos and an overview of all of the customizations available.

<script type="text/javascript">// <![CDATA[
    new HelloBar( '<span>Read my pitch and then click on my</span> <a href="#" class="button">Call to Action!</a>', {
        showWait: 1000,
        positioning: 'sticky',
        fonts: 'Arial, Helvetica, sans-serif',
        forgetful: true
    }, 1.0 );
// ]]></script>

Step Four:

If you’ve placed your code snippet in the right place, The Hello Bar should now be outputting correctly. Congrats! You have you shiny new Hello Bar Solo up and running. Now plug in your key message, email subscription form, social widgets, or whatever content you want to highlight. Hello Bar will do the rest. Next? Kick back and watch your users take action! 

Do More with Hello Bar Solo

Add Social Widgets – Get more likes, followers or +1’s without touching your UI. You can easily drop in the code snippets for each widget into Hello Bar Solo. Users can like, follow or +1 right from the bar. You avoid cramming clunky social widgets into your UI, your client gets the social visibility they’re looking for. Double-win!

Add Notifications – Give your users noticeable, stylish notifications triggered off of actions they take on your site. Need a good-looking password change confirmation notification or other state-change alert? Use Hello Bar to let users know when a change they’ve initiated has been made with a Solo. You can code Solo to appear for a limited time and dissolve out of view after the interval of your choice.

Add Custom Forms – Drive email subscribers or beta sign-ups with Hello Bar Solo and your favorite form or email client. AWeber, MailChimp and Wufoo are all supported in Solo. Drop in a form field or two and make your opt-in form front and center across your site. It’s a great way to launch a new mailing list or initiative by putting it in front of your site visitors.

Add Custom Content – Want to play a video in the Hello Bar? Want to style it with a Zebra-theme? Go for it. Hello Bar Solo lets you add your own custom HTML and code to make the Hello Bar Solo look and display whatever you want, whenever you want.

And that’s just the start – when you being integrating call backs with your Hello Bar you can trigger complex functions, like alert dialogs and more. See everything you can do with Solo and download the .js library now for a one-time price of $29.

Already a Solo power user? Share your customizations with us in the comments and perhaps we’ll feature your handiwork in a future post.

Get Hello Bar Solo and get these powerful features:

• Social Widgets – Easily add Facebook, Twitter or other social widgets.
• Custom Forms – Grow your email list with MailChimp, AWeber and Wufoo integration.
• Notifications – Add user alerts with a subtle message that vanishes over time.
• Custom content – Add images, icons, videos and more with custom HTML.
• Callbacks – Use Hello Bar to react to any interaction on your site.

If you don’t love to code, Hello Bar App is still the way to go. Hello Bar App comes with a graphical user interface to setup and manage your Hello Bars, and includes stats, A/B testing, customer support and more. You can learn more about the Hello Bar App here.

We hope you’re as excited as we are. We believe Hello Bar Solo is a powerful .js library for developers who want a professional solution for implementing highly-customized notification bars into their website or Web app. With unlimited clicks, a one-time price of $29 and a bevy of customization options, Hello Bar Solo is a new, effective way to get users to engage with your site or app. We hope you try it out and let us know what you think. We’re listening.

Learn more about Hello Bar Solo.

As of Wednesday, January 4th, we’ll be tracking your Hello Bar’s views as “visits”. This means that if a visitor arrives at your site and clicks around, it’s only counted as one impression. This should help your stats display more meaningful information as a Hello Bar’s performance will be much easier to visualize. You can think of the bar as tracking people, instead of page views.

How this affects you

This switch means that you will likely see your impressions (now “Visits”) fall and your clickthrough rates go up. In reality, your Hello Bars’ performance won’t be affected by this change – the net result is simply that your reports should be more reflective of the true engagement your Hello Bars are getting.

We hope you’ll welcome this change and above all, we hope it gives you a better view into your Hello Bar’s performance. If you have any questions about this, please feel free to drop us a line at contact@hellobar.com.

The Hello Bar Shopify app comes loaded with:

• A/B Testing – test messages, colors and calls to action to find what resonates most with your customers.
• Rich Statistics – measure impressions, click-throughs and click-through rate to fine tune your Hello Bar performance.
• Customization – customize the look and feel of your Hello Bar to match your store and brand.
• Promoted Content – import a new product RSS or Twitter feed to keep visitors up-to-date on what you’re up to and what’s new in the store.

If you’re a Shopify ecommerce store owner, or are thinking about setting up a Shopify store, using the Hello Bar app can help increase your on-site conversions by driving awareness and clicks to your most important products and pages. And because you only pay for the clicks you need, you can try Hello Bar free, for up to 25 clicks a month to see if it works for you. After that pay just $4.95/month for up to 100 clicks. Have a larger site? Click here for volume pricing.

Try Hello Bar for Shopify today!

The “Sticky” feature’s main purpose is to get you more clicks. It allows your bar to follow the user as they scroll down the page and it also pushes your page down so it doesn’t cover any of your content: a perfect mix!

Enable the feature by editing the settings of your Hello Bar:

Step 1

Expand the settings area in the Hello Bar editor:

Step 2

Choose the “Stays at top of page & pushes page down” option:

The sticky feature is essentially a combination of ”Stays at the top of the page” setting (so it stays with you when you scroll down) and the ”Pushes the page down” setting (so it doesn’t cover the navigation); this way the Hello Bar only covers your site when your user scrolls down.

As always, we’d love to know what you think of the new option. Let us know by leaving a comment below, we’d love to hear from you.

Last year we created and shared a Hello Bar in support of the Japan Earthquake. Thousands of people added this Hello Bar to their websites and blogs. As a result, we saw over 200,000,000 impressions and raised an estimated $2 million. This proved to us that Hello Bar could be used as a way to spread awareness and inspire action for the greater good.

Since then, we have continued to create Hello Bars to support worthy causes. This month we are supporting breast cancer awareness with our digital version of the pink ribbon.

However, we are a little design company. We don’t have the reach or network to distribute Hello Bars for good causes on a consistent basis. So we figured we would develop something special for the organizations that do – nonprofits.

How it Works

We will be providing free and unlimited accounts to nonprofit organizations. The Hello Bar is a perfect way for nonprofits to empower their supporters to raise awareness and inspire action for their cause. It’s incredibly simple:

1. Sign up with an official email address from a nonprofit and send a message to contact@hellobar.com for confirmation into the program
2. Create a Hello Bar to support your cause
3. Publish the code on your website, blog, Facebook, Twitter, and encourage your supporters to add it to their websites
4. Manage your Hello Bar across all supporter websites: Review your stats, update your message or even A/B test the Hello Bar for better results

Our Goal – 1 Billion Non-Profit Views Per Month

If our little web company can generate 200 million views in a month, think of what’s possible if you get involved. We are setting the goal at 1 billion views per month for nonprofits. At a 1% click-through rate, that’s 10,000,000 click-throughs to a good cause each month!

How to Get Started

You must be an official nonprofit organization to get access to unlimited Hello Bar usage. To get started, sign up for Hello Bar with an official email address from a nonprofit and send a message to contact@hellobar.com with a bit of info about your nonprofit organization.

Please note, we respect our users’ privacy and will never share their individual stats. We may share anonymous stats to report the overall impact from this program. We ask that you keep the Hello Bar logo and link visible. This may help offset our costs for the program, but will not affect your SEO ranking or pull any funny stuff – we promise.

While this seems like a simple change, it’s rooted in our mission for all Hello Bar users: Get more clicks! here’s how you can switch your existing bars to use the new button style:

Step 1

Expand the settings area in the Hello Bar editor:

Step 2

Choose whether you want your link to be displayed as a button or a link.

The button will switch between light and dark depending on the bar color you choose. We aim for maximum contrast on any bar color.

Step 3

Save your Hello Bar.

Since this option is bar-specific, you can even start A/B testing whether buttons or links give you a better click-through-rate. The button will be either charcoal or silver depending on the bar color that you’ve chosen.

If you don’t have a free Hello Bar account yet, create one or try our interactive demo. If you’ve already got an account and want to try this new feature out, then log in and give it a try.

We love feedback and we need your help to refine and perfect even the smallest feature additions like these, so please let us know what you think in the comments below.

There has been some changes to our homepage lately and the most recent was the adding of our, “Try The Demo” button. We wanted to open the opportunity for anyone to test a Hello Bar on their site, not just registered users. The new Demo Editor is a fully customizable editor that you can launch from our homepage allowing you to create a Hello Bar on any website. Pretty slick huh?

It works like this. Click the “Try The Demo” button on the homepage. Enter any URL of your choosing could your website, a friends, or even your Facebook application. If you’re unsure of which URL to choose, we’ve provided a few examples of popular websites around the web. Once you’ve entered a URL, you will be shown a notification bar at the top of the website. Now it’s time to have some fun.

With the demo feature, you now have a full editor at your finger tips before logging in. You can test any message and link to find the perfect fit for visitors on your website. Make sure to keep the message under 85 characters. Aside from the perfect message, you want to make the web toolbar noticeable and look good on your website. Here you have a variety of fonts (even Times New Roman!) along with a loaded color palette to tweak every option until you have the perfect fit.

So you’ve created that perfect Hello Bar, now what?

We went the extra mile to make sure you wouldn’t have to ask yourself that questions. The demo includes two features for allowing faster integration of a Hello Bar. We brought the “send to a friend” feature out from within the create a Hello Bar section to give you the option to send a direct link of your perfect Hello Bar to anyone.

Say you’re a web developer and know the benefits of having a notification bar on your website. Instead of having meetings pitching the idea, sending around documentation, use the demo to create the desired look and feel of the Hello Bar and send it to the parties involved.

Now that you’ve seen what the Hello Bar looks like on your site, created the perfect look, sent it to everyone, go ahead and click “Add This To Your Site” and it’ll be saved to your account or you’ll just need 60 seconds to sign up for account.

More new features and improvements coming. Let us know what you think of the demo and how it has worked for you.