Product-Tour
A responsive tour snippet, with a step-by-step guide(onboarding) to help users understand how to use your website.
npm install product-tour
Requirements
Example
See index.html
Usage
Simply include the following to get started
<script src="<link to jquery.js>"></script>
<script src="product-tour.min.js" type="text/javascript"></script>
<link href="product-tour.min.css" rel="stylesheet" type="text/css"/>
var productTour = new ProductTour({
overlay:true,
onStart: function () {},
onChanged:function (e) {},
onClosed:function (e) {},
next: '',
prev: '',
of: '',
html:
});
productTour.steps([
{
element: '',
title: '',
content: '',
image: '',
position: ''
},
{
element: '',
title: '',
content: '',
image: '',
position: ''
}
]);
productTour.startTour();
Development
To clone and run project with a view of developing framework
NPM would help in getting our environment ready:
npm install
We used gulp in handling our building and test running of frame work.
Use the index.html to do your design and testing of the framework with the browser. Simply use the command below:
gulp serve
This will listen to updates of our product-tour.js and product-tour.css and call:
gulp build
to help compile and build our minified version which is automatically or already called in our index.html
file so the browser is opened.
Build Just the JS
gulp build-js
Build Just the CSS
gulp build-css
Credits
https://codyhouse.co/gem/product-tour/
Demo
https://codyhouse.co/demo/product-tour/
Contributions
Send a pull request or create an issue... thanks