Send back rich responses to Actions on Google through Dialogflow webhook fulfillment

Question

To get Google Assistant to display rich responses to the user, one must provide it with a response like the example on the Actions on Google docs. However, since I'm using Dialogflow as the intermediary party between my server and Google's, I need to provide some kind of response to Dialogflow in my webhooks to indicate that there should be a rich response. As you can see from that link, the docs mention how to send rich responses to FB Messenger, Kik, LINE, etc. but not Google Assistant.

What am I missing here? I see an option for rich responses in the Dialogflow web console, but there I can only seem to input hardcoded responses with no dynamic data from the server. What's the right way to do this?

Answer 1

Using the Dialogflow integration, the response JSON your webhook should return for a rich response will look like:

{
    "data":{
        "google":{
            "expectUserResponse":true,
            "noInputPrompts":[

            ],
            "richResponse":{
                "items":[
                    {
                        "simpleResponse":{
                            "textToSpeech":"Welcome to this Basic Card",
                            "displayText":"Welcome to this Basic Card"
                        }
                    },
                    {
                        "basicCard":{
                            "buttons":[
                                {
                                    "title":"Button Title",
                                    "openUrlAction":{
                                        "url":"https://some.url"
                                    }
                                }
                            ],
                            "formattedText":"Some text",
                            "image":{
                                "url":"http://some_image.jpg",
                                "accessibilityText":"Accessibility text describing the image"
                            },
                            "title":"Card Title"
                        }
                    }
                ],
                "suggestions":[
                    {
                        "title":"Aléatoire"
                    },
                    {
                        "title":"Top"
                    }
                ]
            }
        }
    }
}

If you are using the Node.js library You can also use the provided methods for Dialogflow integration to build your rich response.