Add Product Tours to Pages using Hopscotch

Download PDF

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.

If you have enjoyed this article, please consider subscribing to our newsletter or share this post. As we have changed our whole website to HTTPS URL to protect your privacy, social counts will appear lower than they were on HTTP URL.

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

Also, we have YouTube Videos and Apple iTunes Podcast Channel (the link will open iTunes App on Mac).

Additionally, performing a search on this website can help you.

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