Multipage Tour Example

Here's how to take your tour across pages.

Try it out!

        var tour = {
          id: "hello-hopscotch",
          steps: [
            {
              title: "Multipage Example",
              content: "We're going to the next page now...",
              target: "title",
              placement: "bottom",
              multipage: true,
              onNext: function() {
                window.location = "multipage2.html"
              }
            },
            {
              title: "My content",
              content: "Here is where I put my content.",
              target: document.querySelector("#content p"),
              placement: "bottom"
            }
          ]
        };
      

So what exactly is going on here? First, you'll notice that we added the multipage option to the first step in our tour. This tells Hopscotch that the following step (step 2) is going to be on a different page, so that the it doesn't try to advance the tour when the user clicks the Next button.

In the onNext callback for step 1, we change the window.location to the URL of the second page. This lets us actually change pages without leaving the context of the Hopscotch tour.