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

Add Product Tours to Pages using Hopscotch

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.

Tagged With hopscotch product tours tutorials

Follow the Author of this article :

Here’s what we’ve got for you which might like :

Additionally, performing a search on this website can help you. Also, we have YouTube Videos.

Take The Conversation Further ...

We'd love to know your thoughts on this article.
Meet the Author over on Google+ or Twitter to join the conversation right now!

If you want to Advertise on our Article or want Business Partnership, you are invited to Contact us.

Contact Us