Guides

Learn everything about boardme Guides.

Overview

The Guide is the basic building block of user onboarding in boardme.

A Guide is used to deliver a piece of useful information for the user or prompt them to take action. Guides are grouped in Flows, but they can be easily moved from one flow to another.

Your guides can contain rich text, links as well as images, and even gifs. They can look very different depending on how you choose to style them, but they can be broken down into 3 main categories.

Links within Guides are not limited to outgoing links! You can use links to take your user to other URLs within your website.

You can append query parameters to your URLs which are used as URL triggers in other Flows, establishing Guide-to-Flow communication.

Cards

The Card type guides are straight forward and useful. This is the guide type that you are asked to create when you are first trying boardme.

This Guide type can be used to kick-off onboarding Flows or deliver information in a casual manner. For eliciting user action Tooltips and Modals are better, but there are cases when you would like to provide the user with an easily dismissible and casual bit of information. For those cases, the Card type guide is your friend.

The default position of the Guide is bottom-left, but it can be configured to display on 8 different positions on the screen.

Tooltips

Tooltips are really useful for showing the user around an application. They can point to specific features or buttons within your app and prompt the user to action.

The Tooltips & Hotspots are dependent on an HTML Element where they are shown, this is called the Target Element.

Providing a Target Element for a tooltip is really easy, all you need is the CSS Selector of the element.

In most cases, this is easy to get and it all comes down to a simple copy and paste, however in case you are not technical, or you feel like this would cause you trouble, please watch this video on how to automate the process in under 2 minutes.

A great tool I would recommend for generating CSS Selectors automatically is the Selector Gadget Chrome Extension.

Tooltips can be dismissible or action-driven, meaning that they can be dismissed by the user, or they only disappear if a user clicks on the Target Element.

The default position of the Guide is auto (it calculates a place for itself to render) but it can be positioned to 12 different positions around the Target Element.

Modals

Modals are the go-to guide for delivering big chunks of important information.

You can use them to greet the user at the beginning of an onboarding Flow, or to prompt them to take an important action.

You can use a large header image, or drag and drop small images into the guide content.

Videos

The Video type guide is a great asset for embedding short video tutorials into your onboarding flow.

There are cases where a simple tip or a paragraph of text is not enough to convey the complexity of a feature. Asking the user to reference documentation or redirecting them to an external platform to watch a tutorial might break the onboarding experience.

This is where Video type guides shine. You can use them to embed short videos from any platform and make your onboarding experience seamless.

Guide Editor

The Guide Editor is where most of the work takes place within boardme.

It provides an intuitive user interface where you can Create and Edit guides within the Flow of your choice.

The Guide Editor will display the relevant control panel depending on the selected Guide.

There are 3 main sections within the Guide Editor that you should familiarize yourself with.

Header

The Header element's main functionality is to display the Flow state controls.

Here you can Publish, Unpublish, and Discard Changes that you made to a published flow.

Navigator

The Navigator is a simple slideshow-like element below the header that contains all the Guides of the selected Flow, and it also displays the Flow State in the top left corner.

It allows you to create Guides as well as reorganize them by drag-and-dropping them inside the Navigator.

To select a Guide from the Navigator and load it into the Editor, you can double click on the guide's thumbnail.

Control Panel

The Control Panel changes depending on the Guide that was loaded into the editor.

The constant properties of the Guide (name and theme) are displayed at the top of the panel along with two controls that allow you to delete and duplicate your guide.

Below the constant properties, there are 3 tabs that help you configure your Guide.

• Configuration Tab - containing the settings of the target guide

• Content Tab - containing any custom content that was attached. Custom content is limited to images for the time being, but the custom HTML templating feature is on the roadmap

• Position Tab - containing the position widget for the Card and Tooltip

Live Preview

The Live Preview allows you to edit your guide in real-time.

You can simply click on the guide and start typing and formatting your text with the rich text editor. For formatting your text you can highlight it and select a style from the menu, or include links.

The Live Preview also allows you to include images and gifs by drag-and-dropping them onto the guide!