Is there a way to set beacon at a certain stepIndex?

[RichelleT]

I have a multi-route joyride, and i have 4 steps, 2 steps are in page 1 and the other 2 steps are in page 2.
when i click anywhere outside of the joyride floater to close at the second step, it will give me a warning for target not mounted because the next step's target is in another page.

Is there possibly a way to set which stepIndex the beacon appears at if a certain condition is met or let the beacon show at the current stepIndex instead of the next step?

[gilbarbara]

Hey @RichelleT

Did you check the multi-route demo code, especially the handleCallback?
You should stop the tour when you want to change the route and start it again when the new route is ready.

[RichelleT]

sorry, i should have been more specific but i meant the red beacon button.
looking at the demo, if i click anywhere to close the joyride floater, for example at step 1, the red beacon will show up on the next step (step 2) like in the screenshot and when you click on it, it will open up step 2, but is there a way to set it to show up on step 1 or the step that was closed at?

[gilbarbara]

The "Basic" demo from the screenshot doesn't use stepIndex or multi-route.
Since you mentioned the target not mounted error, I assumed the step was incremented without rendering the target.

If you set the continuous prop and click Next or the overlay, it will go to the next step without showing the Beacon.
If you set disableBeacon in the step, it will skip the beacon.

So the flow you want is:

• start the tour
• show the beacon for the first step.
• click the beacon to show the tooltip.
• click next to show the tooltip for step 2.
• click next (or the overlay), stop the tour, go to the new route, start the tour, and show the beacon?

Is that correct?

[RichelleT]

The "Basic" demo from the screenshot doesn't use stepIndex or multi-route.

Since you mentioned the target not mounted error, I assumed the step was incremented without rendering the target.

If you set the continuous prop and click Next or the overlay, it will go to the next step without showing the Beacon.

If you set disableBeacon in the step, it will skip the beacon.

So the flow you want is:

• start the tour

• show the beacon for the first step.

• click the beacon to show the tooltip.

• click next to show the tooltip for step 2.

• click next (or the overlay), stop the tour, go to the new route, start the tour, and show the beacon?

Is that correct?

The flow I want is

1. Start joyride tour
2. Show tooltip step 1
3. Click close button
4. Show red beacon button on step 1 target/element
5. Click on red beacon button on step 1 element/target
6. Open up tooltip and show step 1
7. Click next on tooltip and go to/show step 2
8. Click close tooltip on step 2
9. Show red beacon button on step 2 target/element
10. Open up tooltip and show step 2
11. Click on next and navigate to another page/route and show step 3
12. Click on close button on step 3
13. Show red beacon button on step 3 element
14. Click red beacon button on step 3 element and open up tooltip showing step 3
15. Click on next button and show last step (step 4)
16. Click on close button and show red beacon button on step 4 element
17. Click on red beacon button and open up tooltip showing step 4
18. Click last button and end joyride tour

I've achieved multi-route and continuing the joyride tour on the navigated page with 0 issues

My issue currently is how (if there's a method) to set the red beacon to show on the step that it is closed (step 1 (for example)) at instead of showing the read beacon button on the next step (step 2)

[gilbarbara]

If I understood correctly, that's not possible using the default flow. You won't be able to show the beacon again for the step.
After you click next/close/overlay, the step is complete, and will go to the next step.
It might be possible to create a very complex setup using the callback to reset and replace the steps everytime, but I can't help or support that.

But anyway, if the user already saw the tooltip, why do you want to show it again?

[RichelleT]

the idea was to make them in some way acknowledge that they saw the step and have them click the next button to show the next step, instead of having the possibility of them accidentally clicking anywhere outside the joyride tooltip to close and have them open it at the next step (despite having the back button) but also allowing them to temporarily close (which means i cannot use the disableOverlayClose prop) the tooltip by clicking outside of the tooltip without stopping/ending the tour and allowing them to continue the tour at the step they closed at.

I have marked your reply on the matter as the answer.
Thank you for your time and clarification on the matter.