Get started with shepherd CDN

MIT licensed

The Shepherd.js library simplistically builds user tours and guides in web apps.

Tags:
  • guider
  • tour
  • javascript
  • css

Stable version

Copied!

How to start using shepherd CDN


// Include Shepherd library from the CDN
const shepherd = new window.Shepherd.Tour({
  defaults: {
    classes: 'shepherd-theme-arrows',
    scrollTo: false,
  },
});

// Define your tour steps
const steps = [
  {
    text: 'Welcome to our application!',
    attachTo: {
      element: '#welcome-message',
      on: 'bottom',
    },
  },
  {
    text: 'This is the dashboard.',
    attachTo: {
      element: '#dashboard',
      on: 'right',
    },
    buttons: [
      {
        text: 'Next',
        action: shepherd.next,
      },
    ],
  },
  {
    text: 'You can customize the tour steps.',
    attachTo: {
      element: '#customizable',
      on: 'bottom',
    },
    buttons: [
      {
        text: 'Next',
        action: shepherd.next,
      },
      {
        text: 'Customize this step',
        action: function() {
          console.log('Customizing step...');
        },
      },
    ],
  },
];

// Initialize the tour
shepherd.addSteps(steps).start();

All versions