Tour Documentation

  1. Home
  2. Tour Documentation

Description

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.

Initialization

Initialize the plugin by referencing the necessary files:

<script src="hopscotch.min.js"></script>
<link rel="stylesheet" type="text/css" href="hopscotch.css">

Code Structure

when you define your tour, you specify the callback as an array of the following form: [helperId, arg, arg, ...]. For example:

{
    id: "myTour",
    steps: [
        {
          target: "firststep",
          placement: "bottom",
          title: "My First Step",
          onNext: ["fillText", "searchField", "Example search query"]
        }
    ],
onStart: ["selectArticle"]
}