How to allow users to replay an intro.js tour upon clicking a button?

Question

I created a tour using intro.js and I'd like that after the tour is completed, the user can still restart it by clicking on a button. This was already asked previously but not answer yet Similar unanswered question Any pointers would help, thanks!

Answer 1

One way is to make a clickable button that calls a function to play the tour:

<input type="button" id="startTour" value="Restart Tour" onclick="restartTour();">

And add the tour Json in JS script:

function restartTour() {
    introJs().setOptions({
    steps: [{
      
      ##create tour STEPS here
      
       }]
        }).start();
        };

Answer 2

Another way is a button like this:

<input type="button" id="restartTour" value="Restart Tour">

and the JS like that:

    function startTour() {
            introJs().setOptions({
              steps: [{
                title: 'Welcome ',
                intro: "some info",
              },
              {
                element: document.getElementById('files'),
                title: 'a title',
                intro: 'some info',
                position: 'top',
              },
               ]
            }).start();
        };

        // Wrap this Jinja conditional for first time
        window.onload = function() {
            startTour();
        };

        // document.getElementById("restartTour").addEventListener("click", startTour)
        document.getElementById("restartTour").onclick = startTour;