skip to Main Content

With the generic templates for Facebook chatbots it is possible to use animated GIF images. This works perfectly for the desktop version. With the messenger app on iOS or Android the animation is not playing and only the first frame is displayed instead.

Is there something I can do to make it also work in the messenger app?

Here is the documention about the generic templates for the Facebook chatbot: https://developers.facebook.com/docs/messenger-platform/send-api-reference/generic-template

3

Answers


  1. I tried it too, but the answer is what you knew. Animated Gifs works as single picture, but doesn’t work in any templates. I’ve read all reference by FB and checked all news they’ve published. But they haven’t mentioned about it and there is just the true by my hand below.

    o single picture on browser
    o single picture on app
    o picture of template on browser
    x picture of template on app

    o -> animating
    x -> stop and just first frame is shown

    Login or Signup to reply.
  2. Yes you also send a gif message but int the url section you have to give a valid url of that gif…you can do it by uploading on git first and then at the last of url you have to type…..=> ?raw=true
    because in git it stored in raw format…

    You may see all the details here on my link this chatbot is handling almost every feature in the described in the documents

    Login or Signup to reply.
  3. I had the same issue when I posted a valid GIF URL in the generic template. You can see a question I posted and the answer I add after a couple of hours of searching.

    Unfortunately, animated GIF images cannot be printed through the generic template yet.

    The solution you can do is you create two payloads and not a template. The first payload will post a GIF Image and the second your buttons like,

    code

    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"
                                }
                            ]
                        }
                    }
                }
            }
        }
    ]}
    

    Here is my question with code uploaded.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search