Add Product Tours to Pages using Hopscotch

Add product tours to pages or your development using Hopscotch which is nothing but a free Javascript framework which supports JSON object and CSS to decor. Indeed, one can add this nice tour to any appropriate landing page to precisely direct the traffic. We saw few Javascript frameworks before to create Product Tour, but possibly this is quite highly customizable – it is difficult to say – the best as simply we have not test a lot of these tools of trade. we liked it from the coding point of view.

Basics to Add Product Tours to Pages using Hopscotch

Hopscotch is developed by Linkedin. Linkedin actually has lot of scripts, possibly less known to the main stream. You can create callbacks for tour events including onStart, onEnd, onShow, onNext, onPrev, onClose properties, Multi-page persistence using HTML5 sessionStorage using cookies as a fallback and more. The repository is available here :

Play with a Demo here :

The source code of demo is also included, so actually you can simply download, uncompress and open the page in browser (on localhost) to check.

Add Product Tours to Pages using Hopscotch : Going Great

Basics are written so much details, that it is quite bigger to read but possibly a newbie will not feel the absence of a GUI – ultimately we need to hand code it. What they have not said (we are not sure why), the thing can be made far better with modifying the CSS. They have used PNG in the CSS file, you can consider to change it to Base64 Encoded Data URI. Read the guide on Image in CSS to Base64 Data URI Encoding to reduce the number of calls for the files to make it more faster loading.

There is nothing to write about Javascript part and the API. Official document is more than enough. Keep in mind that – Google can read Javascript now.