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({
      // className to wrap driver.js popover
      className: 'scoped-class',        
      // 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,
      // Put the close button as an X on the top right corner of popover
      xCloseButton: false, 
      // Enables the steps counter
      showCounter: false, 
      // Template of steps counter
      counterTemplate: '{current} of {total}', 
      // scrollIntoView options
      scrollIntoViewOptions: {},
      // callback functions
      onHighlightStarted: (Element) {},
      onHighlighted: (Element) {}, 
      onDeselected: (Element) {},  
      onReset: () {},   
      onNext: () {},
      onPrevious: () {}
         
});

All possible options for steps.

myDriver.defineSteps([
  {
    // element to highlight
    element: '#some-item', 
    // custom stage background color
    stageBackground: '#ffffff',
    popover: {                   
      className: 'popover-class', 
      title: 'Title',
      description: 'Description', 
      showButtons: false, 
      doneBtnText: 'Done',
      closeBtnText: 'Close',
      nextBtnText: 'Next', 
      prevBtnText: 'Previous',
    },
    // callbacks
    onNext: () => {},
    onPrevious: () => {}
  }
]);

API methods.

// checkes if is activated
myDriver.isActivated
// defines steps
driver.defineSteps([ stepDefinition1, stepDefinition2, stepDefinition3 ]);
// starts a specified step
driver.start(stepNumber = 0);
// moves to the next step
driver.moveNext();
// moves to the previous step
driver.movePrevious();
// checks if has the next step
driver.hasNextStep();
// checks if has the previous step
driver.hasPreviousStep();
// prevents the current move
driver.preventMove();
// highlights a specified element/step
driver.highlight(string|stepDefinition);
// refreshes the driver.js
driver.refresh();
// resets the driver.js
driver.reset();
// clear immediately or not
driver.reset(clearImmediately = false);
// checks if has highlighted element
driver.hasHighlightedElement()
// gets the currently highlighted element
const activeElement = driver.getHighlightedElement();
// gets the last highlighted element
const lastActiveElement = driver.getLastHighlightedElement();
// gets screen co-ordinates of the active element
activeElement.getCalculatedPosition(); 
// hides the popover
activeElement.hidePopover();
// shows the popover
activeElement.showPopover();
// gets the DOM node of the highlighted element
activeElement.getNode();

Changelog:

v0.9.8 (03/21/2020)

• Resolve merge conflicts

v0.9.8 (02/29/2020)

• Adds step counter feature

v0.9.7 (06/15/2019)

• Updates Dependencies

v0.9.6 (06/01/2019)

• Fix touch issue
• Error when hiding on an element without popover

v0.9.3 (02/24/2019)

• Update

v0.9.2 (02/10/2019)

• Add more options
• Doc updated

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