Create Guided Tours For Tutorials & New Features – Walkthrough.js

Preview:

Description:

walkthrough.js is a lightweight, zero-dependency JavaScript library to create interactive guided tours for Tutorials & New Features of your website & app.

Key features:

• Works with any 3rd framework.
• Dynamic step creation.
• Auto scrolls the page to the current step.
• Highlights the current step (section).

How to use it:

Installation.

# NPM
$ npm install walkthrough-js --save

Import the walkthrough-js into the document.

<script src="dist/walkthrough.bundle.js"></script>

Add steps to the guided tour as follows:

let steps = [];
steps.push({
  title: 'Step 1',
  desc: 'This is Step 1',
  selector: '#step-1',
  selectorIndex: 0,
  element: null, // stage element
  autoread: true,
  fixMargin: true,
  fixPadding: true,
  top: 0, // top offset
  left: 0, // left offset
  onEnter: null, // onEnter callback
  onExit: null // onExit callback
});
steps.push({
  title: 'Step 2',
  desc: 'This is Step 2',
  selector: '#step-2',
  fixPadding: true
});
steps.push({
  title: 'Step 3',
  desc: 'This is Step 3',
  selector: '#step-3',
  fixPadding: true
});
// more steps here

Initialize the walkthrough library and done.

const wt = new Walkthrough();

Do something when finished.

wt.setTutorial(steps).subscribe(
  () => {
    console.log('Walkthrough Done!');
  }
);

Changelog:

v0.0.8 (08/19/2020)

• audit fix