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

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.

Prerequisite

  • Facebook Page
  • Facebook Developer Account
  • Understanding of Dialogflow
  • Knowledge of Node.js

Getting Started

Let’s start by creating Facebook App from Facebook Developer Account.

chatbot-fb-image1

You will be redirected to the Dashboard, Add a Messenger Product from there

chatbot-fb-image2

After setting up, select your Facebook page in Token Generation and Generate Token from there.

chatbot-fb-image3

Setting Up Server

Creating a simple server in node.js is easy.

Navigate to your desired folder where you are going to setup this project. Open that folder in your Terminal and run npm init this will generate the package.json file.

Now, we have to install our dependencies,
Run npm i apiai axios body-parser express uuid –save

After installing dependencies create index.js file and import that dependencies that we just installed and create simple express server. Also, make one config.js file so we can store our credentials in that file for better code management and security purpose or instead of config.js you can also create env file.

Index.js

Spin up the server. We need to make communication live so here we are using ngrok to make our localhost live but you can always use any other platform like heroku, localtunnel or any other third party services.

To make our server live type ./ngrok http 5000 in your terminal which will give you live URL. But make sure while running above command you have ngrok downloaded for Your Suitable OS. Ngrok file should be in your current working directory to successfully execute above command.

Config.js

FB_PAGE_TOKEN : Copy the Page Access token that we generated and paste in config.js.
FB_APP_SECRET : You will find App Secret on Settings<

Now click on set up webhook you will find that just below token generation window.
Paste your server URL with endpoint /webhook and Verify Token can be anything and check messages and messaging_postbacks.

When You click on Verify and Save You will receive verification GET request from Facebook. (make sure you copy https:// URL)

FB_VERIFY_TOKEN : Paste the verify token in your config.js file.
SERVER_URL : Copy your ngrok live URL and paste.

chatbot-fb-image4

Dialogflow integration

Now let’s configure dialogflow with our webhook code. Add New agent and Select v1 API and copy client access token and paste in API_AI_CLIENT_ACCESS_TOKEN.

chatbot-fb-image5

Let’s create intent in dialogflow.

  1. Add intent from the left sidebar.
  2. Give an Intent Name: Send-text
  3. Add Training Phrases “Hey, send me an example of a text message” or relevant to it.
  4. Add Action Name “send-text”
  5. Save it.
  6. Now do the same thing for send-image, send-media, send-list, send-receipt, send-Quick Reply, send-graph, send-carouselMake sure you give the unique action to all intent. We need to identify the intent of a user to send the appropriate response from our webhook server.chatbot-fb-image6Click on the Fulfillment tab and add your webhook endpoint here and save it.chatbot-fb-image7
  7. That’s it nothing more in Dialogflow for this example.

If you are not familiar with dialogflow please read the documentation.

Let’s come back to the index.js add this code snippet to connect with Dialogflow.

Setup Webhook Endpoint

Now when user will send some message on facebook we will receive the post request on the our node server. So we need to handle that /webhook endpoint.

Messages, Messaging_postbacks these two events that we checked while setting up webhook. (we are not using postback event here)
receivedMessage(messagingEvent) let’s make this function now,

If you console the event you will get JSON like,

chatbot-fb-image8

For now, Just Focus on sender.id and What message.text.
If there is messageText in receivedMessage() function then we will call sendToApiAi().

In this function, we will first call sendTypingOn() to show that bot is typing in Messenger.

Send Typing On

SendTyping will call the Facebook send API to send the Typing Action.

callSendAPI() function will send the message data that we are generating. (here we are sending the typing on action)

Let’s come back to sendToApiAi() function next is we are calling isDefined() function to just make sure we are receiving the proper response.

In the same function sendToApiAi() we will get the response from the Dialogflow in form of JSON.

chatbot-fb-image9

Send that data to the handleApiAiResponse().

Send Typing Off

Remember? we started Typing on Action on Messenger now we have response to turn it off call the sendTypingOff() function.

Send Text Message

Whenever we get unknown query from user we have to send Default message to that user.

Above function will call facebook send API and send the text message that we defined as default.

Now, if the Intent of user is matched with dialogflow we will get the action(action we are getting from dialogflow response) of that intent, based on the action we will send the response to each user.

When user asks : “Send me an example of text message” -> our intent “send-text” will get called and based on intent we will get the unique action of it. In my case I gave same action name as intent name.

If we get Action from dialogflow response, we are calling the handleApiAiAction().

chatbot-fb-image10

Conclusion : –

This is how you can interact with users by sending simple text message from the webhook server. Next time we will look at the rich messages like images, videos, quick-reply and receipt templates.
Comment your ideas about chatbots, we will try to build together.

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.

Leave a Reply

Top