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.
Features:
- 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.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%)';
document.body.appendChild(dynamicTarget);
//make sure target is visible
setTimeout(function(){
wt.moveNext();
}, 500)
}
},
{
element: '#dynamictarget',
title: 'I\'m a dynamically created element!',
placement: 'bottom-start',
onNext: function(){
var dynamicTarget = document.querySelector('#dynamictarget');
dynamicTarget.remove();
}
},4. Initialize the webtour JavaScript library.
var wt = new WebTour(); wt.setSteps(steps);
5. Start the tour.
wt.start();
TODO:
- 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.
