IntroJS callback function upon skip or done?

Question

I'm using introjs to build a tour of my application. I've searched in quite a few places online and through the documentation but can't seem to find anywhere a method of how to run a function upon skipping or clicking done on the tour. I'm trying to make it so a cookie is stored and the tour isn't run again until a user requests it or a new user comes to the site. Any help would be great, thanks!

$(function(){
    var introguide = introJs();

    introguide.setOptions({
        showProgress: true,
        steps: [
            { hidden }
        ]
    });  

    introguide.start();
});

Answer 1

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');
        });
    }
});

Answer 2

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.

Answer 3

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()
    });
};

Answer 4

I've noticed that onexit will be called when you click the done button (which is skip until the last step). onexit does not appear to bind this to the introjs object, so I was able to solve the issue of having onexit called when the walkthrough was completed like this:

// during setup
introJs.oncomplete(handleOnComplete);
introJs.onexit(() => handleOnExit(introJs));

function handleOnComplete() {
  console.log(this._currentStep); // this is bound to the introJs object
}
function handleOnExit(introJs) {
  const currentStep = introJs._currentStep;
  if (currentStep < introJs._options.steps.length) {
    doSomethingOnSkip();
  }
};

Answer 5

I was going to add a comment, but my rep is too low. I didn't want to answer because I haven't actually tested this, but in version 2.5.0 (maybe previous versions too), there is the onexit function, which I believe is supposed to handle interrupts as well as clicking done at the end. Did you try that?

Answer 6

     if ($(".introjs-skipbutton").is(":visible")) {
    $( document ).on('click', '.introjs-skipbutton', function(event) {
        event.stopPropagation();
        event.stopImmediatePropagation();
        self.exitTourguide();
    });
}

Answer 7

1. I am using introJS tool in my application to give tour guide information of my application.
2. I used some functions for handling it dynamically. Here stepsData sending in an array format.

---

var intro = introJs(); 
intro.setOptions( { 
    'nextLabel': 'Next >', 
    'prevLabel': '< Back', 
    'tooltipPosition': 'right', 
    steps: this.stepsData, 
    showBullets: false, 
    showButtons: true, 
    exitOnOverlayClick: false, 
    keyboardNavigation: true, 
} );

3. hope it will help for handling skip button action.

   var self = this; intro.start().onbeforechange( function() { /* skip action*/ 
       if ( $( ".introjs-skipbutton" ).is( ":visible" ) ) { 
           $( document ).on( 'click', '.introjs-skipbutton', function( event ) { 
               self.exitTourguide(); 
           }); 
       } 
   });
   

---

4. skip and done action handling.

/Done click action/ intro.oncomplete( function(){ if ( $( ".introjs-skipbutton" ).is( ":visible" ) ) { $( document ).on( 'click', '.introjs-skipbutton', function( event ) { event.stopPropagation(); event.stopImmediatePropagation(); self.exitTourguide(); }); } });

/* clicking 'Skip' action */ intro.onexit(function(){ if ( $( ".introjs-skipbutton" ).is( ":visible" ) ) { $( document ).on( 'click', '.introjs-skipbutton', function( event ) { event.stopPropagation(); event.stopImmediatePropagation(); self.exitTourguide(); }); } });