Hopscotch is a framework to make it easy for developers to add product tours to their 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.

A Hopscotch tour consists of a tour id, an array of tour steps defined as JSON objects, and a number of tour-specific options. The tour id is simply a unique identifier string. The simplest tour consists of just an id string and an array of one or more steps.

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.

Add Product Tour with Hopscotch Framework01-Add Product Tour with Hopscotch Framework