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 waves-effect',
    nextBtnClass = 'btn btn-sm btn-primary btn-next waves-effect waves-light';
  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();
  };
}