How can I create a response with rich messages in Dialogflow?

Question

Currently, When an intent is invoked, I am calling a webhook and getting a response from the web service as json structure show below.

{
  "speech": "this text is spoken out loud if the platform supports voice interactions",
  "displayText": "this text is displayed visually"
}

This is mere text. Alternatively, What response do I have to get to display a list for example.

I tried the rich message section of dialogflow documentation. Those structures didn't work.

Answer 1

Every time DialogFlow matches an intent, you have the possibility to ask DialogFlow to send a request to a specific endpoint. An endpoint which you’ll obviously have to code.

That will allow you to retrieve the matched intent, as well as the matched parameters and contexts, and do some useful work with those.

How to use Message Object in Dialogflow

Kommunicate - Custom webhook Dialogflow integration example

Example of rich message with webhook

{
"fulfillmentMessages": [{
    "payload": {
        "message": "Object1",
        "platform": "",  // Example - Facebook, Slack...etc

      {
        "name": "Save Promo",
        "action": {
          "type": "quickReply",
          "payload": {
            "message": "text will be sent as message",
            "replyMetadata": {
              "key1": "value1"
            }
          }
        }
      },
      {
        "name": "Save Coupon",
        "action": {
          "type": "quickReply",
          "payload": {
            "message": "text will be sent as message",
            "replyMetadata": {
              "key1": "value1"
            }
          }
        }
      }
}, {
    "payload": {
        "message": "Object2",
        "platform": ""   // Example - Facebook, Slack...etc
    }
}]

}

Answer 2

To add an Actions on Google List as part of the reply, you'll need to use the data field in your response to include a richResponse with what should be said, along with a systemIntent that contains the list information.

You can see more examples at their github example repository, but here is the one for showing a list:

{
  "data": {
    "google": {
      "expectUserResponse": true,
      "richResponse": {
        "items": [
          {
            "simpleResponse": {
              "textToSpeech": "Choose an item"
            }
          }
        ]
      },
      "systemIntent": {
        "intent": "actions.intent.OPTION",
        "data": {
          "@type": "type.googleapis.com/google.actions.v2.OptionValueSpec",
          "listSelect": {
            "title": "Hello",
            "items": [
              {
                "optionInfo": {
                  "key": "first title"
                },
                "description": "first description",
                "image": {
                  "url": "https://developers.google.com/actions/images/badges/XPM_BADGING_GoogleAssistant_VER.png",
                  "accessibilityText": "first alt"
                },
                "title": "first title"
              },
              {
                "optionInfo": {
                  "key": "second"
                },
                "description": "second description",
                "image": {
                  "url": "https://lh3.googleusercontent.com/Nu3a6F80WfixUqf_ec_vgXy_c0-0r4VLJRXjVFF_X_CIilEu8B9fT35qyTEj_PEsKw",
                  "accessibilityText": "second alt"
                },
                "title": "second title"
              }
            ]
          }
        }
      }
    }
  }
}