Feature-rich Step-by-Step User Guide In JavaScript – webtour.js

Category: Javascript , Recommended | December 30, 2020
Author: votch18
Views Total: 551 views
Official Page: Go to website
Last Update: December 30, 2020
License: MIT


Feature-rich Step-by-Step User Guide In JavaScript – webtour.js


webtour.js is a feature-rich, user-friendly, fully responsive guided tour JavaScript library for the web.


  • Show a step-by-step guided tour of various elements on your page.
  • Highlights elements to grab the user’s attention.
  • Auto scrolls the page to the current step.
  • Allows the user to navigate between steps like a slideshow.
  • Supports dynamically created content.

How to use it:

1. Add the webtour.js JavaScript library’s files to the page.

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

2. Define steps for elements as follows:

  • element: Target Element
  • title: Step Title
  • content: Step Content
  • placement: top, top-start, top-end, left, left-start, left-end, right, right-start, right-end, bottom, bottom-start, or bottom-end
var steps = [
      content: `Splash Step`,
      width: '500px'
      element: '#title',
      title: 'Step 1',
      content: 'Step Content 1',
      placement: 'bottom-start',
      element: '#features',
      title: 'Step 2',
      placement: 'top-start',
      element: '#desc',
      title: 'Step 3',
      placement: 'left-start',
      element: '#scroll',
      title: 'Step 4',
      placement: 'bottom-start',
      content: `End Step`,
      width: '500px'

3. You can also dynamically insert content to the steps using the onNext and onPrevisous functions:

  element: '#dynamic',
  title: 'Can target dynamically created element.',
  placement: 'right-start',
  onNext: function(){
    wt.isPaused = true;
    var dynamicTarget = document.createElement('div');
    dynamicTarget.id = 'dynamictarget';   
    dynamicTarget.style.position = 'absolute';
    dynamicTarget.style.height = '300px';
    dynamicTarget.style.width = '300px';
    dynamicTarget.style.top = 'calc(50% - 150px)';
    dynamicTarget.style.left = 'calc(50% - 150px)';
    dynamicTarget.style.padding = '10px';
    dynamicTarget.style.fontFamily = 'Open Sans, sans-serif';
    dynamicTarget.style.background = 'rgb(124, 209, 249)';
    //dynamicTarget.style.transform = 'translate(-50%, -50%)';
    //make sure target is visible
    }, 500)       
  element: '#dynamictarget',
  title: 'I\'m a dynamically created element!',
  placement: 'bottom-start',
  onNext: function(){
    var dynamicTarget = document.querySelector('#dynamictarget');

4. Initialize the webtour JavaScript library.

var wt = new WebTour();

5. Start the tour.



v1.1.0 (12/30/2020)

  • Add popover to highlight

v1.0.0 (12/26/2020)

  • Fix overlay error on fixed positioned elements

You Might Be Interested In:

Leave a Reply