Overview
Here we are going to build simple facebook messenger chatbot using dialogflow and Node.js. we won’t be going deep into it but we will cover all kind of responses that messenger platform supports like a generic template, receipt, button, media, list and graph. I hope you’ve gone through first part of this blog Part-1 it includes basic server configuration and how to send simple responses like text messages.
Prerequisite
- Facebook Page
- Facebook Developer Account
- Understanding of Dialogflow
- Knowledge of Node.js
Getting Started
We have seen how to send simple text message from the webhook server using Facebook Send API.
Now, we will look at Rich responses like card, receipts, videos, image, Buttons. But before getting started make sure you have everything working from previous blog and all intent set up with unique action in dialogflow.
Send Image
When user asks ‘send me image’ out intent from dialogflow ‘send-photo’ will get triggered and based on the intent we will get the action of that specific intent.
Make a new case in switch statement in index.js file
Index.js
case "fb-send-image":
var imgUrl = "https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/881e6651881085.58fd911b65d88.png";
sendImageMessage(sender, imgUrl);
break;Now make new function that can send Image.
const sendImageMessage = async (recipientId, imageUrl) => {
var messageData = {
recipient: {
id: recipientId
},
message: {
attachment: {
type: "image",
payload: {
url: imageUrl
}
}
}
};
await callSendAPI(messageData);
}callSendAPI() function we made last time it will send messageData to send API and user will get Image as response.
Send Video or Media template
When user asks ‘send me video’ out intent from dialogflow ‘send-video’ will get triggered and based on the intent we will get the action of that specific intent.
case "send-video":
const messageData = [
{
"media_type": "video",
"url": "https://www.facebook.com/FacebookIndia/videos/1772075119516020/",
"buttons": [
{
"type": "web_url",
"url": "https://f1948e04.ngrok.io",
"title": "View Website",
}
]
}
]
sendVideoMessage(sender, messageData);
break;You can also specify button to the video or image you are sending, for more information look at media template.
Note: In this media template you only can send images and videos that are posted on facebook. You can not send images or video from other sources. If you are sending image then you have to give media_type as “image” and for video message media_type will be “video”
Let’s create function to send the video to user.
const sendVideoMessage = async (recipientId, elements) => {
const messageData = {
recipient: {
id: recipientId
},
message: {
attachment: {
type: "template",
payload: {
template_type: "media",
elements: elements
}
}
}
};
await callSendAPI(messageData)
}callSendAPI() function will send messageData to send API and user will get Video or images as response.
Send Quick Replies
Sending Quick replies comes in handy it’s easy. We use quick replies to request a person’s location, email address, and phone number. When you tap on quick reply button it will get disappeared and the title of that button will posted to the conversation as a message.
Add a new case in Switch statement,
case "send-quick-reply":
var responseText = "Choose the options"
var replies = [{
"content_type": "text",
"title": "Example 1",
"payload": "Example 1",
},
{
"content_type": "text",
"title": "Example 2",
"payload": "Example 2",
},
{
"content_type": "text",
"title": "Example 3",
"payload": "Example 3",
}];
sendQuickReply(sender, responseText, replies)
break;Now let’s create the function to send those replies,
const sendQuickReply = async (recipientId, text, replies, metadata) => {
var messageData = {
recipient: {
id: recipientId
},
message: {
text: text,
metadata: isDefined(metadata) ? metadata : "",
quick_replies: replies
}
};
await callSendAPI(messageData);
}callSendAPI() function will send messageData to send API and user will get Quick replies as response.
Send Generic template & Carousel of Generic Templates
Generic template is kind of card that contains Maximum 3 buttons, image, title and subtitle. Carousel is like slider that includes more than two generic templates. Think as developer’s point of view while making some product level chatbot we should not make two functions for sending those responses, so we will try to make some optimization.
Create new case in switch statement,
case "send-carousel" :
const elements = [{
"title": "Welcome!",
"subtitle": "We have the right hat for everyone.We have the right hat for everyone.We have the right hat for everyone.",
"imageUrl": "https://www.stepforwardmichigan.org/wp-content/uploads/2017/03/step-foward-fb-1200x628-house.jpg",
"buttons": [
{
"postback": "https://f1948e04.ngrok.io",
"text": "View Website"
}, {
"text": "Start Chatting",
"postback": "PAYLOAD EXAMPLE"
}
]
}, {
"title": "Welcome!",
"imageUrl": "https://www.stepforwardmichigan.org/wp-content/uploads/2017/03/step-foward-fb-1200x628-house.jpg",
"subtitle": "We have the right hat for everyone.We have the right hat for everyone.We have the right hat for everyone.",
"buttons": [
{
"postback": "https://f1948e04.ngrok.io",
"text": "View Website"
}, {
"text": "Start Chatting",
"postback": "PAYLOAD EXAMPLE"
}
]
},{
"title": "Welcome!",
"imageUrl": "https://www.stepforwardmichigan.org/wp-content/uploads/2017/03/step-foward-fb-1200x628-house.jpg",
"subtitle": "We have the right hat for everyone.We have the right hat for everyone.We have the right hat for everyone.",
"buttons": [
{
"postback": "https://f1948e04.ngrok.io",
"text": "View Website"
}, {
"text": "Start Chatting",
"postback": "PAYLOAD EXAMPLE"
}
]
}];
handleCardMessages(elements, sender)
break;We are sending 3 objects in Array so it will be a carousel if we send one it will be simple Generic template.
Create handleCardMessages() to handle above elements,
async function handleCardMessages(messages, sender) {
let elements = [];
for (var m = 0; m < messages.length; m++) {
let message = messages[m];
let buttons = [];
for (var b = 0; b < message.buttons.length; b++) {
let isLink = message.buttons[b].postback.substring(0, 4) === "http";
let button;
if (isLink) {
button = {
type: "web_url",
title: message.buttons[b].text,
url: message.buttons[b].postback
};
} else {
button = {
type: "postback",
title: message.buttons[b].text,
payload: message.buttons[b].postback
};
}
buttons.push(button);
}
let element = {
title: message.title,
image_url: message.imageUrl,
subtitle: message.subtitle,
buttons: buttons
};
elements.push(element);
}
await sendGenericMessage(sender, elements);
}The above function will make payload that facebook API Accepts. Let’s make sendGenericMessage() function to send elements,
const sendGenericMessage = async (recipientId, elements) => {
var messageData = {
recipient: {
id: recipientId
},
message: {
attachment: {
type: "template",
payload: {
template_type: "generic",
elements: elements
}
}
}
};
await callSendAPI(messageData);
}callSendAPI() function will send messageData to send API and user will get Generic template or carousel as response.
Read: Introduction to Upcoming AndroidX with Material Components
Conclusion : –
I have shown the way how to send each type of responses to facebook messenger now it’s your turn to think about creative ideas to build chatbot. Fill free to hit comments if you get stuck anywhere.
You may also like
The Future of AI: Key Trends to Watch in 2025
Artificial intelligence (AI) changes how we see, act and interact with the world. However, not only ...
Whatsapp bots to grow your business
WhatsApp has a massive user base of 1.5 billion people and consequently, businesses have a keen eye on WhatsApp until now small business have WhatsApp groups and putting manpower on sharing offers, de...
Chatbot Gamification: Marketing Your Business with Fun
A popular marketing campaign for a well-established brand called Nike managed to motivate its target...
