Interactive Guide For Web App – Driver.js

Preview:

Description:

Driver.js is a lightweight yet powerful JavaScript library to create an animated, interactive, user-friendly visual guide for any web elements.

Features:

• With or without animations.
• With or without background overlay.
• Highlights web elements when the guide is active.
• Popover style step-by-step guide.

Basic usage:

Installation.

# Yarn
$ yarn add driver.js

# NPM
$ npm install driver.js --save

Insert the Driver.js’ JavaScript and CSS files into the html document.

<link rel="stylesheet" href="/path/to/driver.min.css">
<script src="/path/to/driver.min.js"></script>

Create new Driver instance and we’re ready to go.

const myDriver = new Driver();

Highlight a specific element within the document.

myDriver.highlight('#element');

Highlight a specific element with a popover.

myDriver.highlight({
  element: '#element',
  popover: {
    title: 'Popover Title',
    description: 'Description',
  }
});

Create a step-by-step guide.

// define your steps
myDriver.defineSteps([
  {
    element: '#element-1',
    popover: {
      title: 'Title 1',
      description: 'Desc 1',
      position: 'left',
      offset: 20
    }
  },
  {
    element: '#element-2',
    popover: {
      title: 'Title 2',
      description: 'Desc 2',
      position: 'right'
    }
  },
  {
    element: '#element-3',
    popover: {
      title: 'Title 3',
      description: 'Desc 3',
      position: 'right'
    }
  },
  ...
]);

// start the guide
driver.start();

All possible options for the Driver.js.

const driver = new Driver({

      // enable the animation
      animate: true,

      // background opacity
      opacity: 0.75,   

      // padding of element                 
      padding: 10, 

      // is closable?
      allowClose: true, 

      // Allow controlling through keyboard (escape to close, arrow keys to move)
      keyboardControl: true,

      // Whether the click on overlay should move next
      overlayClickNext: false,      

      // text on the Done button
      doneBtnText: 'Done', 

      // text on the Close button
      closeBtnText: 'Close',    

      // background color        
      stageBackground: '#ffffff',

      // text on the Next button
      nextBtnText: 'Next',

      // text on the Prev button
      prevBtnText: 'Previous',

      // shows navigation buttons
      showButtons: false,

      // scrollIntoView options
      scrollIntoViewOptions: {},

      // callback functions
      onHighlightStarted: (Element) {},
      onHighlighted: (Element) {}, 
      onDeselected: (Element) {},  
      onReset: () {},   
      onNext: () {},
      onPrevious: () {},    
});

Changelog:

v0.7.1 (10/12/2018)

• Add more options
• Optimize

v0.6.0 (06/30/2018)

• Add support for asynchronous actions

v0.5.2 (05/23/2018)

• Add keyboardControl option and typo in readme