Facebook Rich Message Channel

In the example below you can see how a rich message facebook messenger channel can be built using a webhook template. This rich message style will have elements that appear like below on facebook messenger it uses a template facebook messenger call the generic template:

There are host of additional rich message types you can build, these are covered in more detail in the facebook messenger docs and include: 

• List Template
• Media Template
• Receipt Template
• Airline Templates

The list template is great for news updates for publishers, the media template allows you to send video and other rich media, the receipt template is great for sending receipts for ecommerce and the airline templates covers use cases like boarding passes etc.

This example can be used to send rich messages via FB Messenger. The url comes from the Facebook Messenger API docs :

URL: https://graph.facebook.com/v2.6/me/messages?access_token=***********************  

The API call is being made to this Messages endpoint used to send FB messenger messages,  and you will need to use raw text to send params. Params include:

• recipient: Name of the JSON Object containing params for user the message is to be sent to
  • id: the facebook messenger id of the user this is being pulled in from your users profile via the personalisation syntax {{fb_messenger_id}}
• message: Name of the JSON Object containing params for the message content
  • attachment: JSON Object for message with rich content attached
    • type: attachment type "template" for this example
    • payload:  JSON Object for message payload
      • template_type: the type of template used "generic" for this example for more on the facebook messenger generic template see docs
      • elements: JSON Array with objects for individual elements of message
        • image_url: the url of the image 
        • title: title of message appears below image
        • subtitle: the subtitle that appears below the title
        • buttons: the CTA buttons that appear below the subtitle

NOTE: Params placed in raw text as JSON like below, and you can have multiple elements (There is example JSON for a rich message with two elements further down in this article.):

{
  "recipient":{
    "id":"{{fb_messenger_id}}"
  },
  "message":{
    "attachment":{
      "type":"template",
      "payload":{
        "template_type":"generic",
        "elements":[
          {
            "title":"YOUR TITLE HERE",
            "image_url":"YOUR IMAGE URL HERE",
            "subtitle":"YOUR SUBTITLE HERE",
            "buttons":[
              {
                "type":"web_url",
                "url":"YOUR LINK HERE",
                "title":"BUTTON TEXT HERE"
              }
            ]
          },
          ...... ADDITIONAL ELEMENTS
        ]
      }
    }
  }
}

Finally this API requires one headers:

• Content-Type:for this example the type is “application/json”

Template

Once you have your webhook working we recommend you save it as a template. This will allow you to quickly select it on the webhook channel page in campaign creation:

So you can save your FB messenger template with all settings configured except for the message text string. When you want to send a message via FB messenger use you webhook template and fill out the message text.

You can use sample message below based on content from xtremepush blog to quickly test this style of message.

{
    recipient: {
      id: recipientId
    },  
    "message":{
      "attachment":{
          "type":"template",
          "payload": {
              "template_type":"generic",
              "elements": [
                  {
                      "title": "Geofencing vs iBeacons",
                      "image_url":"https://d2duw1tbgzwwah.cloudfront.net/wp-content/uploads/2017/10/geo-vs-beacons-750x500.jpg?resize=720%2C346&ssl=1",
                      "subtitle":"Which best suits your Business?",
                      "buttons":[
                          {
                            "type":"web_url",
                            "url":"https://xtremepush.com/xtremepush-geofencing-ibeacons/",
                            "title":"Read More"
                          }
                      ]
                  },
                  {
                      "title": "GDPR – The Practicalities of a New Reality",
                      "image_url":"https://d2duw1tbgzwwah.cloudfront.net/wp-content/uploads/2017/05/GDPR-Practicalities-NEWS-750x423.png?resize=1250%2C600&ssl=1",
                      "subtitle":"There are now about 380 days until GDPR is ‘the new reality",
                      "buttons":[
                          {
                            "type":"web_url",
                            "url":"https://xtremepush.com/gdpr-get-gdpr-compliant/",
                            "title":"Read More"
                          }
                      ]
                  }
              ]
          }
      }
  }
  }

The rich message style style appears in messenger app on mobile or web as shown below (message with images and read more CTA below are from example above ).