How to add a 'Done' button at the final step of multipage intro.js tour?

Question

I have successfully setup a multipage tour with intro.js In the final step I can't have the 'Done' button displayed. I currently have a button going to the home page. How could I also add the 'Done' button?

The script in the final page (only containing the last step of the tour):

$(document).ready(function()    {       
    areComponentsReady();

    if(window.location.href.indexOf("multipage=true") > -1)  {      
        introJs().setOption('doneLabel', 'Back to start').start().oncomplete(function() {
          window.location.href = "/myhomepage"
        });                 
    }                 
});

score 2 · Answer 1 · answered Oct 25 '16 at 13:05

In order to do that you have to edit the introjs file itself. You can create your own button in pure js and then just append it to the buttonLayers (As you will see in the introjs file). Then you will see it in the view. Now what you need to do is make the button play a function onclick and that function will close the introjs view. Or you can do the opposite the new button will load you home page and then you can leave the done page alone.

Here is a sample code I made:

    var btn = document.createElement("BUTTON");
    var t = document.createTextNode("CLICK ME");
    btn.appendChild(t);

    // I have added the button append here because by default this is what intro js will do
    if (this._introItems.length > 1) {
        buttonsLayer.appendChild(prevTooltipButton);
        buttonsLayer.appendChild(nextTooltipButton);
        buttonsLayer.appendChild(btn);
    }

This is a sample I made in codepen.

Also remember to get the css for the buttons to apply to your button as well, and make the necessary changes.

score 0 · Answer 2 · edited Aug 29 '19 at 09:59

var btn = document.createElement("BUTTON");
var t = document.createTextNode("CLICK ME");
btn.appendChild(t);

// I have added the button append here because by default this is what intro js will do
if (this._introItems.length > 1) {
   buttonsLayer.appendChild(prevTooltipButton);
   buttonsLayer.appendChild(nextTooltipButton);
   buttonsLayer.appendChild(btn);
}

Code above is good. But better make it as options.

How to add a 'Done' button at the final step of multipage intro.js tour?

2 Answers2