Botfront.
 Github
Getting Started
Configuring channels
Authoring conversations
Onscreen guidance
OverviewHighlighting page elementsPrerequisiteHighlighting elements on the screen.Adding interactivity
Proactive conversations
Server installation
Developers
Administration

Available in: Botfront Cloud Botfront Enterprise

Prerequisite

Onscreen guidance combines conversational logic with onscreen indications. 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 onscreen, 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.

When multiple selectors are added to a highlight, the tooltip will be attached to the chat widget launcher, and not to the highlighted element.