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

2
votes

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?

enter image description here

2
webhooksactions-on-googledialogflow-esfulfillment

2 Answers

6
votes

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.

2
votes

If you're using Node.js you should call the method buildRichResponse() and then add items as child of that object, like this:

app.ask(app.buildRichResponse()
.addSimpleResponse('A text to be spoken')
.addBasicCard(app.buildBasicCard('Some text to be displayed')
  .setTitle('A title')
  .addButton('Read more', 'https://example.google.com/something')
  .setImage('https://example.google.com/image.png', 'Image alternate text')
  .setImageDisplay('CROPPED')
  )
);

That was an example for adding a BasicCard, you can see how to add Carousels, Lists and Suggestions Chips at https://developers.google.com/actions/assistant/responses#rich-responses