Sneat Dashboard FREE by ThemeSelection

Tour

We are using Shepherd Tour for tour component. You can use tour to guide a user through your app.
Read the official Shepherd tour for a full list of instructions and other options.

Usage#

In order to use shepherd tour on your page, It is required to include the following vendors css in the "Vendors CSS" area from the page's header:

<link rel="stylesheet" href="../../assets/vendor/libs/shepherd/shepherd.css" />

Include the following vendors script in the "Vendors JS" area from the page's footer:

<script src="../../assets/vendor/libs/shepherd/shepherd.js" />

Example#

Using shepherd tour is really simple all you have to do is initialize tour and add steps like on below example

<button class="btn btn-primary" id="shepherd-example">
  Start tour
</button>

const startBtn = document.querySelector('#shepherd-example');

function setupTour(tour) {
  const backBtnClass = 'btn btn-sm btn-label-secondary md-btn-flat',
    nextBtnClass = 'btn btn-sm btn-primary btn-next';
  tour.addStep({
    title: 'Navbar',
    text: 'This is your navbar',
    attachTo: { element: '.navbar', on: 'bottom' },
    buttons: [
      {
        action: tour.cancel,
        classes: backBtnClass,
        text: 'Skip'
      },
      {
        text: 'Next',
        classes: nextBtnClass,
        action: tour.next
      }
    ]
  });
  tour.addStep({
    title: 'Card',
    text: 'This is a card',
    attachTo: { element: '.tour-card', on: 'top' },
    buttons: [
      {
        text: 'Skip',
        classes: backBtnClass,
        action: tour.cancel
      },
      {
        text: 'Back',
        classes: backBtnClass,
        action: tour.back
      },
      {
        text: 'Next',
        classes: nextBtnClass,
        action: tour.next
      }
    ]
  });
  tour.addStep({
    title: 'Footer',
    text: 'This is the Footer',
    attachTo: { element: '.footer', on: 'top' },
    buttons: [
      {
        text: 'Skip',
        classes: backBtnClass,
        action: tour.cancel
      },
      {
        text: 'Back',
        classes: backBtnClass,
        action: tour.back
      },
      {
        text: 'Next',
        classes: nextBtnClass,
        action: tour.next
      }
    ]
  });
  tour.addStep({
    title: 'About US',
    text: 'Click here to learn about us',
    attachTo: { element: '.footer-link', on: 'top' },
    buttons: [
      {
        text: 'Back',
        classes: backBtnClass,
        action: tour.back
      },
      {
        text: 'Finish',
        classes: nextBtnClass,
        action: tour.cancel
      }
    ]
  });

  return tour;
}

if (startBtn) {
  // On start tour button click
  startBtn.onclick = function() {
    const tourVar = new Shepherd.Tour({
      defaultStepOptions: {
        scrollTo: false,
        cancelIcon: {
          enabled: true
        }
      },
      useModalOverlay: true
    });

    setupTour(tourVar).start();
  };
}