walkthrough-js

A javascript library for easy walkthrough and site tour / tutorial / step-by-step / how-to / guide

full documentation and demo

Installation

$ cd your-project
$ npm install walkthrough-js --save

Usage

include script:

<script type="text/javascript" src="node_modules/walkthrough-js/dist/walkthrough.bundle.js"></script>

or use ES6 (ESNext):

import { Walkthrough } from "walkthrough-js/dist/walkthrough";
import { TutorialStage } from 'walkthrough-js/dist/interface';

initialize component:

const wt = new Walkthrough();
let steps = [] as Array<TutorialStage>;
// define steps . . .
steps.push({
    title: 'Title:',
    desc: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry . . .',
    selector: '#Example'
});
// start the tour
wt.setTutorial(steps);

Options

import { TutorialOptions } from 'walkthrough-js/dist/interface';

let options = new TutorialOptions();
options.identifier: 'my_page';
options.maxIdentifier = 2;

wt.setTutorial(steps, options);