Intro.js plugin

Plugin builders
1

Hellow Bubblers !

Here’s a plugin I just created using the Intro.js library. A customizable walkthrough tour for your applications, making it easy to onboard new users.

7 Likes
2

Look great!
Please avoid using shared headers if not needed. Shared headers load on all page even if the element is not loaded on the page. You can use the element header instead.

4 Likes
3

Hey this is great! Added into my app and it looks awesome - especially compared to other tools.

Couple points of feedback:

  1. On one of my pages, users navigate through the same page (ex. https://domain.com/community/events to https://domain.com/community/feed). I’m triggering a different product tour on each of the pages. The later tours have random steps from previously triggered and finished tours for some reason.
  2. Would be helpful to have a “Proceed when element clicked” option. I’m highlight a button in one step but users can’t click the button while it’s being highlighted.

Thanks for this!

1 Like
4

Looks really good. Another small bit of feedback:

  1. Try not to pollute the global window object. Instead add your persisted objects to instance.data.
  2. The event handling code in start can be moved into initialize, and
  3. The setOptions code can be moved into update.
  4. Finally you have “use jQuery” enabled, which means you can use the jQuery selector to retrieve elements, wrapped in a jQuery iterable.

Is there a promise based version of the Intro.js API?

3 Likes
5

Great advice !
Thank you @Jici. I have moved the headers from shared to elements. Thanks a bunch !

1 Like
6

Hey @rod.danan. Thank you for your amazing feedback.

  1. We have modified the code so that 2 instances of tour don’t overlap. Now you will be able to execute both tours individually.
    If both your “tour” elements are on the same page, it would be good practise to hide the second when the first is in action and then hide the first when second starts.
    If you like to connect those 2 tours, you can use the “When tour is exited” event where you
  • Hide the first tour element
  • Show the second tour element
  • Use the “Add a pause” action with atleast 100ms wait
    It should work fine.
  1. We cannot click any element inside the intro popup because it hides the element from DOM.

Let us know if you need any other assist.

7

Thank you @aaronsheldon, appreciate your feedback !

  1. I have initialized all my variables with “instance.data”. This was a great suggestion !
  2. We can not move any code from “start” to initialize as those variables come in action only when the tour is started.
  3. The setOptions code cannot be moved into update, as the “setOptions” can only be called with “.start()”
  4. We have used jQuery to append headers for themes and CSS styling.

If you still think 2 and 3 are possible, I am open for guidance.

1 Like
8

Hey @Jici

Does that apply to the api connector’s shared headers as well? Or just plug-ins?

9

I don’t think this apply to API Connector.

1 Like
10

Wow… what an amazing plugin and what an amazing way to onboard users.

1 Like
11

Thanks @Jici

Nice plugin btw.

2 Likes
12

Still not working for me after hiding the tours on each page (whether through conditionals or the “when tour is exited” trigger). I noticed you said you updated the code but I didn’t see a new version of the plugin. Maybe that’s why?

1 Like
13

Excellent. By far taking care of point 1. is the most important. Points 2. and 3. are more about processing optimization, as event handlers ideally should be created only once.

I 'd have to take a peek at the documentation to determine if intro.js instantiation can be shoe-horned into the Bubble idiomatic use of initialize and update.

2 Likes
14

Hey Rod,

The latest version is “1.0.6”. Could you please check again ?
If you have that version and it still doesn’t work. We can have a look in your app, if you would like.

1 Like
15

@Chakor the other page with the tours is mostly fixed. Now, I was trying out a tour on a new page and it has 15 steps. For some reason, it is only showing 6 steps out of the 15. Tried changing the id names a few times and the position doesn’t seem to affect it. Don’t see much that could be the cause. Any ideas? Can add you as a viewer if you like.

16

Hey @rod.danan ,

All those 15 steps should be visible on the screen when the “Start a tour” action is called. If that’s already done, then sure, you can add us and we will have a look !

17

Please add to the action “reset the tour steps”. It merges the steps of both tours if we repeat the tours from the first

18

Thanks Chakor, great plugin!

1 Like
19

Thank you for the suggestion @Eugene_West
Let us add that in the next update soon.