Observe user behaviour

In the previous section we learned how to highlight elements on the screen. In this section we’ll learn how to observe user behaviour and orchestrate a tutorial.

To add steps to our tutorial we must wait until the user has performed the expected action (or not), and then give them the next instruction.

There are two categories of events to observe:

• Interactions on a page: you can observe mouse events such as clicks or hovers, interactions with form inputs, etc.
• Page changes: you can also observe user navigation if you expect the user going to another page.

1. Observe and act on page interactions

In the previous section, we hightlighted the Roadmaps using the response menu.

The next step of the tutorial is to highlight the New Roadmap item under Roadmaps once the user hover Roadmaps.

Enable page changes

The first step is to observe page change events. To do this, open the behaviour tab in the response menu, and enable Observe interactions.

Add the observer

We want to wait until the user clicks the Roadmaps menu item. To do that we must add an observer with 2 parameters

• The selector of the Roadmaps menu (same as highlight)
• The event you want to observe: click
• A callback intent: when the event occurs, a user payload will be sent to the dialogue engine. The next instruction will be a response to that intent.

Understanding callback intent

Clai is a conversational platform. Dialogues are combinations of user utterances or actions followed by bot responses or actions.

When the user hovers the Roadmaps menu, it is considered as a user action and a user action containing an intent is sent. You may or may not add example utterances to characterize this intent. For example, if you want to allow the user to say something like next, please or Move on you can add those NLU examples.

Add the next step

Now that we have established that when the user clicks the Roadmaps menu the next intent will be triggered, we can continue our story. The following video shows how to add a next instruction and to highlight the New Roadmap item inside Roadmaps. Additionally, it demonstrates how you can change the style by adding an existing css class.

Delay time

This option allows you to delay the execution of bot response. The delay time is in milliseconds.

2. Observe and act on page changes

The following video shows how we can direct a user to another page:

Let’s get into the video in more details:

1. We added a page change observer to the Hover the New Roadmap button.

2. We added the expected destination URL and set roadmaps_next2 as a callback intent. For page changes, we can also add an error callback intent which will be sent if the user lands somewhere else. We can then treat that error in a different story.

3. In our story, we added the roadmaps_next2 user payload corresponding to the user reaching the expected page.

4. We added a bot response that will appear once the user hovers on the New Roadmap button.

Using buttons in tutorials

As seen in the video above, you can use buttons to pause the tutorial with an intro or an explanation. When the user clicks the button, it will just resume the tutorial flow.

Working with different environments

You may have noticed in the video that the url starts with http://localhost:8000, which is a typical local development environment. When we deploy this virtual assistant, we won’t need to replace the protocol, host and port parts of the URLs. They are simply ignored

Element selector

Element selector is similar to the url selector. You have to add the css selector of a particular element that you are looking for on that page. When you add a css selector of particular element in that url, it will look for the css selector you have added on that url page, if the css selector of that element is present on the visited url then it will trigger the callback intent otherwise error intent will be triggered.

Note: When using the element selector you must provide the url.

Current

You can also check mark current option, if given element present in the current page then the callback intent otherwise error intent will be triggered.

3. Observe interaction in a form

In the following video we show how to guide a user through the use of a form field:

Let’s go into more details:

1. We continued our dialogue with the next instruction: click on the create button.

2. We got the click input field selector and highlighted it in Clai.

3. We added an observer on the same selector. We selected click event which is triggered when the user hits on create button.

4. In the conversation we add a new turn ending with a “Roadmaps are created successfully!!” message.

4. The end result

The result can be seen in the following video:

Form field selectors

When observing a form field, try to not to select the input itself, but the surrounding element: form field class change dynamically when the user clicks on it. This might make your selector ineffective once the user starts typing. In our example, we picked a selector containing both the label and the input field.