A light-weight user's step-by-step guide for your website using Vanilla JS.

Features

• Highlight element - can highlight specific element on the page without modifying the element position and style.
• User's walkthrough - can be used to guide user's to your website using modals and popovers.
• Slideshow - can be use as slideshow within your website.
• Dynamic element targetting - can target dynamically created element during tour.
• Auto scroll - automatically scroll to popover's position.
• Keyboard control - allows control using next, back and esc keys.
• Update position on resize.

How does WebTour highlight works?

WebTour highlight works by adding overlay to the page except for the highlighted element. It is basically an overlay with a hole showing the element that is highlighted. WebTour can highlight even on modals.

Installation

Include the files from /dist directory.

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

Or include by using UNPKG.

<link rel="stylesheet" href="https://unpkg.com/webtour@1.1.0/dist/webtour.min.css">
<script src="https://unpkg.com/webtour@1.1.0/dist/webtour.min.js"></script>

Basic usage

const wt = new WebTour();
wt.highlight('#target');

User's walkthrough

Guide user's to your website by using step-by-step guide.

const wt = new WebTour();
const steps = [
    {
        element: '#step_1',            
        title: 'Popover title',         
        content: 'Popover content',    
        placement: 'right-start',      
    },
    {
        element: '#step_2',            
        title: 'Popover title',         
        content: 'Popover content',     
        placement: 'right-start',       
    },
    {
        element: '#step_3',            
        title: 'Popover title',         
        content: 'Popover content',     
        placement: 'right-start',       
    },
];

wt.setSteps(steps);
wt.start();