Getting Started
Configuring channels
Authoring conversations
Onscreen guidance
OverviewHighlighting page elementsAdding interactivityObserve and act on page interactionsObserve and act on page changesObserve interaction in a form
Proactive conversations
Server installation

Available in: Botfront Cloud Botfront Enterprise

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.

Observe and act on page interactions

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

The next step of the tutorial is to highlight the Mortgage demo item under Resources once the user hover Resources.

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 hovers the Resources menu item. To do that we must add an a observer with 2 parameters

  • The selector of the Resources menu (same as highlight)
  • The event you want to obvserve: mouseover
  • 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

Botfront is a conversational platform. Dialogues are combinations of user utterances or actions followed by bot responses or actions.
When the user hovers the Resources 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 hovers the Resources 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 Mortgage demo item inside Resources. Additionally, it demonstrates how you can change the style by adding an existing css class.

Observe and act on page changes

Note: there is a typo in the video: the response should be “Click the mortgage demo menu item” and not “Hover…”

Since Mortgage demo is a link, the user is going to leave the page when they clicks. Therefore page interactions won’t work here: we’ll use 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 the Hover the Mortgage demo menu item bot response.
  2. We added the expected destination URL and set next 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 next user payload corresponding to the user reaching the expected page.
  4. We added a bot response that will appear once the user lands on the new page.

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

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: adding an amount in an input field
  2. We got the amount input field selector and highlighted it in Botfront. We added a custom style
  3. We added an observer on the same selector. We selected onchange which is triggered when the user hits Enter after the content of the input field has changed.
  4. In the conversation we add a new turn ending with a tutorial completion message.

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.