Create Guided Tour Of Various Elements – steps.js

Category: Javascript | July 29, 2019
Author: pjmazenot
Views Total: 151
Official Page: Go to website
Last Update: July 29, 2019
License: MIT

Preview:

Create Guided Tour Of Various Elements – steps.js

Description:

Yet another JavaScript library that helps developers create guided tours to drive the user’s focus across the web application.

Features:

  • Supports unlimited steps.
  • Custom trigger events to go to the next step.
  • Custom step styles.
  • Fast and simple to use.

How to use it:

Link to the steps.js library and we’re ready to go.

<script src="build/stepsjs.min.js"></script>

Create steps with element ID, titles, descriptions and custom trigger events as follows:

var steps = [
    {
        elementId: 'email',
        title: 'Step 1: Type your email',
        description: 'Type your email to go to the next step',
        triggerNext: ['change', 'keydown']
    },
    {
        elementId: 'pwd',
        title: 'Step 2: Enter the password',
        description: 'Enter the password to go to the next step',
        triggerNext: ['change', 'keydown']
    },
    {
        elementId: 'finish',
        title: 'Step 3: Finish the tour',
        description: 'Click on the "Submit" button to finish the tour',
        triggerNext: ['click', 'touchstart']
    }
];

Initialize the library to start the tour.

var myTour = new StepsJs(steps);

Available options to customize the guided tour.

var myTour = new StepsJs(steps,{
    duration: 300, // in ms
    styles: {
      frame: {
        customClass: '',
        borderWidth: 3,
        borderColor: '#ff0000'
      },
      hint: {
        customClass: '',
        borderWidth: 1,
        borderColor: '#00ff00',
        borderRadius: 5,
        backgroundColor: '#dbffdb'
      }
    }
});

Force the tour to go to the next step.

myTour.processStep('next');

You Might Be Interested In:


Leave a Reply