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
Redirect to Block
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 Attribute
{
"set_attributes": {
"attributeName": "some value"
}
}Set two Attributes, Redirect to Block
{
"set_attributes": {
"attributeName": "some value",
"attributeName2": "some other value"
},
"redirect_to_blocks": [
"Welcome message"
]
}Send Text then Redirect to Block
{
"messages": [
{
"text": "Insert Random Text Here"
}
],
"redirect_to_blocks": [
"Welcome message"
]
}Send Text with two Quick Replies
{
"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"
]
}
]
}
]
}Send Text with three Quick Replies
{
"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"
]
}
]
}
]
}Send Image / Gif
{
"messages": [
{
"attachment": {
"type": "image",
"payload": {
"url": "https://media.giphy.com/media/yourgif.gif"
}
}
}
]
}Send Image / Gif followed by Text
{
"messages": [
{
"attachment": {
"type": "image",
"payload": {
"url": "https://media.giphy.com/media/yourgif.gif"
}
}
},
{
"text": "Insert Random Text Here"
}
]
}Send Text followed by Image / Gif
{
"messages": [
{
"text": "Insert Random Text Here"
},
{
"attachment": {
"type": "image",
"payload": {
"url": "https://media.giphy.com/media/yourgif.gif"
}
}
}
]
}Send Text with three Buttons
{
"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"
}
]
}
}
}
]
}Send Gallery Button with URL
{
"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"
}
]
}
}
}
]
}Send two Gallery Card with Square Image
{
"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:
- Create the rich message (e.g. Gallery Cards) in Chatfuel and just use the Redirect to Block Custom Payload in Dialogflow (see first example).
- 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!).
Troubleshooting
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.
When using Custom Payloads, always remember:
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.
That’s all folks!
Remember to bookmark this cheat sheet for future use, and if this has been helpful, remember to give this article a round of 👏👏👏👏👏.
Other Articles I’ve Written on using Dialogflow
About the Author
Deborah Kay is Chatbot Evangelist and Founder of Digital Discovery, a digital advisory firm based in Singapore. You can connect with her on Facebook, Instagram, Twitter, or LinkedIn.
