Shepherd is preserved by the shape of the ship. Contact us for web application consulting, development, and training for your project.

shepherd is a JavaScript library that creates an interactive, accessible, and dynamic visual guide to allow users to learn about new features and functionality in your web application.

How to make use of it:

Install the package.

# Yarn
$ yarn add shepherd.js

# NPM
$ npm install shepherd.js --save

Import the shepherd module.

import Shepherd from 'shepherd.js';

Or import the shepherd.js into the document.

<script src="https://cdn.jsdelivr.net/npm/shepherd.js@latest/dist/js/shepherd.min.js"></script>

Create a brand new tour.

let myTour = new Shepherd.Tour({
    // options here
});

Add steps to the tour.

myTour.addStep({
  id: 'target-element 1',
  title: 'Step 1',
  text: 'This is Step 1',
  attachTo: { 
    element: '.example-css-selector', 
    on: 'bottom'
  },
  buttons: [
    {
      text: 'Next',
      action: tour.next
    }
  ]
});

Start the tour.

myTour.start();

All default tour choices.

let myTour = new Shepherd.Tour({

    // Default options for Steps, created through 'addStep'
    defaultStepOptions: {},

    // An array of steps
    steps: [],

    // An optional "name" for the tour. This will be appended to the the tour's dynamically generated `id` property -- which is also set on the `body` element as the `data-shepherd-active-tour` attribute whenever the tour becomes active.
    tourName: '',

    // Whether or not steps should be placed above a darkened modal overlay. 
    // If true, the overlay will create an opening around the target element so that it can remain interactive
    useModalOverlay: true,

    // Specify container element for the modal
    modalContainer: '',

    // An optional container element for the steps.
    stepsContainer: document.body,

    // Exiting the tour with the escape key will be enabled unless this is explicitly set to false.
    exitOnEsc: true or false,

    // Navigating the tour via left and right arrow keys will be enabled unless this is explicitly set to false.
    keyboardNavigation: true of false,

    // If true, will issue a window.confirm before cancelling
    confirmCancel: false,

    // The message to display in the confirm dialog
    confirmCancelMessage: ''
    
})

All default steps.

myTour.addStep({

  // element ID for the step
  id: '',

  // The text in the body of the step. It can be one of four types:
  // HTML string
  // Array of HTML strings
  // HTMLElement object
  // Function to be executed when the step is built. It must return one the three options above.
  text: '',
  
  // Step title
  title: '',

  // where to attach the step to
  attachTo: { 
    element: '.example-css-selector', 
    on: 'bottom'
  },

  // returns a promise. When the promise resolves, the rest of the show code for the step will execute.
  beforeShowPromise: function (){},

  // allows to click target
  canClickTarget: true,

  // extra classes
  classes: '',

  // an array of buttons to add to the step. 
  buttons: [{
    text: '',
    classes: '',
    secondary: false, // adds secondary button
    action: function (){},
    events: {'mouseover': function(){}},
  }],

  // An action on the page which should advance shepherd to the next step. 
  // It can be of the form "selector event", or an object with those properties. 
  // For example: ".some-element click", or {selector: '.some-element', event: 'click'}. 
  // It doesn't have to be an event inside the tour, it can be any event fired on any element on the page. 
  // You can also always manually advance the Tour by calling myTour.next().
  advanceOn: '',

  // extra class to apply to the attachTo element when it is highlighted
  highlightClass: '',

  // shows cancel link
  cancelIcon: true or false

  // scrolls the page to the current step
  scrollTo: true or false

  // a function that lets you override the default scrollTo behavior and define a custom action to do the scrolling, and possibly other logic
  scrollToHandler: function(){},

  // you can define show, hide, etc events inside when
  when: {},

  // a function that, when it returns true, will show the step. If it returns false, the step will be skipped
  showOn: function(){}
  
});

Tour’s API.

// Methods
myTour.addStep(id, options)
myTour.addSteps(steps)
myTour.getById(id)
myTour.next()
myTour.back()
myTour.cancel()
myTour.hide()
myTour.show([id])
myTour.start()
myTour.getCurrentStep()
myTour.on(eventName, handler, [context])
myTour.off(eventName, [handler])
myTour.once(eventName, handler, [context])

// Events
myTour.on('start', function(){
  // ...
})

myTour.on('show', function(){
  // ...
})

myTour.on('hide', function(){
  // ...
})

myTour.on('cancel', function(){
  // ...
})

myTour.on('complete', function(){
  // ...
})

Step’s API.

// Methods
myStep.show()
myStep.hide()
myStep.cancel()
myStep.complete()
myStep.scrollTo()
myStep.isOpen()
myStep.destroy()
myStep.on(eventName, handler, [context])
myStep.off(eventName, [handler])
myStep.once(eventName, handler, [context])

// Events
myStep.on('destroy', function(){
  // ...
})

myStep.on('show', function(){
  // ...
})

myStep.on('hide', function(){
  // ...
})

myTour.on('cancel', function(){
  // ...
})

myTour.on('complete', function(){
  // ...
})

myTour.on('before-hide', function(){
  // ...
})

myTour.on('before-show', function(){
  // ...
})

See Demo And Download

Official Website(shipshapecode): Click Here

This superior jQuery/javascript plugin is developed by shipshapecode. For extra Advanced Usage, please go to the official website.