Using Custom Payload with Chatfuel and Dialogflow (FREE CHEATSHEET)

This cheatsheet is for Chatfuel and Dialogflow users who want to use Custom Payload to send rich messages.

These payloads are adapted from Chatfuel’s JSON API documentation and can be used with Janis.ai or other self-hosted scripts. The code snippets can also be found on Github.

Sample Payloads

This is my favourite Custom Payload to use. This redirects the user to an existing Chatfuel block.

If you manage multiple bots, keep the name of the Chatfuel block consistent for commonly used intents (e.g. “Hi”, “Bye”, “Stop”, “Unsubscribe”, “Help”). This allows you to reuse the Dialogflow intents across multiple Chatfuel bots.

{
"redirect_to_blocks": [
"Welcome message"
]
}

Simply copy the code above and paste it into Dialogflow’s Custom Payload editor. Change the block name. Remember, block names are case sensitive.

{
"set_attributes": {
"attributeName": "some value"
}
}
{
"set_attributes": {
"attributeName": "some value",
"attributeName2": "some other value"
},
"redirect_to_blocks": [
"Welcome message"
]
}
{
"messages": [
{
"text": "Insert Random Text Here"
}
],
"redirect_to_blocks": [
"Welcome message"
]
}
{
"messages": [
{
"text": "Random text inserted here",
"quick_replies": [
{
"title": "Quick Reply Button Name",
"block_names": [
"Chatfuel Block Name - Case Sensitive"
]
},
{
"title": "Quick Reply Button Name",
"block_names": [
"Chatfuel Block Name - Case Sensitive"
]
}
]
}
]
}
{
"messages": [
{
"text": "Insert Random Text Here",
"quick_replies": [
{
"title": "Quick Reply Button Name",
"block_names": [
"Chatfuel Block Name - Case Sensitive"
]
},
{
"title": "Quick Reply Button Name",
"block_names": [
"Chatfuel Block Name - Case Sensitive"
]
},
{
"title": "Quick Reply Button Name",
"block_names": [
"Chatfuel Block Name - Case Sensitive"
]
}
]
}
]
}
{
"messages": [
{
"attachment": {
"type": "image",
"payload": {
"url": "https://media.giphy.com/media/yourgif.gif"
}
}
}
]
}
{
"messages": [
{
"attachment": {
"type": "image",
"payload": {
"url": "https://media.giphy.com/media/yourgif.gif"
}
}
},
{
"text": "Insert Random Text Here"
}
]
}
{
"messages": [
{
"text": "Insert Random Text Here"
},
{
"attachment": {
"type": "image",
"payload": {
"url": "https://media.giphy.com/media/yourgif.gif"
}
}
}
]
}
{
"messages": [
{
"attachment": {
"type": "template",
"payload": {
"template_type": "button",
"text": "Insert Random Text Here",
"buttons": [
{
"type": "show_block",
"block_names": [
"Insert Chatfuel Block Name - Case Sensitive"
],
"title": "Gallery Button Name"
},
{
"type": "show_block",
"block_names": [
"Insert Chatfuel Block Name - Case Sensitive"
],
"title": "Gallery Button Name"
},
{
"type": "show_block",
"block_names": [
"Insert Chatfuel Block Name - Case Sensitive"
],
"title": "Gallery Button Name"
}
]
}
}
}
]
}
{
"messages": [
{
"attachment": {
"type": "template",
"payload": {
"template_type": "button",
"text": "Insert Random Text Here",
"buttons": [
{
"type": "web_url",
"url": "https://yoursite.com",
"title": "Insert Gallery Button Title"
}
]
}
}
}
]
}
{
"messages": [
{
"attachment":{
"type":"template",
"payload":{
"template_type":"generic",
"image_aspect_ratio": "square",
"elements":[
{
"title":"Insert Card Title",
"image_url":"https://image.jpg",
"subtitle":"Insert Subtitle",
"buttons":[
{
"type":"web_url",
"url":"https://yoursite.com",
"title":"Insert Button Title"
}
]
},
{
"title":"Insert Card 2 Title",
"image_url":"https://image2.jpg",
"subtitle":"Insert Subtitle 2",
"default_action": {
"type": "web_url",
"url": "https://yoursite.com",
"messenger_extensions": true
},
"buttons":[
{
"type":"web_url",
"url":"https://yoursite.com",
"title":"Insert Button Title 2"
}
]
}
]
}
}
}
]
}

Modifying these payloads

These payloads can easily be customised to add more buttons or gallery cards, text or images.

If you wish to modify these payloads, but you are not a coder, here are two easy solutions:

  1. Create the rich message (e.g. Gallery Cards) in Chatfuel and just use the Redirect to Block Custom Payload in Dialogflow (see first example).
  2. If you must use the Custom Payload in Dialogflow, here is an easy trick that I like to use. All you need to do is to identify the right starting and ending point of the code snippet to copy and paste

Imagine you wanted to add a third gallery card to the above code. What you need to do is identify the specific code snippet for adding a single card.

Go to a bracket where you think the code for the individual card begins. Double click on the bracket. Dialogflow will automatically highlight the portion of the code encased by that bracket.

Copy the code. Go to where you wish to insert it. Add a comma, and paste the code in. (This can be a trial and error process, but you’ll figure it out!).

If you made an error, Dialogflow will highlight the row where there is an error in the code with a red cross. Most of the time, it would be because you omitted a comma or a bracket.

If you’re using a self-hosted script, delete the empty Text Response box. An empty text response box can cause your bot to stall, and just return the typing indicator.

If you are using Janis.ai to integrate Chatfuel and Dialogflow, Janis will send both the text response and the custom payload to the user.

Regardless of which tool you use to integrate Chatfuel with Dialogflow, the text response box should not be left empty when using Custom Payloads.

Head of Digital Transformation | Chatbot Evangelist | Speaker | 21 All Star Twitter | 3X School Builder | Top Medium writer in AI 2018 | Digitaldiscovery.sg