Advanced guide to the Boostn.js SDK

Here you'll find all the methods available with Boostn.js, the browser-side Javascript library provided by Boostn.

Installing the Boostn.js SDK

First, you need to initialize Boostn on your website. Check out the guide on how to install Boostn for more details. Then, also include the following script in any pages where Boostn.js has been initialized:

<script>
window.Boostn = window.Boostn || {
  queue: [],
  call: function () {
    window.Boostn.queue.push(arguments)
  }
}
</script>

Callbacks

Boostn.js allows you to execute a custom callback function whenever one of the following events is fired:

onInit

Fired when a booster instance has been initialized, but it still needs to be displayed.

Boostn.call('onInit', function(event) {
  // Your onInit event callback
});

Here's the event object:

{
  uid: "abc12d3",
  name: "Your booster name"
}

onShow

Fired when a booster has been both initialized and displayed.

Boostn.call('onShow', function(event) {
  // Your onShow event callback 
});

Here's the event object:

{
  uid: "abc12d3",
  name: "Your booster name"
}

onStepSubmit

Fired upon submit of a booster step. Thus, when the user clicks on the call-to-action button of the main booster as well as of its teaser or success message.

For more information on the booster steps and how to add them, check out the dedicated guide here.

Boostn.call('onStepSubmit', function(event) {
  // Your onStepSubmit event callback
});

Here's the event object:

{
  uid: "abc12d3",
  name: "Your booster name",
  step: "step_1",
  data: {
    email: "user@example.com"
  }
}

The step property can take on one of the following values:

• teaser when the user submits the teaser
• step_1 when the user submits the main booster
• success when the user submits the success step

In case the booster contains a form, the data property will include any data submitted through it.

onSuccess

Fired upon submit of the main booster. Thus, when the user submits the form or clicks on the main call-to-action button AND the booster is closed.

Boostn.call('onSuccess', function(event) {
  // Your onSuccess event callback
});

Here's the event object:

{
  uid: "abc12d3",
  name: "Your booster name"
}

onCancel

Fired after the booster has been closed without success. So, the main booster action hasn't occured: the user neither submitted the form nor clicked on the main call-to-action button.

Boostn.call('onCancel', function(event) {
  // Your onCancel event callback
});

Here's the event object:

{
  uid: "abc12d3",
  name: "Your booster name"
}

Custom triggers

When configuring a booster, you can also trigger it by firing a custom event. Check the dedicated guide for more information on how to trigger a booster.

Once configured, you'll be able to trigger this custom event by using its name within the following method call:

Boostn.call('trigger', 'your_custom_event_name');

User traits

A booster can also be shown only to users with specific custom properties (or traits).

First of all, pass your users' properties to Boostn via the identify method. This method accepts an object with one or more user traits.

The method call will look like this:

Boostn.call('identify', {
  trial_expiring: 'true',
  billing_plan: 'enterprise'
});

At this point you'll only have to add the names of the properties you want to monitor into the User traits filter section along with the values they're supposed to assume in order for the booster to be actually displayed:

Furthermore, any user traits passed to Boostn will be appended to each booster form the user interacts with.

For instance, if you're using a booster to ask the user a question, in the Data section on Boostn you'll find the answers to your question as well as the user traits of the respondents. Here's an example: