Image is displayed on Default resposnse of Dialogflow but not in Facebook Messenger response (why?)

Question

I have created a chatbot and successfully tried to pass an GIF image through a card response. However, the response is very well viewed on DialogFlow but the Chatbot Messenger doesn't show anything whatsoever.

This is how I call my Image:

# Function 4 --------------------------------------------------------------------------------------------------

def rerun_conversation(req):

    rerun_conversation_text=req.get('queryResult').get('parameters').get('rerun_again')

    if rerun_conversation_text == "No" or rerun_conversation_text == "no":

        return {"fulfillmentMessages": [
            {
      "card": {
        "title": "Enjoy the film",
        "imageUri": "https://lh6.googleusercontent.com/lVo4excFqlywxK4iJ-ITrB0QGZR8ZSF59bL46eXylYCjYRA-8J2YqcSosA-AVE8sdcC2tvnKpUBhlYHS9gu6=w1919-h1007"
      }
    }
  ]
}

    elif rerun_conversation_text == "Yes" or rerun_conversation_text == "yes":

        return {"followupEventInput": {"name": "KellyMovieBot","languageCode": "en-US"}}

The output in Dialogflow:

But in Facebook Messenger doesn't return anything

I made an update - 29.07.2020 - 22:10


        return {"fulfillmentMessages": [
    {
      "platform": "FACEBOOK",
      "card": {
        "title": "Title: this is a title",
        "subtitle": "This is an subtitle.  Text can include unicode characters including emoji .",
        "imageUri": "https://lh6.googleusercontent.com/lVo4excFqlywxK4iJ-ITrB0QGZR8ZSF59bL46eXylYCjYRA-8J2YqcSosA-AVE8sdcC2tvnKpUBhlYHS9gu6=w1919-h1007",
        "buttons": [
          {
            "text": "This is a button",
            "postback": "https://assistant.google.com/"
          }
        ]
      }
    }
  ]
}

This seems to work for Facebook Messenger response but again the image is shown in Dialogflow and not in Facebook Messenger. Code taken from this SO question.

In Messenger still, the problem exists

However, when I put a different image is shown successfully...Does it matter that gif image is from Drive? But Dialogflow doesn't have any problem with that only Messenger has.

Different static image

Update 30.07.2020-Based on comments

Changing this image uri "https://lh6.googleusercontent.com/lVo4excFqlywxK4iJ-ITrB0QGZR8ZSF59bL46eXylYCjYRA-8J2YqcSosA-AVE8sdcC2tvnKpUBhlYHS9gu6=w1919-h1007"

to

https://drive.google.com/file/d/1onUvzmNd4cvg4maSA6EpW5uu3py8jYZE/view?usp=sharing

Resulted into this (so I guess that just sharing an image from drive is not sufficient):

score 0 · Answer 1 · answered Jul 30 '20 at 01:34

0

So, the basic requirement for Image Response (including the one for the card) is that the URL should be publicly accessible. I have just checked the URL for your image and it gives 403 error. You should make it public then I guess it will be working. As additional information, Facebook supports the following image formats: .jpg, .png, static gif, animated gif. If your image is not one of the above formats you should convert it.Here's a link for your reference

answered Jul 30 '20 at 01:34

Gray_Rhino

1,153
1
12
31

you are right, its not accessible by others other than my Gmail account (which both links Dialoflow with Google Drive)...The gif image is stored in my drive and I used this SO question https://stackoverflow.com/questions/10311092/displaying-files-e-g-images-stored-in-google-drive-on-a-website to make it public URL. But apparently don't work – NikSp Jul 30 '20 at 06:10
1

Creating public url for sharing images from google drive shouldn't be difficult (just choose anyone can view when you click on share). You can use other free 3rd party tool like imgur.com for storing your images (works perfectly for me). – Gray_Rhino Jul 30 '20 at 06:18
Rhino, I have updated my question. Apparently nor the image share URL works for dialogflow. Can you please check that you have access in the URL posted? – NikSp Jul 30 '20 at 06:35
However the link from imgur.com https://i.imgur.com/XgmBUUx.gif works the same for dialogflow but not for Facebook messenger – NikSp Jul 30 '20 at 06:45
In that case, I suspect the json format that you are returning to FB is outdated – Gray_Rhino Jul 30 '20 at 09:16
Do you have any input to give on this SO https://stackoverflow.com/questions/63168363/how-can-i-send-multiple-fulfillment-messages-and-a-fulfillment-text-on-the-same ? – NikSp Jul 30 '20 at 09:19

score 0 · Accepted Answer · answered Jul 30 '20 at 07:08

Solved after 6 hours of searching:

The gif images should be passed on an Image response type and not a card

        return {
  "fulfillmentMessages": [
    {
      "platform": "FACEBOOK",
      "image": {
        "imageUri": "https://i.imgur.com/XgmBUUx.gif"
      }
    }
  ]
}

This is perfectly shown in Facebook Messenger!

Image is displayed on Default resposnse of Dialogflow but not in Facebook Messenger response (why?)

2 Answers2