Highlighting page elements

Prerequisite

We recommend using Chrome with a CSS selector extension installed.

These extensions provide the capability 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 Roadmaps menu.

1. Let’s first create our story

2. Get your selector

To get selector of Roadmaps menu item, select the html and right click on the html and then copy > copy selector.

3. 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:

4. Showing the tooltip

When showing things on 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:

5. Customizing the highlighting style

By default, Clai 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 Clai
• You can specify the name of an existing CSS class on your site.

You can add several selectors separated with a comma. When multiple selectors are added to a highlight, the tooltip will be attached to the chat widget launcher, and not to the highlighted element. This is useful to handle situations where the page may be rendered slightly differently based on the logged on user and the css seelctors for the element to be highlighted varies.