# Guide

## 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!

{% hint style="info" %}
If you are using the API within your JavaScript codebase, make sure boardme is imported before your application code!
{% endhint %}

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();
```

{% hint style="success" %}
**NPM** package is available for improved development experience. Check it out [here](https://www.npmjs.com/package/boardme).
{% endhint %}

### 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();


```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://andreigaspar.gitbook.io/boardme/api/guide.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.