Dialogflow: Using Rich Responses in the Default Dialogflow Messenger

Dialogflow is a versatile platform that allows you to develop conversational experiences across a variety of platforms.  It supports development not only for Google environments like Assistant and Hangouts but also for other companies’ platforms like Facebook and Slack.  However, Google also offers its own Dialogflow Messenger platform.  As a beta feature, Dialogflow Messenger may have limited support or incompatibilities with other products. It can be useful, though, for those starting to learn Dialogflow or for developing a quick MVP to test ideas.  To fully realize these use cases, though, you need to be able to use rich message responses, like cards or buttons.

Many tutorials focus on integrations with other platforms or third-party services in order to use rich message responses in Dialogflow.  These other services could be costly if you are just learning or conducting limited testing.  Rich response messages are important because they allow you to serve responses to users in a visually appealing way. They include things like buttons, cards, and accordions.

Consider, for example, sending a link. The example below returns the link relevant to a user’s request.  The link response basically takes up the entire Dialogflow Messenger screen.  We could remove all the extra URL parameters or use a link shortener.  Even still, the link is not clickable. 

Compare this user experience with one that uses a rich response message.  The link response is much more compact than before, and the user can click it to open the link in a new window.  Also, we can provide some context about the link our chatbot has served.  This information lets the user confirm that the bot has given them what they wanted before clicking.

Google has provided useful documentation about the rich message responses for Dialogflow Messenger.  It provides templates for you to copy and adapt within your responses.  Let’s look at how to set up a rich message response and then test it out.

For our purposes, we will just use the basic “Info response type.” It has the following components.

• title: The card’s main header.  It is bolded by default.

• subtitle: The card’s secondary header.  It is a light grey by default.

• image: Shows a large image above the title.

• actionLink: The link that will open when a user clicks a card.

{
  "richContent": [
    [
      {
        "type": "info",
        "title": "Info item title",
        "subtitle": "Info item subtitle",
        "image": {
          "src": {
            "rawUrl": "https://example.com/images/logo.png"
          }
        },
        "actionLink": "https://example.com"
      }
    ]
  ]
}

In the Intents section, click on CREATE INTENT.

For this intent, we’ll be looking up pictures related to a specific type of cat – a Himalayan Persian.  We’ll name the intent cat_pics_HimPerCat.  We’ll also need to add some training phrases.  Some examples are below:

• I want to see pictures of Himalayan Persian cats.

• Do you have pictures of Himalayan Persian cats?

• I’d like to look at Himalayan Persian cat pictures.

• Show me Himalayan Persian cats.

• Himalayan Persian cats

In the Responses section, delete the existing text response.

Choose ADD RESPONSES.

Then, choose Custom Payload.

Our response card will just use text.  We won’t include an image this time because the info response’s image is so small. For now, just copy the JSON below into the editor.  When you finish, click SAVE.

{
  "richContent": [
    [
      {
        "type": "info",
        "title": "Himalayan Persian Cats",
        "subtitle": "See some long-haired cats",
        "actionLink": "https://www.google.com/search?source=univ&tbm=isch&q=himalayan+persian+cats"
      }
    ]
  ]
}

With everything set up, we can test our intent with the testing console on the right side of the screen.  Type in one of the phrases we entered as a training phrase earlier.

The results in the diagnostic panel may look unusual.  Dialogflow has recognized the right intent, but it has said the response is Not available.  We definitely set a response, so this doesn’t seem accurate.  To get more information about what Dialogflow returned, click DIAGNOSTIC INFO.

In the window, we can see the full response Dialogflow would send back through Dialogflow Messenger (or whatever other platform we are using).  The custom payload we set up is included in the response.  Our work so far doesn’t have any problem. This testing console only returns text responses.  It will not display rich response content. Whew.

To see the actual responses, we need to enable Dialogflow Messenger by going to Integrations.

Then, we need to enable Dialogflow Messenger.

When we click TRY IT NOW, a test instance of our chatbot will appear in the lower-right corner of the screen.  As we chat with our bot through this interface, we will be able to see and interact with the rich responses we set up.

Individual rich responses do not have to be used in isolation.  They can be mixed together to create more complex, custom responses.  Our Himalayan Persian card was an info response.  The info response’s image is too small, so we didn’t use it. Instead, we will send a bigger image along with our link info.  To do that, we will add an image response to our info response.  You can use your own test image, or you could use an image from a service like Pexels.  Here’s a great one: https://www.pexels.com/photo/grey-persian-cat-3423805/.  You can get the link for the Pexels image itself by right-clicking and selecting Copy image address.  The important thing to keep in mind is that you need a direct link to the image itself. Whatever image you decide to use, write it into the code below.  Notice we just stacked the rich responses – first the image and then the info.

{
  "richContent": [
    [
      {
        "type": "image",
        "rawUrl": "INSERT IMAGE URL HERE",
        "accessibilityText": "A white Himalayan Persian cat sitting, looking at the camera"
      },
      {
        "type": "info",
        "title": "Himalayan Persian Cats",
        "subtitle": "See some long-haired cats",
        "actionLink": "https://www.google.com/search?source=univ&tbm=isch&q=himalayan+persian+cats"
      }
    ]
  ]
}

When we test our intent again, the rich response will include both a large image and a link.  These responses combine to appear as one card.  They are actually still separate, though. If you click on the image, the link will not open because the image response does not have a link or actionLink attribute.  We can’t add those attributes either because they aren’t recognize in the image response.  To open the link, users have to click on the info response below.

Dialogflow Messenger is a great way to develop prototypes or to experiment with Dialogflow.  Since Dialogflow Messenger can be embedded into web pages, it is also a viable platform itself for distributing your bot in certain cases.  While it can be tempting to stick to text responses, rich response messages afford you more functionality and the ability to better craft your messages.  You can use individual rich responses, or you can combine them to make more complex responses suited to your needs.