On screen guidance combines conversational logic with on screen indications. You can use it to implement in-app onboarding, training or support, product tours, etc.
We recommend using Chrome with the Get Unique CSS Selector extension installed.
This extension allows to quickly find and copy CSS selectors (unique identifiers of elements on your page)
Let’s do something similar to the demo you can find on our website. The visitor can ask to start the demo, and the first step is to highlight the Resources menu.
Now we need to let Botfront know which element of the page to highlight. Open your website in a different tab and enable the chrome extension you installed in the previous step by clicking the icon in your extensions bar. You should see a small blue rectangle:
Now that your extension is enabled, you can find the selector of the Resources menu item: hover it with your mouse, right-click and select Copy unique selector to clipboard:
Back to your story, you can paste (
Cmd/Ctrl + V) the selector copied above as shown below:
Train your bot and see the result:
When showing things oon screen, you generally want the chat widget to be closed and the message attached to the higlighted element. To do this, simply force close the widget on your message.
And the result:
By default, Botfront will surround the DOM element you specify with a blinking green rectangle. You can change that is different ways:
- You can write CSS directly in Botfront
- You can specify the name of an existing CSS class on your site.
If you site or app is responsive, some selectors will be available only at certain screen sizes. In our example, the Resources menu item is hidden under the hamburger menu on mobile. To access Resources you need to open the hamburger first:
To support both mobile and desktop screen sizes, you can add several selectors separated with a comma: one selector for the Resources menu item and one for the hamburger, as shown in the following video: Proceed as in step 3 above to retrieve the hamburger selector. Just resize your browser until the hamburger appears.
When multiple selectors are added to a highlight, the tooltip will be attached to the chat widget launcher, and not to the highlighted element.