Use the onboard function to guide your users through the initial steps of using your product, service, or application in an interactive way. Using the function can improve user experience, increase your engagement and steamline guidance. To test the onboard function, click on the button below.
Features
You can:
Use as many characters in your tooltips as needed
Change the position of your tooltip
Use HTML tags inside your tooltips
Attach event listeners
Adapting highlight
The border-radius of your highlight will adapt to your element.
The onboarding can be created with any UI element. In this example, we use the Sheet component to handle the onboarding steps.
The first step is to create the UI elements that you want to use to handle onboarding. Depending on your project, this part might differ. In our case, we use a Sheet component.
The first step of actually using the onboard function is creating the steps. The steps are represented by an array of objects. Each step is attached to an HTML element using query selectors. Each object can have the following properties:
Instantiate the onboard function and pass the steps array as the first argument. The onboard function also accepts a second parameter which is the configuration object. In our case, we define three callback function:
onEnd: Executed when the onboarding ends. In this example, we close the modal and reset the previous/next button states.
onPrev: Executed when onboard.next is called.
onNext: Executed when onboard.prev is called.
That configuration object can also have the following other properties:
The onboarding is ended with onboarding.end when the modal is closed.
When the user clicks on the .start button, we can start the onboarding using the onboarding.start method.
When the previous button is clicked, we can call onboarding.prev to regress back to the previous step defined in the steps array. Note that we can use onboarding.getStep to get the current step index and use that to execute additional code, such as disabling the previous button or updating the “Next” button text.
When the next button is clicked, we can call onboarding.next to progress to the next step. Using onboarding.getStep we can find out if the user is at the last step. In this case, we can close the modal and reset the buttons. Note that we don’t need to call onboarding.end to end the onboarding. This is automatically handled when the first or last step is reached.
Accessibility
The onboard function comes with many built-in accessibility features. Onboarding is automatically ended when the user clicks on the overlay or hits the Esc button. These functions can be disabled if necessary using the endOnOverlayClick and endOnEsc props on the configuration object.
The active step is also automatically scrolled into viewport if its not visible when the step is reached. The tooltip and highlight is also repositioned if the size of the viewport changes, making it work responsively across all devices.
You can change the padding of the highlight and adjust the position of the tooltip using the boxPadding and textPadding props.