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

results matching ""

    No results matching ""