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>
🎗 Keep in mind
Boostn.js is loaded asynchronously. So, the above script allows you to register your callbacks and fire events even when Boostn.js hasn't been loaded yet.
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 teaserstep_1
when the user submits the main boostersuccess
when the user submits the success step
In case the booster contains a form, the data
property will include any data submitted through it.
🎗 Keep in mind
Since teaser and success steps are optional, the onStepSubmit event will be fired only for the steps that have been actually enabled for a given booster.
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:
🎗 Keep in mind
All the properties added as a filter on Boostn must be found among the ones you pass via the identify method. At the same time, all their values need to match those specified on Boostn for the booster to be shown. Thus, an AND condition exists among any user traits specified on Boostn.
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: