On a SharePoint Online (Modern UI) page, how to show notifications/banners/alerts to provide a guided tour to visitors (e.g., like in this screenshot)?

Question

Hi there

On a SharePoint Online (Modern UI) page, how to show notifications/banners/alerts to provide a guided tour to visitors (e.g., like in this screenshot)?

Thank you.

Answer 1

Hi @frob ,
I will recommend you to use Fluent UI to achieve your requirement. TeachingBubbles are a special kind of Callout used to prominently display important hints to a specific part of a page. They should be used to educate the user about an element that may be easy to miss, such as a new feature or option in the UI. Because they increase engagement with a part of the UI, they are often paired with Coachmarks. You can follow the steps in the article.
https://ravichandran.blog/2020/06/01/fluent-ui-teaching-bubble-in-spfx/

Note: Microsoft is providing this information as a convenience to you. The sites are not controlled by Microsoft. Microsoft cannot make any representations regarding the quality, safety, or suitability of any software or information found there. Please make sure that you completely understand the risk before retrieving any suggestions from the above link.

---

If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

---