Lightweight Step-by-Step User Guide for Your Website with Vanilla JS | webtour.js


webtour.js (website guide, Guided Tour interactive) is a feature-rich, easy-to-use, and fully responsive user guide for your website with Vanilla JS.


  • User Guidance – Can be used to direct the user to your website using forms and popup files
  • Slide Show – A web tour can be used as a slideshow within your website.
  • Element Highlight – You can highlight a specific element on the page without modifying the element’s position and style.
  • Dynamic element – can target dynamically created items.
  • Auto-Scroll – Automatically scroll to the popup position.
  • Keyboard Control – Allows control using the following keys, back, and ESC.
  • Update position on resizing

How to make use of it:

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

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

2. Define steps for components as follows:

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 even dynamically insert content to the steps utilizing the onNext and onPrevisous features:

  element: '#dynamic',
  title: 'Can target dynamically created element.',
  placement: 'right-start',
  onNext: function(){
    wt.isPaused = true;
    var dynamicTarget = document.createElement('div'); = 'dynamictarget'; = 'absolute'; = '300px'; = '300px'; = 'calc(50% - 150px)'; = 'calc(50% - 150px)'; = '10px'; = 'Open Sans, sans-serif'; = 'rgb(124, 209, 249)';
    // = '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.



  • Floating popover positioning (top-center, top-start, top-end, middle-center (default), middle-left, middle-right, bottom-left, bottom-center, bottom-end)
  • Add option to hide buttons
  • Add option close button
  • Add hints

Feature-rich Step-by-Step User Guide, WebTour JS Plugin/Github

See Demo And Download

Official Website(votch18): Click Here

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