Hi Bella,

You can create a user guided tour by using an external library like intro.js. Intro.js works by letting you define a sequence of “steps” in JavaScript, where each step is an object that can optionally include an element (a CSS selector or DOM node) to which the tooltip is anchored. If you bind a step to an element, Intro.js will dim the rest of the page, highlight that node, and attach the bubble beside it; if you omit element, you get a full-screen, centered message.

To install the intro.js in your app you must use the CDN route. The JS file you need to import that into the scripts folder and then add it as required in your screen/block. And the CSS file import as resource and use it in your screen/block stylesheet as: 

@import url("path.css");

Change URL to the path of your file. You can download the files from here: https://introjs.com/ .

I attached a sample OML with the example below. If you want to add more features or customize it you can check the intro.js documentation: https://introjs.com/docs .

Please note: Intro.js is free for open-source, personal and non-commercial sites. If your project is non-commercial, you can use Intro.js for free. 

My result:

Forge alternatives: 

• Shepherd - a JavaScript library for guiding users
• TourGuideJS
• IntroJS

I removed localStorage check, now it runs every time. Please check the updated OML.

I would advise to use one of the forge component though, it is easier to maintain.