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

[alexcooney5]

@greg18 nope I didn’t do anything to the button sizes - glad to hear you’re finding them better though

[Timbo]

Any idea how I can choose a custom state for the user. I’ve added a user tab in backend saying first time firsttimeuser (yes/no) and on sign up, classes the new user as yes. At the tour workflow I’ve added: page load - only when user is firsttimeuser (tour steps) and at end of tour I’ve made changes to user: firsttimeuser = no.

But, still loads the tour on oage refresh

Any help would be greatly appreciated.

Nevermind

I managed to sort it. but now need to figure out how to show again on a button without it reloading on page load.

[alexcooney5]

Hi @Timbo, glad you were able to figure it out

Thought I would put a little demo app here that people can view if they come across this issue in the future (editor link).

Step 1

• Create a field for the user data type called “Tour Completed?”.
• Type is “yes/no”.
• Set the default to “no”

Step 2

• Add steps to the Product Tour on page load as you normally would
• However, you only want to run the tour when the current user’s “Completed Tour?” is “no”
  
  

Step 3

• Add a step to the end of the workflow that changes the current user’s “Completed Tour?” to “yes”
• This means it will only run once (the condition we put into Step 2 ensures this)

Restarting a Tour for a user who has already completed one
@Timbo I believe this was your query? You can restart a tour for a user by simply using the “Start a Product Tour” action

If you have any other questions just let me know.

[alexcooney5]

@mattblake recently put together this nice tutorial on how to use the plugin. Includes a section on how to build a product tour across multiple pages of a dashboard app (or “Single Page Application”)

How to add a no-code product tour to your Bubble app | Bubble.io Tutorials | Planetnocode.com

[Timbo]

Thanks for such a detailed breakdown Alex. Really appreciate that buddy

Works perfect now too! Thanks

[keano.t]

The tour is not ending even though I Finished the workflow with “Element actions” → “Start a Product Tour”, After I click done it starts it all over again instead of exiting the tour. Any suggestions?

[alexcooney5]

Hi @keano.t , sorry that you’ve been having problems.

Could you send me a link to your bubble editor and I can take a look? (can dm me or email alex@cranfordtech.com).

Please make your bubble editor public before sending the link

[keano.t]

Hey @alexcooney5, sent you an email

Thanks!

[Theodoros]

Hi @alexcooney5,

Is there a possibility to add a back button?

[alexcooney5]

Hi @Theodoros, you can activate the back button by checking the “Allow user to go to previous step” box on the Product Tour element

[Theodoros]

Oh I didn’t see it! Thanks so much!!!

[mikeh]

Hi Alex - when including an offset (-100px) for a step, the arrow doesn’t appear to offset in the same way as the tour box does. See attached:

My intent was to have the arrow pointing at the blue “hire” option, but it appears stuck at the bottom of the container.

Thanks for any help!

[alexcooney5]

Hi @mikeh, thanks for bringing this to my attention.

I’ll need some time to investigate this and to try and come up with a solution - will aim to get back to you with an update by Sunday.

Apologies for the inconvenience.

[mikeh]

Thanks Alex - appreciate the help! If I can give you any additional detail, let me know.

[alexcooney5]

Hi @mikeh, I’ve just pushed an update to this plugin that allows you to choose whether or not to show arrows to individual steps. I appreciate this isn’t exactly what you were looking for, but hope it at least means it won’t look as though the arrow is pointing to the element.

Instructions
Under the “Add a step in Product Tour X” action, there’s now an option called “Show Arrow” that you can set to yes/no.

When set to “no”, there will not be an arrow on that step of the tour:

The arrow will remain on other steps in the tour where “Show Arrow” is set to “yes”.

You’ll need to upgrade to the latest version of the plugin to access this feature.

Hope that helps
Alex

[mikeh]

Hi @alexcooney5 - I’ve got another one for you… i’m having an issue where tours are not ending when they should. Instead, the tour continues to show the “next” button and loops through the steps, sometimes 2 or 3 times, then presents the “done” button. Very strange behavior! A hard refresh of the page seems to make it work correctly, at least the first time through.

[alexcooney5]

Hi @mikeh, thanks for bringing this to my attention. This issue can occur if you have multiple “on page load” actions - is this the case with your app? The solution is usually to put the Product Tour in a custom event.

Happy to take a look at your editor and try and figure out the problem (you can dm me your editor link if you like)

[rpetribu]

Hi @nocodejungle !

I have subscribed for the plugin. It is greate!

I noticed 2 wired things:

1. The offset is inverted. The Highlight offset X is adding space in the Y axis and vice versa.

2. The event ProductTour is completed is beeing triggered twice. I created only one action inside the workflow to create a new record in my database when my Product Tour is completed and in every page, this event is beeing triggered twice. I always end with two new records in my database. I took a look in debug mode and could confirm tha the event happens twice.

Could you take a look?!

Thanks so much!

[alexcooney5]

Hi @rpetribu, I took over ownership of this plugin from @nocodejungle earlier this year. Thanks for bringing these things to my attention. I’m going to look into it and will get back to you (probably tomorrow) once I’ve investigated fully

[rpetribu]

Thank you so much @alexcooney5 !