Simple js library to create an user onboarding
-
Copy the template from
examples/exampleTour
-
On the
runTour
function call, fill the params with:tour-key
: a identifier of you onboarding: replaceexample-tour
with yourssteps
: is a array representing the steps, add as many as you likehint
: tooltip text to be displaying on hoverkey
: a step identifier (must be unique)type
: currently onlybeacon
is supportedtargetElementXpath
: a xpath selecting the desired element in which the beacon will be shownposition
: use a object withtop
,left
,bottom
orright
to position the beacon inside the target elementhintPosition
: useright
orleft
to change tooltip direction
fetchViewedSteps
: a function used to fetch currently viewed steps by the user. The example uses a local storage implementation but you can replace it with an API callrecordStepViewed
: a function used to save a step viewed by the user. As the previous, you can replace it with an API call
-
To run the tour on your page, just import and call
initExampleTour