How to use dialogflow webhook v2/v1 to response rich messages

Question

Scenario trying to achieve : When user says "approvals" bot has to talk to api/webhook and response with a list with title and small description

Title 1 abcd

Title 2 efgh

and the user will click select anyone out of it.

Integration type : Website integration

I would like to use nodejs to use as webhook v2 and is there any sample specific to the this .

I saw in v1 webhook there is just a option to send one text as reply . I dont know maybe it supports in v2 can anyone share some sample and information

return res.json({ speech: 'text', displayText: 'title', source: 'getevents' });

Answer 1

You can use Quick Replies Message Object in V1. Just reply the following:

{
    'messages': [
        {
            'type': 2,
            'platform': 'line',
            'title': 'title',
            'replies': [
                'select one',
                'select one',

            ]
        },
    ]
}

Answer 2

In Dialogflow webhook it defines the JSON payload format when Google Actions invokes your fulfilment through Dialogflow v2. So dialogflow natively doesn't support list rich responses, one needs to apply the JSON code equipped from google actions
Here is the sample code for the list template

    "messages": [
  {
    "items": [
      {
        "description": "Item One Description",
        "image": {
          "url": "http://imageOneUrl.com"
          "accessibilityText": "Image description for screen readers"
        },
        "optionInfo": {
          "key": "itemOne",
          "synonyms": [
            "thing one",
            "object one"
          ]
        },
        "title": "Item One"
      },
      {
        "description": "Item Two Description",
        "image": {
          "url": "http://imageTwoUrl.com"
          "accessibilityText": "Image description for screen readers"
        },
        "optionInfo": {
          "key": "itemTwo",
          "synonyms": [
            "thing two",
            "object two"
          ]
        },
        "title": "Item Two"
      }
    ],
    "platform": "google",
    "title": "Title",
    "type": "list_card"
  }
]

You can find out more from this source link , And a tutorial on how to implement this using fulfilment webhook can be found here

But if you want to avoid this hassle, you can integrate dialogflow with some third-party application such as Kommunicate to build every rich message. Where they have the means to implement rich messages using custom payload Dialogflow and Google Assistant and Kommunicate supports all types of rich messages like buttons, links, images to card carousel etc and provide sample codes for the same. For more detailed information you check this article

Disclaimer: I work for Kommunicate