Using Helppier API

Helppier How to start a guide from the API:

Helppier API can be used for several use cases, for instance, to show different set of in-app messages or guided tours to different set of users, to change current language that is showed, or to load, open or play an in-app messages or guide.

To configure the API, you can add the following properties to your Snippet Code on the API callback:

Segmentation

Segmentation allows you to show different guides for different types of users (first time, regular, etc) by customizing the dimensions or values of any set conditions.
 

• Segmentation / Dynamic Ids

helppierSegmentation = {userId: userLogedin, gender: “male”}

It is possible to show or hide the login menu of your widget.  

• Show/Hide login

window.helppierShowLogin = false;

Choose between showing or hiding the widget’s launcher on your webpage.

• Show/Hide launcher

window.helppierShowLauncher = false;

With Helppier you can change colors and font to match to your website or web app.

• Launcher Color

window.helppierColorSelector = '.masterBorderColor';
window.helppierColorAtributte = ‘border-color';

Languages
 

By default, the widget language displayed is based on the lang property of the HTML tag. If you want to override this functionality, you can define the language through the variable:

• window.helppierCurrentPageLanguage = "pt"

Set the language to which the tutorials’ text will be saved and assigned to:

• window.defaultLanguage = "pt"

How to open Helppier resource center from the API:

Add the following code after the code snippet is already loaded. Recommended to use if want hide our launcher and to use one of your buttons or links to open the resource center:

var helppierInit = window.helppierInit || function() {console.error("Helppier script not available!")};

helppierInit({silent: false}, function(error, initFunctions) {
});

How to start a guide from the API:

Add the following code after the code snippet is already loaded. Recommended to user interactions, like clicks on buttons. (in green the guide permalink): 

var helppierInit = window.helppierInit || function() {console.error("Helppier script not available!")};

helppierInit({silent: true}, function(error, initFunctions) {
initFunctions.startPlay('oV3VYgD5X');
});
 
Note: To find the guide permalink, should copy its permalink from the context menu of the guide. After this, paste the permalink anywhere.

How to load all Helppier assets (Javascript and css) by default:

Helppier by default only adds a small 10k bytes of JavaScript file to the web page and all the code is added to not affect the page loading. The rest of its app code and content is added to the webpage only when the user actually clicks the Helppier widget or if an app-message or guided tour is set to start automatically.
There is an option to preload Helppier app code and content to be available when the webpage is loaded. This will greatly increase Helppier load speed for SPAs or to allow the browser to cache our assets even before the user needs to see the guides. 

• window.helppierAutoload = true

The following events are triggered by Helppier

Click Play Next - Triggered whenever a user clicks on the "next" button in the guide or uses the right arrow key.

Click Play Stop - Triggered whenever a user stops a guide by clicking on the "stop" or the close button or uses the "Esc" key.

Click on Tools - Triggered whenever someone selects one of the tools

Click Close - Triggered whenever a user closes a guide by clicking on the close button or uses the "Esc" key.

Click Play - Triggered whenever a user starts a guide by clicking on the "play" icon.