jsProductTour
This is a javascript library that uses intro.js and js-cookies to manage a Product Tour based on cookies to control when and what already was presented to the user.
Instalation
Bower
Put the package information in the dependencies section of the bower.json file.
Then run
bower update
This will install jsProductTour and its own dependencies, wich are introjs and js-cookie.
Configuring the installation
You must import in HTML code the js and css source files of introjs, js-cookie and jsProductTour. The following example is based on a local project, you must change the paths according your project installation:
<!-- CSS --> <!-- JS -->
Using
To use the tour, create an array with the steps (slides) to be showed to the user.
Set the version
information with a sequential number, that must allways increase,
so the library can evaluate wich slides where not yet showed when new releases, news or informations
are deployed to the user.
Script example to start a tour:
var steps = wellcome: true intro: "Wellcome, this slide is allways showed and no version is needed because \n\ it is set as a 'wellcome' slide. This slide is not linked with any HTML element." bye: true intro: "This is also allways showed, but as the last slide!" version: 2017062701 element: "#id-element" intro: "This is a slide that is gonna be showed next linked element." version: 2017062702 element: "#another" intro: "Another slide with news related to the another element." version: 2017062703 element: "#last-one" intro: "Last slide showed." ; var tour = user steps; tourstart;
Laravel use example
At your layout master:
<!-- HEAD SECTION --> <!-- TOUR --> <!-- BEFORE END BODY --> <!-- TOUR --> <!-- This is a script of your application with steps configuration --> <!-- execute after document is ready, if using jQuery -->
The public/js/showTour.js
{ var steps = wellcome: true intro: "Wellcome, this slide is allways showed and no version is needed because \n\ it is set as a 'wellcome' slide. This slide is not linked with any HTML element." bye: true intro: "This is also allways showed, but as the last slide!" version: 2017062701 element: "#id-element" intro: "This is a slide that is gonna be showed next linked element." version: 2017062702 element: "#another" intro: "Another slide with news related to the another element." version: 2017062703 element: "#last-one" intro: "Last slide showed." ; var tour = user steps; tourstart;}
Step setting
You must see the intro.js documentation (http://introjs.com/) to understand qich options can be set to steps.
Beside the into.js settings, this package use:
- wellcome and bye: optional boolean settings to define the first and last slide of the tour;
- version: required number setting to define the version that is used to evaluate if the slide must be shown to the user. You must allways increase this number to new slides, and can erase the oldest slides when believe they are not necessary anymore.