Message from the server to the front
The format of all the messages is the same as messenger, so you can find all the messenger documentation here: https://developers.facebook.com/docs/messenger-platform/send-api-reference
I will put here all the type of message we are using for Vizir. The design should be the closest possible to Facebook Messenger (Mobile + desktop). The interaction are pretty simple but need to be really well done.
Get a simple message
{
"recipient": {
"id": "USER_ID"
},
"message": {
"text": "hello, world!"
}
}
Get a message with an attachement
Type d'attachement : voir doc facebook :
- Image
{
"recipient": {
"id": "USER_ID"
},
"message": {
"attachment": {
"type": "image",
"payload": {
"url": "https://petersapparel.parseapp.com/img/shirt.png"
}
}
}
}
- Audio
{
"recipient":{
"id":"USER_ID"
},
"message":{
"attachment":{
"type":"audio",
"payload":{
"url":"https://petersapparel.com/bin/clip.mp3"
}
}
}
}
- vidéo
{
"recipient":{
"id":"USER_ID"
},
"message":{
"attachment":{
"type":"video",
"payload":{
"url":"https://petersapparel.com/bin/clip.mp4"
}
}
}
}
- File
{
"recipient":{
"id":"USER_ID"
},
"message":{
"attachment":{
"type":"file",
"payload":{
"url":"https://petersapparel.com/bin/receipt.pdf"
}
}
}
}
Template
Documentation de Facebook : https://developers.facebook.com/docs/messenger-platform/send-api-reference/templates
- type of message generic (It is the only one we will use from facebook for now)
Each elements object is equivalent to a card in a carousel
There are different type of button (web_url and postback)
{
"recipient":{
"id":"USER_ID"
},
"message":{
"attachment":{
"type":"template",
"payload":{
"template_type":"generic",
"elements":[
{
"title":"Welcome to Peter\'s Hats",
"image_url":"https://petersfancybrownhats.com/company_image.png",
"subtitle":"We\'ve got the right hat for everyone.",
"default_action": {
"type": "web_url",
"url": "https://peterssendreceiveapp.ngrok.io/view?item=103",
"messenger_extensions": true,
"webview_height_ratio": "tall",
"fallback_url": "https://peterssendreceiveapp.ngrok.io/"
},
"buttons":[
{
"type":"web_url",
"url":"https://petersfancybrownhats.com",
"title":"View Website"
},{
"type":"postback",
"title":"Start Chatting",
"payload":"DEVELOPER_DEFINED_PAYLOAD"
}
]
}
]
}
}
}
}
- Quick replies
The quick replies are buttons that will be present just above the input box. We can add these kind of button on all kind of messages
"recipient":{
"id":"USER_ID"
},
"message":{
"text":"Pick a color:",
"quick_replies":[
{
"content_type":"text",
"title":"Red",
"payload":"DEVELOPER_DEFINED_PAYLOAD_FOR_PICKING_RED"
},
{
"content_type":"text",
"title":"Green",
"payload":"DEVELOPER_DEFINED_PAYLOAD_FOR_PICKING_GREEN"
}
]
}
}