Generating a card with button is shown successfully in Dialogflow but not in Facebook Messenger

Question

I have the following fulfillment message which is run success on Dialogflow platform:

return {"fulfillmentMessages": [
        {
            "platform": "FACEBOOK",
                "text": {
                    "text": ['Great news! Grab a bowl of Pop-Corn and enjoy one of the two films!\n\n(Type "Thank you" to continue!)']
                    }
                },
        {
            "platform": "FACEBOOK",
                "card": {
                           "buttons": [
                          {
                            "text": "Thank you"
                          }
                     ]
                }
            }
        ]
    }

Output is this in Dialogflow:

However, the same expected result is never accomplished in Facebook Messenger:

I have found similar questions on SO:

• question 1
• question 2

However, none of them solved my issue. Probably because I miss something.

Answer 1

I found a solution after reading the Facebook for Developers documentation.

Note that this solution works for Facebook chatbot and for Facebook Messenger

def thanks(req):
    your_welcome_gif=[ "https://media3.giphy.com/media/KCw6QUxe9zBO6QNrFe/giphy.gif", 
                       "https://media1.giphy.com/media/H21d4avBXs8B9X0NLj/giphy.gif", 
                       "https://media1.tenor.com/images/15bafc0b414757acab81650a6ff21963/tenor.gif?itemid=11238673"]

    greeding = req.get('queryResult').get('parameters').get('greeding')

    if greeding == 'Thank you' or greeding == 'thank you' or greeding == 'Thanks' or greeding == 'thanks' or greeding == 'Nice' or greeding == 'nice':

        return {"fulfillmentMessages": [
        {
            'payload': {
                "facebook": {
                    "attachment": {
                        "type": "image",
                        "payload":{
                            "url":random.choice(your_welcome_gif)
                        }
                    }
                }
            }
        },    
        {
            'payload': {
                "facebook": {
                    "attachment": {
                        "type": "template",
                        "payload": {
                            "template_type": "button",
                            "text": "You're welcome :) \nWould you like to choose another movie?",
                            "buttons": [
                            {
                                "type": "postback",
                                "title":"Yes",
                                "payload":"Yes"
                            },
                            {
                                "type": "postback",
                                "title":"No",
                                "payload":"No"
                            }
                        ]
                    }
                }
            }
        }
    }
]}

The solution is to create two custom payloads, one for the GIF image and the other for your buttons.