2

Is there a way to restart Intro.Js from a button?

I currently have it set up to run on page load with steps defined in JSON, which it does just fine. However, I want to make the tour available for users to refer to if ever they need it, accessed from a help button.

I have tried:

introJs().setOptions({
  steps: [{
    intro: "<h1>Welcome to the Map</h1>"
  }, 
  {
    element: document.querySelector('#viewDiv'),
    title: "The Map",
    intro: "This is the main map. Right click and drag to pan, use the mouse wheel to zoom (or use the buttons in the top left corner), and left click to spin the map around. The compass icon in the top left corner will reset the map orientation to north."
  },
*[MORE STEPS]*
]
}).start();
    
function tourRestart() {
      introJs().start();
    }
    
    document.getElementById("help").addEventListener("click", tourRestart)

But this does nothing. If there are also steps defined in the HMTL, it will start on the first HTML step, but I would much rather use the JSON versions if at all possible.

Thanks!

user3771691
  • 21
  • 1

1 Answers1

0

Here is what I did:

var introjs_element = introJs().setOptions({
  steps: [{
    intro: "<h1>Welcome to the Map</h1>"
  }, 
  {
    element: document.querySelector('#viewDiv'),
    title: "The Map",
    intro: "This is the main map. Right click and drag to pan, use the mouse wheel to zoom (or use the buttons in the top left corner), and left click to spin the map around. The compass icon in the top left corner will reset the map orientation to north."
  },
*[MORE STEPS]*
]
});
introjs_element.start();
    
function tourRestart() {
      introjs_element.start();
    }
    
    document.getElementById("help").addEventListener("click", tourRestart)
Mahsa
  • 732
  • 5
  • 13