Guided Tours

[dwootton]

Describe the feature that you would like added

We’re seeking the ability to build out a guided tour through our UI. Ideally, this would have some form of visual indicator (ie a beacon) and text (ie a description of what the beacon does). Additionally, it would be great to allow you to continue to interact with the ui element that has the beacon on it (ie if you're explaining what a button does, you can still allow for a user to click it and then advance to the next stage of the tour). Currently, we are using react joyride for this, but we're hoping to stay within the fluent system.

What component or utility would this be added to

Fluent UI coachmarks/teaching bubbles.

Have you discussed this feature with our team, and if so, who

Yes, Paul Gildea.

Additional context/screenshots

[ecraig12345]

We already have a Coachmark and TeachingBubble. If you need help using them you can ask in "Fluent UI Community" ("Fluent UI React" channel) on Teams.

@paulgildea FYI

[dwootton]

Thanks @ecraig12345 . I think I wasn't super clear in my initial request. Our team is looking for functionality to be built into the coachmark and teaching bubbles allowing for them to become sequential. Currently, the dev will have to handle all of the logic for controlling the current step being displayed. It seems like this could either be it's own component or maybe a prop setting set on coachmarks. In the example provided by react joyride, this is often a multistep process (ie click here, click here, do this) with each step being associated with it's own teaching bubble/coachmark. It seems like dev's would be putting in a lot of time to handle this logic it could probably be handled inside of some internal component.

[ecraig12345]

Ah okay, got it. I'll put this on our backlog but it's not something we're likely to get to any time soon since we're currently focusing on larger work items around performance and coherence. Though if this is something you'd be interested in building we'd welcome the contribution. (For reference, we have an example of something similar on the TeachingBubble page.)