[New free plugin] Hopscotch Step-By-Step Tours

That works wonderfully so far! This is too cool! Is there a way to not have ANY buttons like “next” “done” or “back”? Can you remove ALL the buttons? So it kind of forces them to either close the tour or click on the element? I think that would make it perfect. :slight_smile:

1 Like

Is it not too hard to add this possibility too that you see here in the pic above? To get rid of the next button as well if we choose to do so since now we can have them click on the element to move to the next step?

Maybe this can be an option at the step level since some will have it and some won’t? Or even at the tour level is cool to. Just makes them all where you have to click an element. This plug has to be my favorite so far! Bravo :clap:

Hey @j805 sorry for the delay in response - was offline this weekend!

These are good suggestions. You can currently hide the back/close/CTA buttons at the tour level, but I will definitely look into adding these at the step level and also for the next/done buttons.

Very much appreciate the kind words and suggestions!! :slight_smile:

2 Likes

Thanks! Looking forward to the update. Will make a big difference. :slight_smile:

I have to say that this is my favorite plugin so far. :slight_smile: It really is a nice interface. Hopscotch was a great idea. Any news on having the option to turn of the “next” button so it won’t show any buttons at all? Really looking forward to this update! :smiley:

Such a timesaver! Thanks a lot for making this a free plugin, @david2.

It’d be nice to be able to customize the style a bit ourselves (font family, borders, boxshadow, etc.) for both the boxes and the buttons, in order to make it match the overall style of our apps.

That’s really a “nice to have” though. I guess @J805’s idea is both easier to implement and more interesting UX-wise.

Hey @J805 thanks for waiting on this! Just published a new version which includes:

  • Ability to show / hide the “next” button at the tour level
  • Ability hide the “next” and “back” buttons at the step level, which will override the tour-wide settings for that step only

@Lucien You’re very welcome! I will definitely look into adding some ability to customize the styles but can’t give a timeline on this currently. Will let you know when I have updates on this!

5 Likes

Don’t worry too much about it, this plugin is already doing the job in a great and elegant manner!

Thank you!!! Looking forward to implementing this. Awesome! :laughing:

1 Like

Hi @david2 ;

Thanks for this plugin. But I am getting an error.

The plugin Hopscotch Step-By-Step Tours / action Start a Tour threw the following error: ReferenceError: hopscotch is not defined
at eval (eval at g.create_code (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/829add07931f798bf2671d30abcae7eec5bfcb7c57cf51ce86d14109e7647279/xfalse/x5:99:14419), :3:35)
at https://dhtiece9044ep.cloudfront.net/package/run_debug_js/829add07931f798bf2671d30abcae7eec5bfcb7c57cf51ce86d14109e7647279/xfalse/x5:100:6256 (please report this to the plugin author)

Could it be that the element you’re trying to set the step for is not visible at the time the setup action is triggered?

Hi @Lucien They’re visible. I thought it might be because I tried on the Reusable Element, it works when I try it on a page.

Ah, interesting!

Hey! Got a question.
Any possibility of greying out screen except for the relevant parts?

I think this one does what you are looking for:

I still prefer Hopscotch though. It is really nice and easy.

@david2 Thanks for this plugin - making my app much easier to understand and the setup was a breeze!

I have an odd behaviour happening though. Every time the tour loads for the first time it will stop/hide after clicking the second step. When reloading the page the tour completes all steps. Any idea why?

Fixed: I was missing a step when setting up the elements on the page, ie setting the right custom state, not related to the tour.

Btw, I second the request for styling options :slight_smile:

Hi @david2

I use 3 different languages in my app, I need to be able to translate the NEXT, BACK and DONE buttons. Eventually possible? This is the only missing link! :slight_smile:

Happy Holidays!

1 Like

Interesting…
could you make a longer Demo, like showing “input of a phrase”, clicking butons, etc…or is it out of the pluggin scope ?

I just created a quick demo since I love this plug in so much. Let me know if that helps. :slight_smile: Enjoy!

Editor: https://bubble.io/page?name=index&id=805hopscotchonboardingdemo&tab=tabs-1
Preview: https://805hopscotchonboardingdemo.bubbleapps.io/version-test?debug_mode=true

3 Likes

Yes, it would sure be helpfull, I was thinking of using some animation to show New users how to use an App. so I guess such tool is definetely worth…now. just dont know how easy it’ll be to “code” the script…
A dream way would be to “record” a session, following the mouse moves, etc… and complement using your Boxes !