Chatbot for Facebook Messenger using dialogflow and Node.js: Part2

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

chatbot-fb2-image1

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

Now make new function that can send Image.

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

chatbot-fb2-image2

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.

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.

callSendAPI() function will send messageData to send API and user will get Video or images as response.

Send Quick Replies

chatbot-fb2-image3

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,

Now let’s create the function to send those replies,

callSendAPI() function will send messageData to send API and user will get Quick replies as response.

Send Generic template & Carousel of Generic Templates

chatbot-fb2-image4

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,

We are sending 3 objects in Array so it will be a carousel if we send one it will be simple Generic template.

The above function will make payload that facebook API Accepts. Let’s make sendGenericMessage() function to send elements,

callSendAPI() function will send messageData to send API and user will get Generic template or carousel as response.

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.

mm

Nikhil Savaliya MEAN Stack Developer

I am Nikhil Savaliya, working as a MEAN Stack Developer at Yudiz Solutions Pvt. Ltd. - a leading mobile app, mobile games and Web Development Company. Technophile, Who wants to explore innovative ideas about AI that can make our life easier.

Comments are closed.

Top