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.

// To store it you could do:
const boardme = window.boardme;

// To use it within TypeScript projects could could do:
declare const boardme: any;

// It is a good idea to play it safe when importing external packages.
// A quick check before using the API is good practice!
boardme && boardme.apiCall();

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.

npm install boardme --save

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

const guideIdentifier = "ee5d7d44-12e7-4029-8b1a-e44ff75701eg";

const guide = boardme.getGuide( guideIdentifier );

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

const guideIdentifier = "ee5d7d44-12e7-4029-8b1a-e44ff75701eg";
const targetElement = document.getElementById( "target" );

boardme.renderGuide( guideIdentifier, targetElement );

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

const guideIdentifier = "ee5d7d44-12e7-4029-8b1a-e44ff75701eg";

boardme.clearGuide( guideIdentifier );

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

const guideIdentifiers = [
    "ee5d7d44-12e7-4029-8b1a-e44ff75601eg",
    "aa1d7d44-12e7-4029-8b1a-e44ff75501ex",
    "bb7d7d44-12e7-4029-8b1a-e44ff75701eu"
];

boardme.clearGuides( guideIdentifiers );

Guide.show();

It renders the guide onto the screen.

Returns

• Guide - boardme Guide object.

Example

const guideIdentifier = "ee5d7d44-12e7-4029-8b1a-e44ff75701eg";

const guide = boardme.getGuide( guideIdentifier );

guide.show();

Guide.hide();

It hides the guide from the screen.

Returns

• Guide - boardme Guide object.

Example

const guideIdentifier = "ee5d7d44-12e7-4029-8b1a-e44ff75701eg";

const guide = boardme.getGuide( guideIdentifier );

guide.show();

// Guide is hidden 3 seconds after it was shown
setTimeout(() => guide.hide(), 3000);

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

const guideIdentifier = "ee5d7d44-12e7-4029-8b1a-e44ff75701eg";

const guide = boardme.getGuide( guideIdentifier );

guide.onSubmit( () => {
    console.log( "The guide has been submitted." );
});

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

const guideIdentifier = "ee5d7d44-12e7-4029-8b1a-e44ff75701eg";

const guide = boardme.getGuide( guideIdentifier );

guide.onDismiss( () => {
    console.log( "The guide has been dismissed." );
});

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

import {GuideBehavior} from "boardme";

const guideIdentifier = "ee5d7d44-12e7-4029-8b1a-e44ff75701eg";

const guide = boardme.getGuide( guideIdentifier );

guide.setBehavior( GuideBehavior.MANUAL ); // or .setBehavior( "manual" );

guide.show();

// ... some criteria is met in your app

guide.hide();