CODEWITHSUNDEEP
botsbotframeworkchatbotfacebook-messenger-bot
PirateApp
PirateApp

Reputation: 6230

AnimationCard works on emulator but not on Messenger

I am trying to display an Animation Card using the Bot Framework with a text, GIF and buttons. It works perfectly on the bot emulator but does not show up on Messenger. Any ideas?

Code

/**Send the question with the level information if available, the index and the Math expression along with a countdown timer as GIF attachment */
let message = new builder.Message(session)
    .text(level ? level + '  \n' + strings.question : strings.question, dialogData.index + 1, question.expression)
    .addAttachment(
    new builder.AnimationCard(session)
        .media([{
            profile: "image/gif",
            url: "https://media.giphy.com/media/l3q2silev6exF53pu/200w.gif"
        }])
        .buttons(buttons)
    // .toAttachment()
    )
session.send(message)

On Emulator enter image description here

On Messenger enter image description here

Any ideas what might be off? Thank you in advance for your suggestions

UPDATE 1

This s the error on my console

{"error":{"message":"(#100) Param [elements][0][title] must be a non-empty UTF-8 encoded string","type":"OAuthException","code":100,"fbtrace_id":"CLEcx63w+4N"}}

Upvotes: 1

Views: 324

Answers (1)

mgbennet
mgbennet

Reputation: 622

You need to include a title with your animation card, Messenger requires all cards to include a title. Also, animation cards work a little differently in messenger in that they send a message with the .gif followed by a card with the title and the buttons, rather than having them all together in a nice card like in the emulator.

In your use case, I would use first line saying what level it is as the title, and the question as the subtitle. This text will appear below the gif instead of above it, though, so it's a little different layout than what you have now.

let message = new builder.Message(session)
    .addAttachment(
    new builder.AnimationCard(session)
        .title(level ? level : 'Level 0')
        .subtitle(strings.question)
        .media([{
            profile: "image/gif",
            url: "https://media.giphy.com/media/l3q2silev6exF53pu/200w.gif"
        }])
        .buttons(buttons)
    )
session.send(message)

Upvotes: 4

Related Questions