Performance Stats Learn More
A self-hosted, fully-customizable JavaScript solution for building notification bars.
Unlimited Sites & Clicks • One-Time Purchase
For stats tracking, A/B testing, a GUI interface and more check out HelloBar.com
Taking Hello Bar Further
Once you have uploaded the Solo files to your server, add the hellobar.css and hellobar.js files to the <head> of your page, just before the </head>
... <link type="text/css" rel="stylesheet" href="hellobar-solo/hellobar.css" /> <script type="text/javascript" src="hellobar-solo/hellobar.js"></script> </head> ...
Add the new HelloBar(); command to the end of the document, just before the closing </body> tag.
...
<script type="text/javascript">
new HelloBar( "Enter your Hello Bar's message here", {
showWait: 1000
}, 1.0 );
</script>
</body>
</html>
Many of our users have requested specific instructions for installing Hello Bar Solo on Wordpress.org sites.
Read the Guide| Option Name | Default | Description |
| positioning | 'sticky' | (string) The positioning of the bar. Can be: sticky, overlap, fixed or push |
| tabSide | 'right' | (string)The side of the bar the tab is on. Can be: right or left |
| barColor | '#eb593c' | (string)The background color of the Hello Bar. This can be either a hex string or a rgb string: #eb593c or rgb(235,89,60) |
| textColor | '#ffffff' | (string)The text color of the Hello Bar. This can be either a hex string or a rgb string: #ffffff or rgb(255,255,255) |
| linkColor | '#80ccff' | (string)The link color of the Hello Bar. This can be either a hex string or a rgb string: #80ccff or rgb(128,204,255) |
| borderColor | '#ffffff' | (string)The border color of the Hello Bar. This can be either a hex string or a rgb string: #ffffff or rgb(255,255,255) |
| borderSize | 3 | (integer) The size of the Hello Bar border in pixels. Zero removes the border. |
| texture | (not set) | (string) The background texture of the Hello Bar. Can be: noise, hard-shine, light-gradient, dark-gradient, carbon, paper, diagonal, linen, stitch, diamond. Note: Only works on bars that are the default 30 pixels tall. |
| helloBarLogo | true | (boolean) Should the Hello Bar logo be displayed? true or false. |
| Option Name | Default | Description |
| height | 30 | (integer) The height off the colored bar portion of the hello bar in pixels. (There is a minimum value of 30 pixels) |
| showWait | 0 | (integer) The number of milliseconds the bar stays hidden for before being shown the first time. Zero means the bar is shown immediately. |
| hideAfter | (not set) | (integer) The number of milliseconds after the bar is shown before it hides itself. |
| wiggleWait | 15000 | (integer) The number of milliseconds between tab wiggles. |
| fontSize | (not set) | (string) The font size of the Hello Bar's content as a CSS value (pixels, ems, ens) eg: 17px or 1.15em |
| lineHeight | (not set) | (string) The line height of the Hello Bar's content as a CSS value (pixels, ems, ens) eg: 17px or 1.15em |
| fontWeight | (not set) | (string) The font weight of the Hello Bar's content as a CSS value (normal, bold, 100, 400, 500, 700, etc.) |
| fontStyle | (not set) | (string) The font style of the Hello Bar's content as a CSS value (normal, italic, oblique, underline) |
| fontFamily | (not set) | (string) A CSS font stack for the Hello Bar's content. eg: 'Georgia, Cambria, Times New Roman, Times, serif' |
| Option Name | Default | Description |
| googleFont | (not set) | (string) A font name from Google's web font directory. eg: 'Ubuntu'or 'Lobster+Two:400,700'. Note: The font name can be suffixed with the weights desired and a plus symbol can be used for a space. It isn't recommended to use this feature if you already have Google Fonts on your site. If you're already loading Google fonts, just use CSS to style your Hello Bar's text. |
| tabRadius | '5px' | (string) This should be a CSS value (pixels, ems, ens) eg: 15px or 0.25em The default tab radius is technically set in the hellobar.css file. |
| speed | 500 | (integer) How fast the Hello Bar opens/closes in milliseconds. (To be more precise, this is how long the animation lasts) |
| shadow | true | (boolean) Should the Hello Bar display a shadow along the bottom edge? true or false. |
| forgetful | false | (boolean) Should the Hello Bar persistently reappear? true or false. |
| transition | 'bouncy' | (string) The animator.js[http://berniesumption.com/software/animator/] Transition that should be used to animate the bar. Can be: easeInOut, linear, easeIn, strongEaseIn, easeOut, strongEaseOut, elastic, veryElastic, bouncy, veryBouncy |
| Callback Name | Description |
| onReady | (function) The onReady callback is executed the instant that the Hello Bar is finished being built. If you need to inject content into your bar or prep it for another action with events, this is where you would do that work. |
| onOpen | (function) The onOpen callback is executed as soon as the opening animation starts. To put it another way, as soon as the open tab is clicked, or the bar begins to animate open. It is not fired when the bar is already open as the page is loading. |
| afterOpen | (function) The afterOpen callback happens as soon as the opening animation is complete. This is a good place to start executing other bits of JavaScript that depend on the message being visible or the animation completing. |
| onClose | (function) The onClose callback is executed as soon as the closing animation starts. It occurs whether the bar closes automatically or a user clicks the close arrow. it does not execute if the bar is already closed when the page loads. |
| afterClose | (function) The afterClose callback happens as soon as the closing animation is complete. |
Your basic minimal Hello Bar snippet, this example creates a Hello Bar with text
<script type="text/javascript">
new HelloBar( "Enter your Hello Bar's message here", {}, 1.0 );
</script>
A simple Hello Bar, with the same options as the one above, with the positioning option set to 'push' (which pushes the content below the Hello Bar down) and the barColor option set to a bright vibrant red.
<script type="text/javascript">
new HelloBar( "Enter your Hello Bar's message here", {
showWait: 1000,
positioning: 'push',
barColor: '#ff0000'
}, 1.0 );
</script>
The same Hello Bar as above with the tabRadius option set to 0 (this removes the tab radius), the shadow options set to false(this removes the shadow) and the helloBarLogo option set to a false (which hides the Hello Bar logo).
<script type="text/javascript">
new HelloBar( "Enter your Hello Bar's message here", {
showWait: 1000,
positioning: 'push',
barColor: '#ff0000',
tabRadius: '0px',
shadow: false,
helloBarLogo: false
}, 1.0 );
</script>
In the code example below, the afterOpen callback has been set to an anonymous function (this should be familiar to you if you're a jQuery user). The function will open an alert dialog after the Hello Bar opens. Since the callback function has access to the Hello Bar object, we can display the Hello Bar's current message as well.
<script type="text/javascript">
new HelloBar( "Enter your Hello Bar's message here", {
showWait: 1000,
positioning: 'push',
barColor: '#ff0000',
borderSize: 0,
helloBarLogo: false,
afterOpen: function( hellobar, options, name ){
alert("This Hello Bar's message is: '" + hellobar.message + "'");
}
}, 1.0 );
</script>