Dialogflow Custom Payload for Facebook Messenger

15 August 202128 March 2023 Munir Hassan

We are developing a chatbot for one of our clients. The chatbot is for Facebook Messenger and in the backend, we are using Google Cloud Dialogflow. Dialogflow is a natural language understanding platform. Our requirement was to provide an engaging user experience. We used a few custom messenger templates to display structured messages. These templates are not much complicated but sometimes it could be tricky, for example, if we miss a parameter or misspell a property it will not work and sadly there will be no error messages.

We used several templates to provide a pleasing user experience. A carousel will look like this

Dialogflow custom payload for a carousel:

{
	"facebook": {
		"attachment": {
			"type": "template",
			"payload": {
				"template_type": "generic",
				"elements": [
					{
						"default_action": {
							"webview_height_ratio": "COMPACT",
							"type": "web_url",
							"url": "https://www.tafensw.edu.au/"
						},
						"title": "Tafe NSW",
						"image_url": "https://www.tafensw.edu.au/documents/60140/1073693962/Job+Trainer+homepage+banner+-+desktop+v2.jpg/4e3bda66-9f56-9d0b-85f4-4412d5613b91?t=1603752070254",
						"buttons": [
							{
								"type": "web_url",
								"url": "https://www.tafensw.edu.au/",
								"title": "Search"
							}
						],
						"subtitle": ""
					},
					{
						"default_action": {
							"type": "web_url",
							"url": "https://tafeqld.edu.au/",
							"webview_height_ratio": "COMPACT"
						},
						"buttons": [
							{
								"title": "Search",
								"type": "web_url",
								"url": "https://tafeqld.edu.au/"
							}
						],
						"image_url": "https://tafeqld.edu.au/assets/oneweb/images/Courses/Study-areas/Business-justice-management/Accounting%20and%20finance/01_hero/accounting-ce-michelle-outcome-feature.jpg",
						"subtitle": "",
						"title": "Tafe QLD"
					},
					{
						"title": "Tafe VIC",
						"default_action": {
							"url": "https://www.education.vic.gov.au/training/Pages/default.aspx",
							"type": "web_url",
							"webview_height_ratio": "COMPACT"
						},
						"buttons": [
							{
								"url": "https://www.education.vic.gov.au/training/Pages/default.aspx",
								"title": "Search",
								"type": "web_url"
							}
						],
						"subtitle": "",
						"image_url": "https://www.education.vic.gov.au/about/news/PublishingImages/2020/KanganHorticulture.jpg"
					}					
				]
			}
		}
	}
}

A Video card

Dialogflow custom payload for a video card:

{
  "facebook": {
    "attachment": {
      "payload": {
        "template_type": "media",
        "elements": [
          {
            "url": "https://www.facebook.com/100559414942740/videos/925282991363243",
            "media_type": "video"
          }
        ]
      },
      "type": "template"
    }
  }
}

Phone call card

Dialogflow custom payload for a Phone call card:

{
	"image_url": "https://image.jpg",
	"title": "Info line",
	"buttons": [
		{
			"payload": "12345",
			"type": "phone_number",
			"title": "Call now"
		}
	],
	"subtitle": "",
	"default_action": {
		"url": "https://contactUS",
		"type": "web_url",
		"webview_height_ratio": "COMPACT"
	}
}

Button Card

Dialogflow custom payload for a button card:

{
 "facebook":{
   "attachment":{
     "type":"template",
     "payload":{
       "template_type":"button",
       "text":"What do you want to do next?",
       "buttons":[
         {
           "type":"web_url",
           "url":"https://www.messenger.com",
           "title":"Visit Messenger"
         },
         {
           "type":"web_url",
           "url":"https://www.google.com",
           "title":"Visit Google"
         },
         {
           "type":"web_url",
           "url":"https://www.yahoo.com",
           "title":"Visit Yahoo"
         }
       ]
     }
   }
 }
}

Thanks
Munir