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

Category: Javascript | June 22, 2019
Author: ranbuch
Views Total: 162
Official Page: Go to website
Last Update: June 22, 2019
License: MIT

Preview:

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

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!');
  }
);

You Might Be Interested In:


Leave a Reply