On screen guidance

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.

Prerequisite

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)

Highlighting elements on the screen.

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.

1. Let’s first create our story

2. Enable the chrome extension

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:

3. Get your selector

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:

4. Create your highlight

Back to your story, you can paste (Cmd/Ctrl + V) the selector copied above as shown below:

Train your bot and see the result:

5. Showing the tooltip

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:

6. Customizing the hightlighting style

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.

7. Handling responsiveness

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.