IntroJS callback function upon skip or done?

This code allows to store the tour info

var introguide = introJs();


window.addEventListener('load', function () {
    var doneTour = localStorage.getItem('MyTour') === 'Completed';
    if (doneTour) {
        return;
    }
    else {
        introguide.start()

        introguide.oncomplete(function () {
            localStorage.setItem('MyTour', 'Completed');
        });

        introguide.onexit(function () {
            localStorage.setItem('MyTour', 'Completed');
        });
    }
});

Yes, there is a way but with some caveats.

First, after intro.js is loaded you will have a global called introJs with a property fn (standard jquery plug-in approach).

By setting a function using the oncomplete() function under introJS.fn, you can perform some actions when the user hits the 'Done' button.

Here's an example that just displays a console message:

introJs.fn.oncomplete(function() { console.log("Finished"); });

This works as expected. You can put this in a script anytime after the intro.js library is included.

The 'skip' button functionality, however, will only call the 'oncomplete' handler if you are on the last step. The author of the code views that as not complete and so doesn't run that code as you can see by this extract from the code:

  skipTooltipButton.onclick = function() {
    if (self._introItems.length - 1 == self._currentStep && typeof (self._introCompleteCallback) === 'function') {
      self._introCompleteCallback.call(self);
    }

    _exitIntro.call(self, self._targetElement);
  };

This basically says it must be at the last step for this to consider calling the complete callback.

Of course, you could fork the code and remove the restriction. I would suggest if you are going to do that, create a _introSkipCallback in a fashion similar to _introlCompleteCallback and invoke that unless on last step where you might invoke both functions if present.

Hope this helps.

Use oncomplete for functions after 'Done' is clicked

Use onexit for functions after 'Skip' is clicked

Bonus function: onchange will log each step, this can be used to call functions on a particular step

document.getElementById('startButton').onclick = function() {

    // log each step
    introJs().onchange(function(targetElement) {  
      console.log(this._currentStep)
      if (this._currentStep === 3){
        stepThreeFunc()
      }
    }).start()

    // clicking 'Done'
    .oncomplete(function(){
      someFunc()
    })

    // clicking 'Skip'
    .onexit(function(){
      someOtherFunc()
    });
};