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

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.

Answer 2

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