CX Webhook response as custom payloads

[Nandan Thakur]

Why my webhook payloads not showing as buttons?

the object I'm sending from webhook: 

{

    fulfillment_response: {

        messages: [

          {

            text: {

              ////fulfillment text response to be sent to the agent

              text: [

                "Please select anyone"

              ]

            }

          }

        ]

      },

    payload:{

  "richContent": [

    [

      {

        "type": "chips",

        "options": [

          {

            "text": "Chip 1",

            "image": {

              "src": {

                "rawUrl": "https://example.com/images/logo.png"

              }

            },

            "link": "https://example.com"

          },

          {

            "text": "Chip 2",

            "image": {

              "src": {

                "rawUrl": "https://example.com/images/logo.png"

              }

            },

            "link": "https://example.com"

          }

        ]

      }

    ]

  ]

}

}

the response I am getting in dialog flow cx.

[Dilpreet Kaur]

Hello,

You can invoke a custom event as described in documentation [1]. Also I found a similar explanation in [2]

[1] https://cloud.google.com/dialogflow/es/docs/fulfillment-webhook#event

[2] https://stackoverflow.com/questions/70194420/gcp-dialogflow-cx-returning-choice-list-buttons-in-webhook-response-fulfillm

[Saurav Nair]

Hey Nandan,

The reason you not seeing the payload is because it's being set as a webhook payload rather than a custom payload. In order to display a rich response, you need to populate the custom payload with the appropriate JSON body.

i.e. You need to populate the payload field inside of the messages array of fulfillment_response.

{
   "fulfillment_response":{
      "messages":[
         {

            "text":{
               :[
                  "Please select anyone"
               ]
            },
            "payload":{
               "richContent":[
                  [
                     {
                        "type":"chips",
                        "options":[
                           {
                              "text":"Chip 1",
                              "image":{
                                 "src":{
                                    "rawUrl":"https://example.com/images/logo.png"
                                 }
                              },
                              "link":"https://example.com"
                           },
                           {
                              "text":"Chip 2",
                              "image":{
                                 "src":{
                                    "rawUrl":"https://example.com/images/logo.png"
                                 }
                              },
                              "link":"https://example.com"
                           }
                        ]
                     }
                  ]
               ]
            }
         }

      ]
   }
}

This should let you see the payload inside the test simulator, but in order to actually see the rich response buttons, you need to enable the df messenger integration and then try it out.