A Simple, Lightweight Library for Creating Guided Product Tours for Your Web App

tourguide.js is a javascript library that helps you create an interactive step-by-step tour to guide your visitor through the new features and featured content on the app.

More Features:

  • The page scrolls smoothly to the current step.
  • It automatically scrolls the page to the original position when the round ends.
  • It allows you to download the steps from an external data source.
  • Preload the image.
  • Compliant with Vanilla JavaScript, Angular, React, and Vue.js.
  • Lots of options, styles, and events.

Bootstrap Inspired Step-by-step Wizard Modal Plugin | jQuery FlowDialog

How to make use of it:

To get began, insert the stylesheet tourguide.css and JavaScript tourguide.js into the doc.

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

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

var myTour = new Tourguide();

Define steps within the data-tour attribute.

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

Start the tour and finished.

myTour.start();

You may config the tourguide.js to load step information 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 potential choices with default values.

var myTour = new Tourguide({
    root: "body",
    selector: "[data-tour]",
    animationspeed: 300,
    padding: 5,
    steps: null,
    src: null,
    restoreinitialposition: true,
    preloadimages: false,
    request: {
      "options": {
        "mode": "cors",
        "cache": "no-cache"
      },
      "headers": {
        "Content-Type": "application/json"
      }
    },
});

Callback features.

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

API strategies.

// 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);

Slider-style Guided Tour, Tourguide.js Plugin/Github


See Demo And Download

Official Website(LikaloLLC): Click Here

This superior jQuery/javascript plugin is developed by LikaloLLC. For extra Advanced Usages, please go to the official website.

Related Posts

Confetti-Falling-Animation-Effect-party

Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…

jquery-cookie-consent

Simple jQuery Cookie Consent Plugin

jquery.cookie-consent is a simple jQuery plugin to request consent to use cookies. An easy-to-use and highly customizable cookie consent bar that informs your visitors of the use…

Timepicker-Plugin-for-jQuery

Timepicker JavaScript Plugin for jQuery Inspired by Google Calendar

jquery.timepicker is a lightweight jQuery timer plugin inspired by Google Calendar. It supports both mouse and keyboard navigation and weighs 5.5KB minified and compact. Features: Highly customizable…

angular-ngx-carousel-slider

A Lightweight, Touchable, and Responsive Angular Universal Carousel Library

ngxCarousel is a lightweight, tactile, and responsive library for creating an angular carousel. No dependencies, no more hammer. Must Read: Angular Responsive Image Slider With Lightbox Popup…

vue-fullpage-modal

First Mobile Full-screen Modal Popup Library For Vue

Vue full-page modal is a responsive, mobile-compatible, screen-friendly pop-up library for Vue.js. Must Read: Modal Component Is Written in Vanilla JS | ensemble Modal How to make…

random-number-picker

Generate a Random Number Picker In Vanilla JavaScript

Random Number Picker is a Vanilla JS-based number picker that allows you to generate a random number within a specified range. Must Read: Generating Lottery Numbers Using…