Multi page intro

[vrish88]

How would you get an intro to continue across pages?

[afshinm]

Currently it works with single pages, but I think it's also a good idea to have to for multiple pages. Could you please provide an example of multiple pages?

[vrish88]

Say Facebook wanted to introduce a user to their system. The intro would start on the news feed then continue to a friend's page. There the intro would continue highlighting the things that can be done on a profile page.

[afshinm]

Aha, okay. Marked as enhancement, I think we'll have it for next versions. Thanks for report.

[Cangit]

This could somewhat be completed with this pull request https://github.com/usablica/intro.js/pull/13

[vickychijwani]

+1 for this feature request. I think this is an important use-case.

[martindale]

+1 for this, it's exactly what I'd want to use it for.

[afshinm]

Fine, I think we will have this for next version of IntroJs. Thanks for feedback.

[rickhanlonii]

Am i missing something here? Couldn't each page have it's own intro.js instance with it's own steps and the user could be guided to the correct "next" page? For example, the homepage would have so many intro steps, then the profile page would have so many steps. On the homepage the user would go through those steps on start(), and on the profile they would go through those steps on start().

I've implemented a a multi-page intro fine the way it is. If you add in server side data to track which page they're on in the intro, it becomes even easier. Even more, if Cangit's pull request is merged, then the complete method could forward to the next page.

So, I guess my question is, what is preventing anyone from creating a multi-page intro.js now, and what could be added on the client side that would make a future version any better at this than it is now?

[sayhiben]

Agree with @rickhanlonii - we could of course look for hash values in the URL to autostart things on the "next page", but that in itself doesn't offer much.

My guess is that these features would help:

• The ability to specify arbitrary "step number" labels, so the first step on the next page could continue after the last step of the previous page.
• The ability to specify a URL as a "nextPageUrl" - once the last step on the current page is met, the next button would just link to this URL if specified
• Not directly related, but almost necessary in a UX sense with a multi-page intro: cookie management and the ability to (optionally) only show the intro to users if they haven't been cookied yet.

The introJs() calls would still need to be made on each page individually (unless you're using some sort of single-page js framework, in which case you're likely going to have a different feature need altogether - there's some room here for better/more event triggering/handling).

[afshinm]

@rickhanlonii I'm agree.

[trq]

:+1:

[aethant]

Great suggestion.

[juristr]

I think just having a callback when introJS is finished as in pull request #13 might not be enough. What about if you have a single-page app where you have different "hidden" parts, say a tab-page where you'd like to show intros for the first tab then another intro info on the 2nd tab. What you would have to do is to somehow activate the 2nd tab prior to showing the tooltip.

I opened issue #71 where I tried to phrase this possibility of "step activator functions". What do you thing about this?

[aadrian]

Multi page intro

+1

[afshinm]

This feature will be the most important change in the next version of IntroJs that will be released this week.

[jonasll]

Definitely looking for multi page on my end too! Any update on the update? :) Great work, it's great to have plugins that simply work!

[afshinm]

@jonasll Yeah, I'm currently working on this feature and I'll add it for next coming version.

[juristr]

do you already have any insights into how you're going to realize it technically?

[runn-vermel]

:+1: for this feature as well - i was going to fork your project and do it on my own, but if you're days away from completing this, i'll happily use your code :)

[afshinm]

@juristr Yeah I think it's possible via cookies, do you have any better solution? @runn-vermel Fine.

[juristr]

Hmm...I didn't yet think about a solution. Cookies work for sure but I'm not a huge fan of them. You could try to look into HTML5 storage. I guess sessionStorage might be appropriate for this scenario. The only thing that has to be taken care about in that case is browser compatibility but I'm sure there's a shim available in case.

[afshinm]

@juristr Yeah nice, but we need to keep compatibility with Mobile Devices and IE8 also.

[juristr]

mobile devices shouldn't be a problem as most of them use webkit.
Regarding IE8, as far as caniuse.com says, there should be support as well.

[rickhanlonii]

I just want to mention again that multi-page Intros are able to be fully implemented in its current state, using any of these techniques, or handling it server side.

I agree that if multi-page can be done in a way that's smooth and dependable, then that's great. But IMO once we start talking cookies, HTML5 storage, and compatibility issues, it seems like it's better for the health of the project to let people handle it their own way.

[afshinm]

Ok, thanks for your opinion @rickhanlonii. Yesterday I spent my whole day on thinking about how to implement this feature in IntroJs but I found that in current version of IntroJs and with current functions everyone can do that easily, with a simple hack.

So, I think we should provide an example (not a specific feature, function etc.), we should create a new example of multi-page introductions in example folder to show the users how to do that.

What you think? I need your feedback, @rickhanlonii, @juristr, @casiotone, @vrish88 and other guys.

[juristr]

sure, it might be a good solution to delay the decision of implementing such feature. In this way we can see how difficult it is to implement and think about adding it later (and how) in case users have problems to get it.

(maybe we could add it as kind of an add-on later)

[vrish88]

:+1: less is more

[Cangit]

@afshinm, I support this. :+1:

[Tuckie]

More is more! I think a user-defined query parameter to store whatever needed settings would be great! e.g. ?jsintro[start]=auto&jsintro[step]=3&jsintro[prev]=prevurl&jsintro[next]=nexturl

[rickhanlonii]

A big :thumbsup:

[kbanman]

:+1:

[afshinm]

Thanks guys. Multi-page introduction added here: https://github.com/usablica/intro.js/tree/master/example/multi-page

We need to release our v0.4.0 version asap, so could you guys check that example and let me know what you think?

[nanego]

Is there a way to come back to the previous step when we are in the first step of the second page ?

[Feile01]

It is working perfectly:

<script type="text/javascript"> if (RegExp('multipage', 'gi').test(window.location.search)) { introJs().setOption('doneLabel', 'Next Page &rarr; ').start().oncomplete(function() { window.location.href = 'nextpage.html?multipage=true'; }); } </script>

[jangti]

Hi, Is there any way to add other steps for oncomplete method ? introJs().addSteps([{ element: $('#ck-main-notification-item')[0], intro: "Click here to get message notification", position: 'left' }, { element: $('#ck-chat-enabler')[0], intro: "click here for the message box", position: 'top' }]).start().oncomplete(function(){ $('#ck-chat-enabler').trigger('click'); introJs().exit(); introJs().addStes([{ element:$('.ck-chat-user-list-group')[0], intro:'Choose the tabs as shown below', position:'left' }, {
element:$('#ck-chat-selector')[0], intro:'Choose a tab for the specific chat', position:'left' }]).start(); });

Because at this ck-chat-enable point I am opening chat box within page and introduce other steps

[juliettebeaudet]

[PROPOSING A SOLUTION]
For anyone consulting this former issue, having a multipage problem, please know that I opened a similar issue which I solved with this code (React Codesandbox). I also suggested an addition of the (already existing but so far undocumented) useful onskip callback on the official introjs documentation.