Author: | votch18 |
---|---|
Views Total: | 2,171 views |
Official Page: | Go to website |
Last Update: | July 8, 2021 |
License: | MIT |
Preview:

Description:
webtour.js is a feature-rich, user-friendly, fully responsive guided tour JavaScript library for the web.
Features:
- 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%)'; 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();
Changelog:
07/08/2021
- fix: position for transform elements
v1.1.0 (12/30/2020)
- Add popover to highlight
v1.0.0 (12/26/2020)
- Fix overlay error on fixed positioned elements