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

Hello @david2 ,

I am having trouble anytime I want to start a tour when the original button is in a popup. Is there a way around this? I can do the same workflow with a button on the page itself and it is fine. Let me know. Thanks. :slight_smile:

EDIT: Hey actually I manually forked the plugin (who needs sleep anyway) and got a working example!

Check it out edit mode app and run mode app demonstration. Consider this a pull request :joy:

I did as outlined below, in short: created the properties to be passed and then pasted that code at the end of the update function.

Hi @vlad @stephanie, is it possible for you to allow us to translate?

Apparently, the work needed to be done is to have this:

i18n: {
        nextBtn: "Далее",
        prevBtn: "Назад",
        doneBtn: "Готово",
        skipBtn: "Пропустить",
        closeTooltip: "Закрыть",
        stepNums : ["1", "2", "3"]
      },

As a property in the function: update section and then create the fields for us to pass the strings we want to, then it would be something like:

i18n: {
        nextBtn: properties.nextBtnText,
        prevBtn: properties.previousBtnText,
        doneBtn: properties.doneBtnText,
        skipBtn: properties.skipBtnText,
        closeTooltip: properties.closeTooltipBtnText,
        stepNums : properties.translatedNumbers
      },

With the logic to only create this if a checkbox to translate is marked, so in the end what we will have added to the current code in the update function is this:

if (properties.translateTour === true) {
instance.data.myTour.i18n = {
        nextBtn: properties.nextBtnText,
        prevBtn: properties.previousBtnText,
        doneBtn: properties.doneBtnText,
        skipBtn: properties.skipBtnText,
        closeTooltip: properties.closeTooltipBtnText,
        stepNums: properties.translatedNumbers.split(","),
      }
}
;

Then create the checkbox for the user to mark to allow translating, then create the properties fields for the users to pass strings. They can all be strings, including the numbers, just instruct the user to write them like this I,II,III or alpha,beta,gamma and it becomes the array.

Of course this needs testing and can be achieved in other ways. I can do the work if you want, just invite me as an editor or sync it with github so I can fork it and test.

And thanks for bringing forward this great plugin!

3 Likes

Hey @vini_brito I was able to make these translation updates using your outline! Thanks for taking the time to think through this and manually fork the plugin :stuck_out_tongue: The effort is very appreciated. Love the demo and the humor!

I just published a new version for this plugin. Users can now specify different labels for each of the buttons as well as the step numbers (the tour will use the default labels if values are left blank). Users will need to check a box to have the translation occur, so this can be easily turned on a off from the editor.

@JohnMark Thanks for this suggestion a while back. Please see the newest plugin version for the translation functionality (hope this update isn’t coming too late!).

3 Likes

Perfect timing :wink: Thanks.

edit: @david2 The update has no translation functionality, or hidden? :slight_smile:

edit2: the update didn’t work on first time… so a second refresh works.

Yes, it has, if the option for the 1.5 version isn’t appearing for you in the plugin tab of your app try refreshing your browser with a ctrl+F5, it happened to me and I solved with that.

Currently am using their update and it’s fine, check it out:

2 Likes

You clearly have it. Thanks. Let see again! (maybe was too fresh).

Works perfectly :slight_smile:

Glad to hear it!

1 Like

Hey, I’m just discovering your plugin and it is pretty great. I just wish you could add support for dynamically populating Attribute ID. It would save a lot of time for me.

I almost think that is a bubble limitation and not a plugin limitation. Anyone can correct me if I’m wrong. :slight_smile:

I think it’s possible the way I was planing to use it.i have a data type for Tour and fields for attribute ID, tittle and details. It’s easier to edit tour details when
content is dynamic. I can use it for training more easier and check if user has completed each training step.

Oh. I see. Well, not sure how that works on the plugin side. Curious to see if he can do that or not. :slight_smile:

Is it possible to start a tour/add a step and specify the step number? I’m trying to combine two tours on a page, but have the second tour be a continuation of the first tour.

@david2 Hi David. The plugin is working fine in the development mode but in the live version, the tour stops abruptly. After the first step when I press Next, the whole tour disappers. I have tried it multiple times but I can’t get it to work.

Editor
Live version

You can create a free account to check this but it isn’t working. Thanks for the help David.

Hi @renelonngren can you please detail how you fixed this? My tour is working fine in the Development version but it stops after the first step in the live version.

Editor

Thanks David!

In my case the tour stopped when the elements that the tour references where not yet visible. By making sure that the tour referenced all visible elements it worked as expected.

Someone already figured out how to assign steps to elements which are not visible from the beginning, such as popups?

Thanks

Is there a way to have an action like ‘stop this tour’?
I use it at ‘if a group is visible then add steps and start tour…’, but when a user clicks on something so that this group isn’t visible anymore, the screen changes ofcourse, but the tour continues.
It would be nice to be able to stop the tour when something happens.
ps: I thought maybe ‘hide element’ would do the trick, but it seems that is doesn’t.
Possible?

Thanks for this plugin its great! Is their anyway to get it to change how the box relates to the target because on mobiles it doesn’t fit with elements that are not on the very left or right, the box gets pushed off screen.

1 Like

Hi
This seems fabulous! Thank you!
Is it possible to take the user having the tour across multiple pages ?