Shepherd, guided user tours of your application

Shepherd is a JavaScript library that provides a simple interface for creating guided user journeys in web applications. It is framework independent, easy to use and works great on both desktop and mobile apps.

Guided user journeys or product tours are a popular way to onboard new users and help existing users discover new features in apps.

To start a new guided tour using Shaperd, install the library using npm/yarn or get it directly from the CDN provided in the installation guide then initialize the tour and add the desired stops to the tour following the example below.

// only needed when installing via npm/yarn
import Shepherd from 'shepherd.js';

const exampleTour = new Shepherd.Tour({
  useModalOverlay: true,
  defaultStepOptions: {
    scrollTo: true

In this example, we add two custom properties during initialization.

useModalOverlay creates a backdrop behind the tour modal and the target element, making it much more readable.

scroll to tells Shepherd to scroll the target element into view when the step is displayed.

  id: 'first-step',
  text: 'This is the first step of the tour',
  attachTo: {
    element: '.example-css-selector',
    on: 'bottom'

Once the tour is initialized, the developer adds the individual steps through the addSteps method, passing in an array of steps.

Ultimately, tour.start() will start the tour. Developers should consider adding a setTimeout to avoid triggering the visit immediately. Developers should also track which tours have been shown to the user to avoid showing them again on each visit.

The defaults used by Shepherd do not take advantage of the capabilities of the library, and developers are advised to read the full tutorial and API documentation in order to get the most out of the library.

It should be noted that under the hood Shepherd uses Floating UI, officially called Popper.jsa tooltip and popover positioning engine that ensures that dialog windows always remain visible and correctly positioned.

While developers can use Shepherd out-of-the-box with any framework, there are plenty of user-managed libraries for easy integration (such as React Shepherd). Developers can find links to popular integrations in the Shepherd Github Repository.

Shepherd’s source code can be found at official repository on Github and is provided as part of the MIT license.

Developers are encouraged to participate in the development and maintenance of Shepherd by following the contribution guide.

Source link

Comments are closed.