Slider-style Guided Tour In Vanilla JavaScript – tourguide.js

Preview:

Description:

tourguide.js is a JavaScript library which helps you create an interactive, step-by-step tour to guide your visitor through new features and highlighted content on the app.

Click the arrow button to advance to the next step of the tour. Click the pagination bullets to go to the specific step of the tour.

More features:

• Smooth scrolls the page to the current step.
• Auto scrolls the page to the original position when the tour is finished.
• Allows you to load steps from an external data source.
• Image preload.
• Compatible with vanilla JavaScript, Angular, React and Vue.js.
• Lots of options, methods, events.

How to use it:

To get started, insert the stylesheet tourguide.css and JavaScript tourguide.js into the document.

<link rel="stylesheet" href="tourguide.css">
<script src="tourguide.min.js"></script>

Initialize the tourguide.js and create a new tour instance.

var myTour = new Tourguide();

Define steps in the data-tour attribute.  Available properties:

• step: step index
• title: step title
• content: step content
• image: step image (optional)
• actiontarget: action target (optional)

<h1 data-tour="step: 1; title: Page Title; image: 1.jpg; content: This is page title">Tour example</h1>

Start the tour and done.

myTour.start();

You can also config the tourguide.js to load step data from a JSON file.

// data.json
[
  {
    "selector": "Select 1",
    "step": 1,
    "title": "Step 1",
    "content": "Step 1 content",
    "image": "1.jpg"
  },
  {
    "selector": "Select 2",
    "step": 2,
    "title": "Step 2",
    "content": "Step 2 content",
    "image": "2.jpg"
  },
  {
    "selector": "Select 3",
    "step": 3,
    "title": "Step 3",
    "content": "Step 3 content",
    "image": "3.jpg"
  }
  // ... 
]

var myTour = new Tourguide({
    src: "/path/to/json.json"
});
// or
var steps= []
var myTour = new Tourguide({
    steps: steps
});

All possible options with default values.

var myTour = new Tourguide({
    root: "body",
    selector: "[data-tour]",
    animationspeed: 300,
    padding: 5,
    steps: null,
    src: null,
    restoreinitialposition: true,
    preloadimages: false,
    colors: {
      fontFamily: 'sans-serif',
      fontSize: "14px",
      tooltipWidth: "40vw",
      overlayColor: "rgba(0, 0, 0, 0.5)",
      textColor: "#333",
      accentColor: "#0d6efd",
      focusColor: "auto",
      bulletColor: "auto",
      bulletVisitedColor: "auto",
      bulletCurrentColor: "auto",
      stepButtonCloseColor: "auto",
      stepButtonPrevColor: "auto",
      stepButtonNextColor: "auto",
      stepButtonCompleteColor: "auto",
      backgroundColor: "#fff",
    },
    keyboardNavigation: {
      "next": "ArrowRight",
      "prev": "ArrowLeft",
      "first": "Home",
      "last": "End",
      "complete": null,
      "stop": "Escape"
    },
    request: {
      "options": {
        "mode": "cors",
        "cache": "no-cache"
      },
      "headers": {
        "Content-Type": "application/json"
      }
    },
    actionHandlers: [], // array of custom step action handlers
    contentDecorators: [], // array of custom step decoration handlers
});

Callback functions.

var myTour = new Tourguide({
    onStart: function(options){...},
    onStop: function(options){...},
    onComplete: function(){...},
    onStep: function(currentstep, type){...},
});

API methods.

// starts the tour
myTour.start();
myTour.start(2); // starts at step 2
// stops the tour
myTour.stop();
// goes to the next step
myTour.next();
// backs to the previous step
myTour.previous();
// goes to a specific step
myTour.go(2);

Changelog:

v1.1.3 (02/15/2023)

• Bugfix

v1.1.2 (01/09/2023)

• Feature/step actions
• Transition to floating-ui library
• Properly validate step parameters
• Fix/size of the step preview

12/03/2022

• v1.0.1

12/01/2022

• Rebuilt

01/21/2022

• Make sure we do not fail on empty selector

v0.3.0 (02/01/2021)

• Correctly parse steps of the tour when from DOM source

v0.3.0 (01/28/2021)

• Bugfix

01/22/2021

• fixed overlay issues
• fixed error reporting issue
• fixed cleaning up issue

01/07/2021

• Fixed: Don’t hide overlay between 2 steps

01/06/2021

• Fixed: Remote JSON src configured tourGuide options as src results in error