[New plugin] Create a product tour for your app 🚩

Morning @rpetribu, I was looking into the offset issue you raised and I believe it’s behaving as expected. This is how a step in the tour looks when there is 0 offset applied to the X and Y axis:

When I apply a 200px to the Y-axis I get the following, which is what I think it should be:

And when I apply a 200px offset to the X-axis I get a gap like this (which is what I would expect):

Are you expecting something different? Apologies if I’m misunderstanding your query. :slight_smile:

I’ve been able to recreate the issue with the when ProductTour is completed triggering twice. I need to spend some further time investigating the cause - will report back in the next couple of days with an update.

Hey @alexcooney5 thank you so much.

I will take a deeper look in my App to confirm the offset issue. But what you shown is indeed correct!

Thanks once again!

1 Like

Hi again @rpetribu, I’ve just released an updated version of the plugin (2.3.1) that fixes the issue where the ProductTour is completed event was being triggered twice :slight_smile:

Can you let me know if that works as expected for you?

Hey @alexcooney5 !

Thanks so much. I can now confirm that this is not an issue anymore. :+1:


But unfortunately, I am still facing some weird behavior with the offset configuration.

Note that the offset is on the X axis, but affects the Y axis.

If I eliminate the padding in X, the tour element became closer (in the Y axis) to it’s related element. :point_down:

If I offset it in 100 px in the Y axis, it is going to affect the X axis. :point_down:

:thinking:

Oh that’s interesting. Thanks for providing those details @rpetribu and sorry for the inconvenience. I’m going to message you privately and we’ll figure this out :slight_smile:

@alexcooney5 Hi! I hope you can help me. I tried to add condition to Product tour for my goal (I want to show button “Don’t show again” instead of back and adjust this step to my goals
I see that condition should work, but I still see name Back ( I need Don’t show again)
Please check it, it’s a very important feature for my client
Thanks in advance!

Hi @alesya.m, thanks for letting me know about this. I’ve recreated the issue on my side and am investigating how to fix it. Will let you know when I’ve figured it out and pushed a fix :slight_smile:

1 Like

December-23 Update
Recently released a tutorial video on how to use the A+ Product - Onboarding Tour plugin for single page applications (SPAs).

@nocodejungle
Hey - I love the plugin!
Can you add an option to change the font sizes? the font is rather small… that would be great

Thanks!

1 Like

Hi @omerbialer1, I took over ownership of this plugin from @nocodejungle earlier this year - thanks for the kind words :slight_smile:

Nice idea. Will look to add the ability to change font sizes over the next couple of days. Will report back to you with an update by the end of the week.

Thanks for the feedback!

Thanks! Is there any way to use your plugin with my own custom Group Focus for the “steps”? That would solve all of my needs (to keep my Styles coherent)

1 Like

Yep, this is certainly possible @omerbialer1! It involves a slightly more complicated setup, but what you can do is:

  • Create a tour as normal for the steps before the focus group, but put them in a custom event (I’ve called my custom event ‘Tour 1’ in the below example)

  • Add a second Product Tour element to the page…

  • …and create a second custom event (I’ve called mine ‘Tour 2’)

  • Show the focus group as the first action of Tour 2 and then add the rest of the steps in the tour
  • You’ll also want to to Start Tour 2 (or ProductTourB) as the final action in this workflow
  • Trigger Tour 1 when the page is loaded

  • And trigger Tour 2 when ProductTourA (Tour 1) is completed

You’re effectively chaining tours together to include the focus group in the product tour.

One final step: you’ll want to hide the focus group after that section of the tour is complete. You can use a ‘when condition is true’ workflow action with the plugin’s ‘step index’ to hide the focus group after the user has moved onto the next step.

You should be able to get something like this (Step 3 is a group in a focus group):

2024-01-04 10.34.04

I’ve set the editor behind this example to be public, so you can take a look at it here :slight_smile:

@alexcooney5 Thanks for the detailes explanation!

This looks great, just Im not sure If I understand correctly or maybe I wasnt clear enoght in my previous question :slight_smile:

What Im looking for is to create my own customize “step popupss” (the window with the “Next” button that has all the text information next to the highlighted area in the screen)

Could that be done? In the video you posted I see the window looks the same as the regular one, isnt it?

Thanks!

Sorry @omerbialer1 - I understand now.

I’m afraid you can’t create your own popups/focus groups and add them to the tour.

However, you can customise the popups that come with the plugin (font, font colour, background colour, text in the buttons and in the popup itself) :slight_smile:

Yeah ok :slight_smile:

I just want to change the text size… its a bit small :slight_smile:

Hey @alexcooney5, I just downloaded the plugin and am setting things up now. One thing I am wondering about is if I can make it so that clicking the referenced (highlighted) element can do the same as clicking “next.”

I see that I have an option to allow users to click the highlighted element, and that I also have an option to allow a click outside the current step it moves to the next step, but I am essentially looking for both of those things to be true. So if the highlighted element is a button, I want to make it so that they click that button, and have it advance to the next step… Ultimately reinforcing the exact behavior of how to use the application.

Is there a way to do this that I am missing?

BTW: I will add that my app is structured with reusable elements in many areas, so if the answer is in a workflow action, I am hoping there is an alternative… Also because I really don’t want to add in a 100 new workflow events and actions to my app either.


I think these bugs are (frequently) causing the test version debugger to malfunction, please take a look, @alexcooney5 !

Hi @Rangduju, thanks for flagging this issue. I’ve had a look on my side and I’m unable to recreate the issue so I’m going to send you a private message so we can get this sorted :slight_smile:

1 Like

Hi @openocean.tampa, thanks for using my plugin!

You can achieve this functionality, but you will need to use a workflow action.

The way you can implement it is:

  1. Set the ‘When user clicks outside highlighted element field’ to ‘Nothing happens’ and the ‘Can click on highlighted element’ to true

  1. Add a ‘Go to next step ProductTour’ workflow action to the element you are highlighting

  1. Only run this workflow action when the product tour is at the relevant step of the tour (you don’t want to run it when users are using your app in non-tour mode).

In the below example I’ve added a ‘Go to next step ProductTour’ action to the group of data in the Repeating Group in Step 2:

2024-01-08 10.04.44

So when I click on the group in the repeating group it brings the user to the next step of the tour.

Hope that helps and if you’ve any other questions let me know :slight_smile:

Hey @alexcooney5
Thanks for the thorough response. However, I don’t think this method works for my use case. Since I am using reusable elements across my app, the actions are not available in the places I need them to occur (clicking on specific buttons/groups). Also, from a WL perspective, a huge priority for me is to keep things clean and efficient, but that route would force me to add a ton of new events and actions.

Is there any way that the plugin will eventually be able to work how I described before? In a perfect world I am imagining another checkbox for something like advance to next step of Product Tour on click of highlighted element.