This guide is intended for response configuration on the Dialogflow Fulfillment service. Basically, if you want to set up Dynamic Responses for each user, generated through your Backend, you need to set up Dialogflow Fulfillment Responses.
Dialogflow only supports image-card and text responses. You can also send videos, files, & carousels on WhatsApp from your fulfilment service, by following this guide.
Setting up Text Responses
Below is a simple text Response.
Implementation Example
Copy-paste this code after changing the response text message & you're good to go!
const { WebhookClient } = require('dialogflow-fulfillment');
const agent = new WebhookClient({request: req, response: res});
let intentMap = new Map();
intentMap.set(agent.intent, ()=>{
agent.add("Hi, This is Fulfillment Service responding");
})
agent.handleRequest(intentMap)
Copy
2. Setting Card Responses
In Card Responses, the Title is by default sent as the Bold text & a newline is added after it. However, this field is optional & can be left empty.
Image URL is used for sending images, videos or files. You will need to prefix the actual media URL with Media type and 2 semi-colons (;;).
Media types could be - IMAGE, VIDEO or FILE. This is a required field.
The text field is used for sending descriptions or other text along with the card. This is an optional field & can be left empty. optional field.
The title field is a required field.
Button text & Button URL currently do not hold any meaning for now. Their values don't affect the card.
Implementation example
const { WebhookClient, Card, Payload } = require('dialogflow-fulfillment');
const agent = new WebhookClient({request: req, response: res}); let intentMap = new Map();
intentMap.set(agent.intent, ()=>{
agent.add(new Card({
title: "Card Title",
imageUrl: 'IMAGE;;' + "URL of media",
text: "Card Text",
buttonText: '',
buttonUrl: ''
}));
})
agent.handleRequest(intentMap)
Copy
Setting up Carousel Response
A carousel card is used to send multiple cards for one user query on WhatsApp. This response is usually used for displaying multiple product/item options with media & descriptions. Dialogflow's Fulfillment API doesn't provide a carousel card as a response. We use a custom payload for carousel response here.
Payload has two top-level fields - one types & the other is items.
Type can have a value carousel for now.
Items is a list type. Each item is a card-type response - the title field has the same meaning as in Card Response, the body field has the same meaning as a text field in Card Response, mediaType can be IMAGE, VIDEO or FILE only, & Media Url has to be a publicly accessible link(HTTPS only) of the media.
Only Media Type & Media Url are required fields, the rest can be empty responses.
Implementation example
const { WebhookClient, Card, Payload } = require('dialogflow-fulfillment');
const agent = new WebhookClient({request: req, response: res});
let intentMap = new Map();
const payload = {
type: "carousel",
items: [
{
title: "Title of card",
body: "Card text",
mediaType: "IMAGE",
mediaUri: "Media URL"
}
]
}
intentMap.set(agent.intent, ()=>{
agent.add(new
Payload(agent.UNSPECIFIED, payload,
{rawPayload: true, sendAsMessage:
true}));
})
agent.handleRequest(intentMap)
Copy
List Response
List type messages are those where the user receives a list of responses to choose from. These messages are of type text containing a header, body and button, clicking which will pop up a list of a maximum of 10 elements to choose from.
⬇
Implementation Example
const { WebhookClient, Card, Payload } = require('dialogflow-fulfillment');
const agent = new
WebhookClient({request: req,
response: res});
let intentMap = new Map();
const payload = {
title : "Title text",
subtitle : "Body text",
buttonTitle : "List Button Name",
rows: [
{
cells: [
{
"text": "Section 1"
},
{
"text": "Option 1"
}, { "text": "Description 1"
},
{ "text": ""
}
]
},
{
cells: [
{
"text": "Section 1"
},
{ "text": "Option 2"
},
{
"text": "Description 2"
},
{
"text": ""
}
]
},
{
cells: [
{
"text": "Section 2"
},
{
"text": "Option 1"
},
{
"text": "Description 1"
},
{
"text": ""
}
]
}
],
}
intentMap.set(agent.intent, ()=>{
agent.add(new Payload(agent.UNSPECIFIED, payload, {rawPayload: true, sendAsMessage: true}));
})
agent.handleRequest(intentMap)
Size Limits
Title: maximum of 60 characters is supported.
Subtitle: maximum of 20 characters is supported.
Button Text: maximum of 20 characters is supported.
Section Title: Maximum length of each option can be 24 characters.
No emojis are allowed in the Section title.
Optional
Maximum length of description can be 72 characters.
No emojis are allowed in the option title.
Description: Optional
The maximum length of the description can be 72 characters.
Postback: Optional
The maximum length of the description can be 72 characters.
Things to note :
A maximum of 10 options is supported.
These options can be under a single Section or each option under a different section.
Each section can have 1-10 options.
**Note
If you want to create a List Message without any section, leave the section title field blank in all the options.
Quick Replies
Quick Replies are messages with self-catered expected messages like Yes/No, Interested/Not-Interested.
A maximum of 3 options can be attached to any type of message - Text, Image, Video and File.
Text Quick Reply
Image Quick Reply
To forward such messages, one just has to send a Quick Replies List along with any,
Text Response - for text quick reply
Card Response - for media quick reply
Both of these types are explained above
Implementation example
const { WebhookClient, Card, Payload } = require('dialogflow-fulfillment');
const agent = new WebhookClient({request: req, response: res}); let intentMap = new Map();
const payload = {
message: "quickReplies",
quickReplies: {
quickReplies : [
"Reply 1",
"Reply 2",
"Reply 3",
]
}
}
intentMap.set(agent.intent, ()=>{
agent.add(new Payload(agent.UNSPECIFIED, payload, {rawPayload: true, sendAsMessage: true})); })
agent.handleRequest(intentMap)
Copy
Limits:
Make sure to keep a maximum of 3 quick replies.
Each option should be a unique entry.
Each option can be a max length of 20 characters.