How to send rich text card using Microsoft Bot Framework and Facebook Messenger?

578 views Asked by At

I am using Facebook Messenger Platform and Microsoft Bot Framework to create a bot that sends rich text attachments.

So far, I have tried using the generic template in my intent file:

messageData = {
                "attachment": {
                    "type": "template",
                    "payload": {
                        "template_type": "generic",
                        "elements": [{
                            "title": "First card",
                            "subtitle": "Element #1 of an hscroll",
                            "image_url":     "http://messengerdemo.parseapp.com/img/rift.png",
                            "buttons": [{
                                "type": "web_url",
                                "url": "https://www.messenger.com",
                                "title": "web url"
                            }, {
                                "type": "postback",
                                "title": "Postback",
                                "payload": "Payload for first element in a generic bubble",
                            }],
                        }, {
                            "title": "Second card",
                            "subtitle": "Element #2 of an hscroll",  
                            "buttons": [{
                                "type": "postback",
                                "title": "Postback",
                            }],
                        }]
                    }
                }
            }
            return resolve([toCard(messageData)])
        }
    })
})
}


const toText = message => {return {type: 'text', content: message }}
const toCard = message => {return {type: 'attachment', content: message}}

I also have a sendMessageByType function in my index.js which should send a message based on the type of the response it receives from the various intents.

 const sendMessageByType = {
     text: (session, elem) => session.send(elem.content),
     attachment: (session, elem) => session.send(elem.content)
 }

The above function is called as shown below:

 .then(res => { res.forEach( (message) => sendMessageByType[message.type](session, message)) })

I have tried changing the type to text, card and attachment, but none of that worked. What would be the right type to use and how to declare it so that the card is sent?

1

There are 1 answers

1
Aayush Chadha On BEST ANSWER

So after a lot of trial and error and reading the documentation here: https://docs.botframework.com/en-us/node/builder/chat/session/#sending-message, I figured out how to make this work. Essentially, the type to use is attachment and the right way to send the rich card is as below:

attachment: (session, elem) => session.send(new builder.Message(session).sourceEvent(elem.content))