Get hands-on experience with 20+ free Google Cloud products and $300 in free credit for new customers.

Dialogflow messenger webhook response (richcontent)

I've set up a Dialogflow webhook with PHP that is working fine. Receives a query and responds correctly (message shown to the user). The problem that i have is i can't figure out how to show a basic card style message (text with a link and a image) or any kind of richcontent. This only happens in Dialogflow messenger added to a webpage. This is the json i send:

 

{
   "source": "aaaaaaaa-aaaa-aaaa-aaaa-aaaaaaaa-aaaaaaaa",
   "fulfillmentMessages": [{"card":    {
      "title": "Title",
      "subtitle": "text sample",
      "imageUri": "www.domain.com/img.png",
      "buttons": [      {
         "text": "Read",
         "postback": "www.domain.com"
      }]
   }}]
}
0 7 627
7 REPLIES 7

Hi,

the format is wrong, as per the docs, you need to do it in this way: https://cloud.google.com/dialogflow/cx/docs/concept/integration/dialogflow-messenger/fulfillment#inf...

{
  "richContent": [
    [
      {
        "type": "info",
        "title": "Info item title",
        "subtitle": "Info item subtitle",
        "image": {
          "rawUrl": "https://example.com/images/logo.png"
        },
        "anchor": {
          "href": "https://example.com"
        }
      }
    ]
  ]
}

  

Hi, the payload i send throught the webhook shows correctly in DF web UI "try it now" but doesnt show in DF messenger thats why i think its a issue with DF messenger not being able to show richcontent recieved from a webhook.

img1.pngimg2.png

** 1st image doesnt show payload but in 2nd its shown. Same payload.

 

the format is incorrect. it should be:

{
 
"richContent": [
   
[
     
{
       
"type": "info",
       
"title": "Info item title",
       
"subtitle": "Info item subtitle",
       
"image": {
         
"src": {
           
"rawUrl": "https://example.com/images/logo.png"
         
}
       
},
       
"actionLink": "https://example.com"
     
}
   
]
 
]
}

Hi, thanks for the reply.

The problem im having is that the response from a webhook isnt showing in dialogflow messenger but when i try it from dialogflow UI, it shows correctly. This makes me think the JSON im sending is correct but somehow dialogflow messenger doesnt shiw this kind of response from a webhook.

img1.pngimg2.png

** 1st image doesnt show the card but 2nd image shows it (same action in both).

payload response from webhook is:

{
"source": "aaaaaaa-aaaa-aaaa-aaaa-aaaaaaaa-aaaaaa",
"fulfillmentMessages": [{"card": {
"title": "My Title",
"subtitle": "My subtitle",
"imageUri": "https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png",
"buttons": [ {
"text": "Click my Link",
"postback": "https://www.google.com"
}]
}}]
}

 

the format is incorrect. it should be:

{
 
"richContent": [
   
[
     
{
       
"type": "info",
       
"title": "Info item title",
       
"subtitle": "Info item subtitle",
       
"image": {
         
"src": {
           
"rawUrl": "https://example.com/images/logo.png"
         
}
       
},
       
"actionLink": "https://example.com"
     
}
   
]
 
]
}

Hi,

Your sugested way works as expected in a  "Custom Payload" from DF web UI, but doesnt work in a webhook response. Any sugestion?

img3.png

yeah, this is not a custom payload, this should be part of the payload.

A custom payload is when you are using different integrations like slack and you create a payload for them and manage them accordingly in your front.

custom paylod for the web integration will never work.

Best,

Xavi