JavaScript API

Please e-mail if you have specific requests or questions.

HelpBubble.API.setPosition(HelpBubblePosition.Right, HelpBubblePosition.Bottom)

Move the Bubble to the bottom-right hand corner. Options are [HelpBubblePosition.Left, HelpBubblePosition.Center, HelpBubblePosition.Right] and [HelpBubblePosition.Top, HelpBubblePosition.Bottom].

HelpBubble.API.setButtonStyle("opacity","0.5")
HelpBubble.API.setMenuStyle("background","#7C7CAA")

Customize the Help Bubble button and the menu with any CSS key/value. You may use CSS in your own stylesheet if you look at our IDs, but this is the official and most reliable way to customize the Help Bubble.

HelpBubble.API.setText("Don't Panic")

Changes the text of the Help Bubble to say whatever you want.

HelpBubble.API.open()
HelpBubble.API.close()

This API call can be used to open or close the Help Bubble on demand. For example, you can wait 30 seconds after the page loads, and pro-actively offer help to the user. Related Tip: Add #helpbubble to any URL on your site, and the bubble will open automatically on page load.

HelpBubble.API.setAnalytics("UA-836430-26")

Integrate with Google Analytics. Registering your Google Analytics Web Property ID will cause Help Bubble to stream analytics events to your existing Google Analytics account. The Help Bubble events will appear as pageviews in all relevant reports when the bubble is opened, or, when a topic is clicked with the following URL structure:

• /HelpBubble/open
• /HelpBubble/topic/What+is+Help+Bubble?

HelpBubble.API.cloakURL("/user.php")

Make the Help Bubble act like it is on another URL. This will force the system to bring up a different set of topics, which can be extremely useful in AJAX-based websites. You can have an entire website at a single URL, and keep sending Help Bubble cloak commands as the user navigates your application.

HelpBubble.API.openTopic(5016)

Show an arbitrary help topic from the system. This can be useful to add help links within the page content. For example, you can see we are pulling up topic #5016 here, but how do you know what ID to use?

function OnHelpBubbleInit() {...}
function OnHelpBubbleOpen() {...}
function OnHelpBubbleClose() {...}
function OnHelpBubbleTopicClicked(data) {...}

Help Bubble can execute your own JavaScript code when a user interacts with the Help Bubble. Alternatively, you can define a single function OnHelpBubbleEvent(e, data). The parameter e will match one of the HelpBubbleEvent constants.

Example Usage: Help Bubble code + Init Handler + three API calls

<script type="text/JavaScript">
  var _haas = _haas || {};
  _haas['id'] = 'YOUR_ID';
  (function () {
     var oldonload = window.onload;  window.onload = function(){
     var haas_scr = document.createElement('script');
     haas_scr.setAttribute('async', 'true'); 
     haas_scr.type = 'text/JavaScript';
     haas_scr.src = 'http://cdn.helpbubble.com/js/haas.js';
     document.documentElement.firstChild.appendChild(haas_scr);
     if (oldonload) {oldonload()}};
  }());
  
  //  This function will be called once the Help Bubble is initialized
  function OnHelpBubbleInit() {
    HelpBubble.API.setPosition(HelpBubblePosition.Right, HelpBubblePosition.Bottom);
    HelpBubble.API.setButtonStyle("opacity","0.5");
    HelpBubble.API.open();
  }
</script>