How to setup two introduction tours using introJs

Question

I want to have two separate tours in a single webpage using introJs. But while doing this, data-steps of one tour is coinciding with the other tour.

Answer 1

I had similar situation, where I had two panels in the page. Each panel has its help section. However for when I was clicking on one help section, intro js was getting activated in the other too. I removed all the intro js attributes every time I start help, so that one help section won't be able to activate the other.

$('[data-intro]').removeAttr('data-intro data-position data-step');

Answer 2

Simply it's impossible.

You can't have two tours for the whole page (document.body) at once, instead of this you can create two separate tours for separate elements on the DOM.

Answer 3

Like @brianlmerritt, I made two programmatic intro.js and launch it with different buttons.

<a href="#" class="btn btn-flat success" id="encomienda_help">
<a href="#" class="btn btn-flat success" id="bitacora_help">


[...]

<script type="text/javascript">
  document.getElementById('encomienda_help').onclick = function() {
    var intro = introJs();
    intro.setOptions({
      doneLabel: 'Siguiente Página',
      steps: [
      {
        element: document.querySelectorAll('#encomienda_step_1')[0],
        intro: "This is the help text for encomienda."
      },
      {
        element: document.querySelectorAll('#encomienda_step_2')[0],
        intro: "This is another help text for encomienda.",
        position: "top"
      }
      ]
    });
    intro.start().oncomplete(function() {
      window.location.href = '/ruta1?multipage=true';
    });
  };

  document.getElementById('bitacora_help').onclick = function() {
    var intro = introJs();
    intro.setOptions({
      doneLabel: 'Siguiente Página',
      steps: [
      {
        element: document.querySelectorAll('#bitacora_step_1')[0],
        intro: "This is the help text for bitácora."
      }
      ]
    });
    intro.start().oncomplete(function() {
      window.location.href = '/ruta2?multipage=true';
    });
  };
</script>

Answer 4

Set up different instances and steps and call them intro1 and intro2 (or whatever else you want).

You can then trigger them independently as intro1.start() and intro2.start()

See the code to set up the steps below:

var intro1 = introJs();
intro1.setOptions({
    tooltipPosition : 'top',
    steps: [
        {
            element: '#intro1_step1',
            intro: 'Welcome to your example.com dashboard, where you can update your skills, your availability, and your professional details so that ...',
            position: 'top'
        },            {
            element: '#intro1_step2',
            intro: 'Your profile contains important information which is important to complete so that...',
            position: 'bottom'
        },
        {
            element: '#intro1_step3',
            intro: 'Make sure your attribute is included in your profile because the client may express a preference.',
            position: 'top'
        },
        {
            element: '#intro1_step4',
            intro: 'Click here to add a photograph of yourself.',
            position: 'top'
        },
        {
            element: '#intro1_step5',
            intro: 'Your photograph will appear when your profile matches a ...',
            position: 'top'
        },
        {
            element: '#intro1_step6',
            intro: 'Take example.com with you, on your Android or Apple phone by clicking here.',
            position: 'top'
        }
    ]
});
var intro2 = introJs();
intro1.setOptions({
    tooltipPosition : 'top',
    steps: [
        {
            element: '#intro2_step1',
            intro: 'Welcome to your example2.com dashboard, where...',
            position: 'top'
        },            {
            element: '#intro2_step2',
            intro: 'Your...',
            position: 'bottom'
        },
        {
            element: '#intro2_step3',
            intro: 'Make sure...',
            position: 'top'
        },
        {
            element: '#intro2_step4',
            intro: 'Click here to...',
            position: 'top'
        },
        {
            element: '#intro2_step5',
            intro: 'In this step...',
            position: 'top'
        },
        {
            element: '#intro2_step6',
            intro: 'Take example2.com with you, on your Android or Apple phone by clicking here.',
            position: 'top'
        }
    ]
});

The beauty is you don't need as much meta information embedded in the html, just

<p id="intro1_step1">Blah Blah Blah</p>