How can I make multipage intro by using Intro.js programmatic

Question

Hello I just start learning with javascript and I would like to know how to make multipage intro by using intro.js

   function beginer() {
    var intro = introJs();
    intro.setOptions({
        steps: [
        {
            element: '#beginer1',
            intro: "This is a <b>bold</b> tooltip."
        },
        {
            element: '#beginer2',
            intro: "Ok, <i>wasn't</i> that fun?",
            position: 'bottom'
        },

        ]
    });

    intro.setOptions({
        'showStepNumbers': false
    });

    intro.start();
}

Answer 1

It is as simple as combining the options given in the multipage and programmatic examples in the repo. The multipage example is here

All you got to do is add an onComplete listener on the first page like so:

function beginer() {
   var intro = introJs();
   intro.setOptions({
    showStepNumbers: false,
    doneLabel: "Next page",
    steps: [
    {
        element: '#beginer1',
        intro: "This is a <b>bold</b> tooltip."
    },
    {
        element: '#beginer2',
        intro: "Ok, <i>wasn't</i> that fun?",
        position: 'bottom'
    },

    ]
   });

  intro.start().oncomplete(function() {
      window.location.href = 'second.html?multipage=true';
  });
}

I have sanitized the setOptions call in your function and combined all the options there. So that you don't have to do setOptions multiple doneLabel param. I guess, it triggers the oncomplete method which is defined after intro.start(). It redirects to the next page which in my case is second.html. Remember to pass the param multipage=true.

second.html is a regular HTML file but you need to start the introJs function to make the whole transition mulitpage. All you do is:

<script type="text/javascript">
  if (RegExp('multipage', 'gi').test(window.location.search)) {
    introJs().start();
  }
</script>

This in essence triggers the introJs().start() function after it finds the word multipage in the url or href in your browser address bar. Remember we called second.html like second.html?multipage=true. This just starts another intro instance on the second page. Now you can define the options here in form of JSON if you want or just use the data-step attributes on DOM as defined in the docs.

Hope it gets you started in the right direction.