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

Hello! First of all, great plugin! I was able to test it and it’s amazing :slight_smile:

I tried to create a new tour and now the error below is being shown:
Action Start Step1FeatureOnboarding.productTour - The plugin “A+ Onboarding” - Product tour / action Start a Product Tour threw the following error: TypeError: Cannot read property ‘options’ of undefined
at eval (PLUGIN_-A–Onboarding----Product-tour-element_action–Product-Tour-Start-.js:9:32)
at https://dhtiece9044ep.cloudfront.net/package/run_debug_js/f8dcf68e99e99dc8771e54951f62466aedcdfcaf343149c1201525b34b62613b/xfalse/x14:6:2048745 (please report this to the plugin author)

Could you help me, please?

Thanks a lot!

[UPDATE]

Just found out that the error message is shown only on the first time I “Start a Product Tour”. If I try to start it again, it will work, but every time I click the button, the product tour runs all the steps as many times I click the button.

As an example, in a product tour of 2 steps, If I click the button to start tour for the first time, the error appears. If I click on it again, the steps are shown, but not only the 2 steps because I’ll see the same 2 steps added to the end of the second step (4 steps total). And every time the button is clicked, the loop starts again with 2 more steps at the end.

[SOLVED]
Well, maybe I was just not following instructions as needed, but since there may be other lazy people like me, I’ll comment what was happening hahaha If you put the steps on the page load APART from the workflow that “Starts the tour”, no error occurs. Don’t know exactly why but these functions need to be put on separate workflows to work correctly. :slight_smile:

Think about the action that you’re doing when you push the button. If every time you run a workflow that adds steps and then starts the tour it might not be clearing the previous tours steps.

So, if you don’t clear the previous tours steps and every time you run the workflow action it adds more steps then starts a tour again Then it would make sense to see the tour run double or triple or quadruple times. Cause it was told to add the same steps to a list of steps again.

** this isn’t my plug-in so I’m just kind of assuming this is what happens here. I have a similar plug-in on the marketplace that creates tours based on steps that the user sets up. I’ve run into the same issue with mine

1 Like

Hey @luiz1, glad you like the plugin! :slight_smile:

I think you try to start the tour before defining the steps in it.

Usually, people use this setup to load a tour:

  1. When page loads → Add steps
  2. When user clicks on the demo button → Start the tour (but don’t add the steps or it will do it at each execution)

Feel free to share a screenshot of your workflow or a reproduction link :slight_smile:

2 Likes

Thanks @jared.gibb and @nocodejungle!

Now I configured all the tours to run on page load (with some rules) and it’s working perfectly!

Thanks a lot for the help! :love_you_gesture:

Yay :call_me_hand:
Let me know if you have other questions or suggestions!

@nocodejungle How much can we change, design-wise? Could I edit the bubbles, font, font size, colors, etc? Would I have to do it via css?

1 Like

Like @alejandrowunderlich, I’m also interested in the answer to this question too @nocodejungle. Plugin looks awesome, but I’d love to customize those things too and some of the padding, etc.

Hello Rory, sorry for the late reply!
It’s still supported, I think your problem is in the setup of the plugin, I emailed you :slight_smile:

Bug report!

Seems conditional states do not work, at least as far as setting them via the product tour’s step index. It seems that if the condition is true when the tour starts, then it is applied through all steps. If the condition is false when the tour starts then it is not applied at all, even if it becomes true later.

i.e. if you set a conditional state for step one, then it is applied throughout the tour. Conversely if you set it for any other step, it is not applied at all.

EDIT:

On further investigation, conditional behavious is erratic, it works as expected for some properties, but others it either does not work at all or does not work properly.

Q. How do I make the Tour only show up once or just to new users?

Great plugin by the way - I got it working easily by copying what you did in the video: [Bubble] How to create a product tour for your app (nocode onboarding) 🚩 - YouTube

Hi, glad you like the plugin :slight_smile:

About data persistence, it’s on your side. You choose where you want to store a variable/property that knows if the user has completed the round. The goal is to allow you to start the tour whenever you want.

We usually add a “hasCompletedOnboarding” or “isFirstTimeUser” property in the User model.

As soon as the user finishes his tour you’d update this property and the next time he will logs in you’ll check if you should show him the tour or not.

1 Like

Where can we find out information about this feature of the plugin?

:dart: Make the user do specific actions to complete the onboarding

Since you can use a custom workflow to control if the tour should go to the next step or not, you can make the user do specific actions :slight_smile:

:point_right: See step 4 of the demo

Not sure if I am doing something wrong here. Every time a user logs onto the page, the onboarding flow starts again. I am using it on the dashboard which the user will visit many, many times. How do I make sure the onboarding flow is only shown once?

Hi, do you use a similar workflow? :slight_smile:

Nice plugin! Thanks!

However, the demo version from the first message is not mobile friendly, or at least partly.

Any chances to get around that?

Hi, thanks! I’m glad you like it :slight_smile:

Can you tell me more about the responsive/mobile friendly issue? It’s working well on my side.

Try to open in Chrome, minimize the tab horizontally to be like a phone width size, and then trigger the tour, click couple of time “next”, and for me at least, tour disappears after a while, 3rd step…

Hope this helps!

Thanks for noticing it!

It’s actually not caused by the plugin but by the demo that is not responsive. The tour modal is not visible because the input is out of the screen :slight_smile:

1 Like

Hey @nocodejungle, is there a way to reference an element in a popup? I’m trying to have a step reference the “URL” input field in this popup, but looks like the help text may be hidden behind the popup.