boardme
Search…
Guide
Learn everything about the boardme Guide API.

Overview

boardme allows you programmatic access to Guides. The API calls help you gain fine-grained control over your user onboarding process.
To use the API you need to have boardme installed into your website or application!
If you are using the API within your JavaScript codebase, make sure boardme is imported before your application code!
In your application code, you can find boardme on the window object. It is in the global scope.
1
// To store it you could do:
2
const boardme = window.boardme;
3
​
4
// To use it within TypeScript projects could could do:
5
declare const boardme: any;
6
​
7
// It is a good idea to play it safe when importing external packages.
8
// A quick check before using the API is good practice!
9
boardme && boardme.apiCall();
Copied!
NPM package is available for improved development experience. Check it out here.

Using the NPM Package

You can add boardme to your project by executing the command below in your terminal.
1
npm install boardme --save
Copied!
Once installed, you can import it into your JavaScript or TypeScript code base and start using the API. The autocomplete should help you find the methods you are looking for.
If you are using the boardme API through the installed package, all your calls will be handled gracefully and you don't have to worry about a script import error crashing your application.

boardme.getGuide();

You can fetch and store a Guide by calling this API method. When calling it you have to pass the unique identifier of the Guide as a string.
Once you stored it, you can use the public API available on the guide itself to hook up event listeners, change guide configuration, or alter its behavior.

Arguments

    guideIdentifier - unique identifier of the Guide as a string.

Returns

    Guide - boardme Guide object.

Example

1
const guideIdentifier = "ee5d7d44-12e7-4029-8b1a-e44ff75701eg";
2
​
3
const guide = boardme.getGuide( guideIdentifier );
Copied!
​

boardme.renderGuide();

You can display guides programmatically by calling this API method. When calling it you have to pass in the unique identifier of the Guide as a string.

Arguments

    guideIdentifier - unique identifier of the Guide as a string.
    targetElement - HTML Target Element, only relevant when rendering Tooltips. Optional

Returns

    Guide - boardme Guide object.

Example

1
const guideIdentifier = "ee5d7d44-12e7-4029-8b1a-e44ff75701eg";
2
const targetElement = document.getElementById( "target" );
3
​
4
boardme.renderGuide( guideIdentifier, targetElement );
Copied!

boardme.clearGuide();

You can remove a specific guide from the screen by calling this API method. When calling it you have to pass the unique identifier of the Guide as a string.

Arguments

    guideIdentifier - unique identifier of the Guide as a string.

Example

1
const guideIdentifier = "ee5d7d44-12e7-4029-8b1a-e44ff75701eg";
2
​
3
boardme.clearGuide( guideIdentifier );
Copied!

boardme.clearGuides();

You can remove multiple guides from the screen by calling this API method. When calling it you'll have to pass an array containing the unique identifiers of the Guides you'd like to clear.

Arguments

    guideIdentifiers - unique identifiers of the Guides as a string array.

Example

1
const guideIdentifiers = [
2
"ee5d7d44-12e7-4029-8b1a-e44ff75601eg",
3
"aa1d7d44-12e7-4029-8b1a-e44ff75501ex",
4
"bb7d7d44-12e7-4029-8b1a-e44ff75701eu"
5
];
6
​
7
boardme.clearGuides( guideIdentifiers );
Copied!

Guide.show();

It renders the guide onto the screen.

Returns

    Guide - boardme Guide object.

Example

1
const guideIdentifier = "ee5d7d44-12e7-4029-8b1a-e44ff75701eg";
2
​
3
const guide = boardme.getGuide( guideIdentifier );
4
​
5
guide.show();
Copied!

Guide.hide();

It hides the guide from the screen.

Returns

    Guide - boardme Guide object.

Example

1
const guideIdentifier = "ee5d7d44-12e7-4029-8b1a-e44ff75701eg";
2
​
3
const guide = boardme.getGuide( guideIdentifier );
4
​
5
guide.show();
6
​
7
// Guide is hidden 3 seconds after it was shown
8
setTimeout(() => guide.hide(), 3000);
Copied!

Guide.onSubmit();

You can execute a custom piece of logic when the guide has been submitted by hooking into this event listener.

Arguments

    callback - function to be executed when the Guide has been submitted.

Example

1
const guideIdentifier = "ee5d7d44-12e7-4029-8b1a-e44ff75701eg";
2
​
3
const guide = boardme.getGuide( guideIdentifier );
4
​
5
guide.onSubmit( () => {
6
console.log( "The guide has been submitted." );
7
});
Copied!

Guide.onDismiss();

You can execute a custom piece of logic when the guide has been dismissed by hooking into this event listener.

Arguments

    callback - function to be executed when the Guide has been dismissed.

Example

1
const guideIdentifier = "ee5d7d44-12e7-4029-8b1a-e44ff75701eg";
2
​
3
const guide = boardme.getGuide( guideIdentifier );
4
​
5
guide.onDismiss( () => {
6
console.log( "The guide has been dismissed." );
7
});
Copied!

Guide.setBehavior();

It alters the behavior of the guide and lets you gain extra control over it.

Arguments

    behavior- behavior can be "auto" or "manual". The default behavior is auto, but by setting it to manual you can take programmatic control of the guide. The library exports an enum of type GuideBehavior that you can use for the argument, but strings work as well.

Example

1
import {GuideBehavior} from "boardme";
2
​
3
const guideIdentifier = "ee5d7d44-12e7-4029-8b1a-e44ff75701eg";
4
​
5
const guide = boardme.getGuide( guideIdentifier );
6
​
7
guide.setBehavior( GuideBehavior.MANUAL ); // or .setBehavior( "manual" );
8
​
9
guide.show();
10
​
11
// ... some criteria is met in your app
12
​
13
guide.hide();
14
​
15
​
Copied!
​
Last modified 10mo ago