Intro.js: how to start intro.js tour only on first visit to website

[icase]

I put the code into my website pages. it works normal. but after the first visit, it also display one time on the pages. the script I set:

How to set it is correct?

I don't how to write script code, can you help me?

[saurabh-pathak94]

Create a button or a clickable element
<a class="class_name" href="javascript:void(0);" onclick="javascript:introJs().start();">Tour this website</a>
and set the data-step and data-intro for the elements you'd want to highlight.

[icase]

Thx. But I hope anyone visit at the first time, it auto run. how do I write the code?

[saurabh-pathak94]

@icase It'll run only if the user presses the button, assuming you're not running the javascript code on body load.

[icase]

@saurabh-pathak94 auto（）support auto run isnt it?

[saurabh-pathak94]

@icase where are u getting the auto() function?!
Please post the code.

[icase]

@saurabh-pathak94 here:

https://github.com/usablica/intro.js#introjsstart

[ysjwang]

@icase it sounds like you're trying to have it remember if a user has seen it before or not. I don't believe this comes native in the library - you'd have to write your own storage mechanism to track if a user has seen it before or not. This could be either in your server-side database or via client-side cookies, or any variation in between.

[icase]

@ysjwang Yes, you are right! But I don't know whether or not this part of the code is included.

[ysjwang]

@icase as far as I know it's not, as this is something that each person would probably implement differently. I'm working on open-sourcing the implementation I have for using a combination of redis/cookies to memoize this, but I haven't really seen a consistent manner that people approach this.

[radiodario]

just add a flag to localstorage specifying that the user has done the intro

// add a flag when we're done
introJs().oncomplete(function() {
  localStorage.setItem('doneTour', 'yeah!');
})

// add a flag when we exit
introJs().onexit(function() {
   localStorage.setItem('doneTour', 'yeah!');
});

// and check for it when deciding whether to start. 
window.addEventListener('load', function() {
  var doneTour = localStorage.getItem('doneTour') === 'yeah!';
  if (doneTour) return;
  introJS().start();
}

[Kinzowa]

This doesn't work for me :(

[afshinm]

@HornKild 1. share your code 2. share your errors.

Try to inspect the values in the local storage / cookie jar to see if the values are there?

[p10ns11y]

Write a util function something like this. if your website has a flow

user visits /createStore and provides details. After signedup you redirect to them to /dashboard

Then inside /dashboard try to detect where it is coming from only one time it would come from /createStore other times it might be /login or someother redirects.

if above condition met invoke introjs

detectIfFirstLogin() {
    if (document.referrer) {
      const linkElm = document.createElement('a');
      linkElm.setAttribute('href', document.referrer);
      if (/createStore/.test(linkElm.pathname)) return true;
    }

    return false;
  }

[samir07]

@radiodario This doesn't work for me...@afshinm no errors as such..local storage storing the values. Please, let me know the best solution for this. Thanks.

[bozdoz]

@samir07 @radiodario gave the best solution for this. Could you share details about your browser? Also if you have localStorage, and you can see that localStorage is storing the values, I have no idea why that script wouldn't work.

[samir07]

@bozdoz Thanks for your kind reply, I'm using the latest version of introjs 1.7, oncomplete and onexit functions doesn't work for me, tried inspecting no errors, idk they don't get fire on Done and Exit Button.
About the browser, using the common standard browsers like chrome, firefox, ie.

[ArunEdathadan]

From @radiodario
modified a bit

var introguide = introJs();


// and check for it when deciding whether to start.
window.addEventListener('load', function () {
    var doneTour = localStorage.getItem('EventTour') === 'Completed';
    if (doneTour) {
        return;
    }
    else {
        introguide.start()

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

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