Introduction

Very simple said, onboardX inject different types of widgets in your web app or website in order to educate your users or promote new features. You are completely responsible for the content of these widgets.
In this guide you will find out how onboardX works and how we handle different type of situations.

Installation


You can manage multiple apps with one onboardX account. Each app have its own unique integration code.
For example: you can consider is a different app, the Dev or Staging environment.

Javascript Snippet

Our implementation is not so different than any other widget or analytics platform.
Is a javascript code you have to insert inside your page source (in <head>) and to be sure is filled with correct informations.

The tracking code is a little different if your app is a web app (with identifiable users) or a website (with anonymous visitors). This is important because some features are not available for anonymous visitors (for example you cannot use the targeting if we don't have access to different type of informations about users).


Web app (control identity)
<script type="text/javascript">
window.onboardX = {
  'onepage' : false, //true if your app is single page application type
  'obx_domain' : 'onboardx.com', //don't change
  'app': 'provided by onboardX', //don't change
  'email':'the logged user email', //required
  'name':'the logged user name', //required
  'signed_up':the logged used creating timestamp, //required (timestamp)
  //optional parameters
  'plan_type':'trial',
  'anything':44
};
(function(o,b,x){ var a=o.createElement(b);a.type="text/javascript";a.async=!0;a.src=x;var s=o.getElementsByTagName(b)[0];s.parentNode.insertBefore(a,s);})(document,"script","//cdn."+window.onboardX.obx_domain+"/obx.js");
</script>
Website (anonymous)
<script type="text/javascript">
window.onboardX = {
  'onepage' : false, //true if your app is single page application type
  'obx_domain' : 'onboardx.com', //don't change
  'app': 'provided by onboardX', //don't change
  'type':'visitor' //don't change
};
(function(o,b,x){ var a=o.createElement(b);a.type="text/javascript";a.async=!0;a.src=x;var s=o.getElementsByTagName(b)[0];s.parentNode.insertBefore(a,s);})(document,"script","//cdn."+window.onboardX.obx_domain+"/obx.js");
</script>

Our code have only 7KB, is served minified from a CDN and is loaded asyncronously so it will not slow down your web app.
* you can implement it using a Tag Manager too.

Custom parameters

One of the most important feature of onboardX is the targeting. You can have the option to choose what users should see a widget or not. To do this, we need to have access to those attributes you want to use for creating the targeting rules. To do this, you have to change a little bit the integration code.

<script type="text/javascript">
window.onboardX = {
  ...
  'age':'29',
  'plan_type':'FREE'
   ...
};
</script>

All the attributes could be used as text inside the widgets like this: {age} and it will be replaced by magic with the real value.
* you can add as many attributes you need.

Single Page Application

If your app is a single page application, the integration code should be slightly modified by setting true the window.onboardX.onepage variable.

<script type="text/javascript">
window.onboardX = {
  'onepage' : true
  ...
};
</script>

Another change is anytime when you render another page, you have to call the following function. This is necessary to let us know there's a new page loaded and to search and display widgets available for.

setTimeout(function() { OBXsdk.init(); }, 2000);

Self hosting code

Coming soon!

Javascript SDK

We made available a small library of functions you can use if your use case requires.

Trigger guides by code

Sometimes is necessary to control manually when a guide should be triggered (eg: when you have a multitabs flow powered by javascript and the page is not reloaded).

Trigger a guide:
OBXsdk.run('guide ID');
Trigger a certain step (step #2 in this example) of a guide:
OBXsdk.run('guide ID',2);
* you can find the guide ID in the guide results page

Track events

These methods are helping you to decide what happens next after a guide event is triggered.
For example you can send some informations to a custom analytics tool (Google Analytics, Mixpanel, Kissmetrics etc).

Triggered when a guide step is visible
jQuery(window).on('obx.guide_step', function(guide) {
    console.log(guide); //return guide.id - guide.step - guide.percent
});
Triggered when a guide is completed
jQuery(window).on('obx.guide_end', function(guide) {
    console.log(guide); //return guide.id
});
Triggered when a guide is skipped
jQuery(window).on('obx.guide_skip', function(guide) {
    console.log(guide); //return guide.id and guide.step
});