Skip to Main Content

Web Product Tours with the Hopscotch Framework

Posted on 8.28.2013

Website-based product tours are all the rage now among designers and developers (as well as digital marketers). Website Magazine has featured a few possible solutions including Intro.JS in the past, but the there are others that designers and developers should become familair with. 

Hopscotch, for example, is an interestng framework that makes it easy for developers and designer to add product tours to their web pages. Hopscotch accepts a tour JSON object as input and provides an API for the developer to control rendering the tour display and managing the tour progress. The framework has several events to which callbacks can be assigned including start, end, next, prev, show, close, and error. For the next, prev, and show events, designers and devs can assign callbacks within step definitions as well as in the tour itself.

Hopscotch also offers up several other features worthy of note including multi-page tours (saving the state by using HTML5 sessionStorage if available) and is supported in pretty much every language. 

Today's Top Picks for Our Readers:
Recommended by Recommended by NetLine

Leave Your Comment

Login to Comment

Become a Member

Not already a part of our community?
Sign up to participate in the discussion. It's free and quick.

Sign Up


Leave a comment
    Load more comments
    New code