You can make responses rich by adding visual and interactive elements. There are several types of elements that are supported across many channels:

Buttons

We can create buttons in response by listing them under the text key. Each button has a title, which is the text displayed on the buttons that the user sees, and a payload, which is the message that is sent from the user to the assistant when the button is clicked.

payload can be either the message itself, intent, or both intent and entities.

We will extend the form from previous chapters.

Update the utter_greet intent to look like this:

# ... previous content ...
  utter_greet:
    - text: Hey! How are you?
      buttons:
        - title: great
          payload: I feel great
        - title: subscribe
          payload: I want to subscribe

This will display two buttons, each sending the corresponding text as if user typed it. It is then classified as one of the intents we have in our domain.

As part of our form, the chatbot is asking whether or not to enable notifications. Instead of making a button send a message and then hope it gets classified as a particular intent, we can directly specify the intent of each button (note the forward slash /).

# ... previous content ...
  utter_ask_notification:
    - text: Do you want notifications?
      buttons:
        - title: Yes
          payload: /affirm
        - title: No
          payload: /deny

Lastly, let's suppose that the user has two emails, one for work and one personal. We will let them choose which one they want to use for the subscription.

# ... previous content ...
  utter_ask_email:
    - text: Which email would you like to use?
      buttons:
        - title: Work email
          payload: /inform_email{{"email":"example@work.com"}}
        - title: Personal email
          payload: /inform_email{{"email":"example@home.com"}}

Here we are specifying both the intent and the entity.

Let's see the whole form in action:

It is up to the implementation of the output channel how the defined buttons are displayed. For example, some channels have a limit on the number of buttons you can provide.

We can see that terminal can't display the buttons. However, Rasa X can.

Images

You can add images to a response by providing a URL to the image under the image key. Let's add an image to the utter_greet response:

# ... previous content ...
  utter_greet:
    - text: Hey! How are you?
      buttons:
        - title: great
          payload: I feel great
        - title: subscribe
          payload: I want to subscribe
    image: http://gph.is/1LfEFeu

In the terminal, only link is visible:

In Rasa X, the image is visible:

You can learn more about rich responses in the documentation.

In the next chapter, we will look at custom forms.

Repository for this tutorial:

You can checkout the state of the repository at the end of this tutorial by running:

git clone --branch 16-rich-responses git@github.com:petr7555/rasa-dev-tutorial.git