Search code examples
facebookdialogflow-esfacebook-messenger-bot

How to deploy rich formatted link for facebook messenger bot in api.ai?


In api.ai,

Rich formatting is supported for skype pretty fine. Here's an example:-

enter image description here

Here's the code of custom payload of api.ai:-

{
"skype": {
"text": "OCAS means Online Credit Approval System.\n Click [here] (http://www.erainfotechbd.com/product/ocas-online-credit-approval-system/) for more information.  ",
"attachments": [
  {
    "contentType": "image/png",
    "contentUrl": "http://weknowyourdreams.com/images/smile/smile-07.jpg",
    "name": "Profile-picture.png"
  }
]

} }

Now, I wanna do something like this in facebook messenger also. But in the api.ai doc, only audio, video and file is supported.

Is there any other way to do so for url also in messenger ?


Solution

  • Generally webhook responses can deliver any custom payload to most platforms that API.AI supports, so any feature supported by Facebook Messenger, Skype, Google Assistant, etc. can be utilized through API.AI. Unfortunately Facebook doesn't seem to support hyperlinked text. The closest analog I could find is a what Facebook calls a URL Button. Below is an example of how you could create a API.AI response that has a Facebook URL Button with Facebook's Button template:

    {
      "speech": "OCAS means Online Credit Approval System. Check your phone for more information.",
      "displayText": "OCAS means Online Credit Approval System. Click here for more information: http://www.erainfotechbd.com/product/ocas-online-credit-approval-system/",
      "data": {
        "facebook": {
          "attachment": {
            "type": "template",
            "payload": {
              "template_type": "button",
              "text": "OCAS means Online Credit Approval System",
              "buttons": [
                {
                  "type": "web_url",
                  "url": "http://www.erainfotechbd.com/product/ocas-online-credit-approval-system/",
                  "title": "Click here for more information"
                }
              ]
            }
          }
        }
      }
    }
    

    You can use also use any other Facebook Messenger APIs by including any JSON inside the "message" attribute that you see from Facebook's Messenger documentation and it will be passed along to Facebook by API.AI

    PS - the code above should produce a message that looks something like this: