How to create multiple tours on one page?

[myshaadi]

Hi,

I am working on an app where I am using Hopscotch for the main tour when a user first enters the page. However, I am trying to find a way to implement a second tour on the same page, this time when the user does a certain action like click on a button.

I can't seem to find anything online for this... is it possible?

Thanks

[sneakyfildy]

http://linkedin.github.io/hopscotch
Pls read the first article. It describes, how defined tour can be started. Just run hopscotch.startTour(secondDefinedTour) anytime and that's all. Having secondDefinedTour defined of course

[FallenRo]

I have the same problem as myshaadi. When I attempt to a second tour inside the onEnd() function of the first tour nothing happens. I've googled this but I found no relevant results other than this ticket.

@sneakyfildy as far as I can see, there is nothing in the documentation about linking two tours together, in the same page.. or maybe I am missing something?

Can anybody help?

Thanks!

[sneakyfildy]

The nature of your trouble is that hopscotch fires "onEnd" callback actually "while" doing "end" sequence, so it is not possible to start a new tour w/o hacks (via default "startTour" method).
What you need to do is simply take out "startTour" call from synchronous execution flow by using setTimeout

https://jsfiddle.net/cmk0ozaL/9/

inspect "onTour1End_working" function and "onTour1End_not_working" one.

N.B. first usage of "setTimeout" has no technical reason, just to be able to put the call in the beginning of a script. Ignore it.

[FallenRo]

That worked! Thank you very much for replying this fast!

[sneakyfildy]

I guess you should close the ticket