Tour by shepherd Guide your users through a tour of your app.

Official documentation

Start tour

---

Usage

Continue reading to find out how you can make such a tour for your own application.

Load script

You should add data-provide="shepherd" to the first <script> tag, so theadmin can load dependencies for you.

Write code

Following code demonstrates a basic setup for one step tour:

var tour = new Shepherd.Tour({
  defaults: {
    classes: 'shepherd-theme-arrows'
  }
});

tour.addStep('example', {
  title: 'Example Shepherd',
  text: 'Creating a Shepherd is easy too! Just create ...',
  attachTo: '.hero-example bottom',
  advanceOn: '.docs-link click'
});

tour.start();

For further guides, view source of this page and scroll down to see our tour sample code; or read the documentation of Shepherd online.