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

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 my second part of this blog Part-2 it includes how to send rich message like video, image and carousel.

Prerequisite

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

Send List template

chatbot-fb3-image1

The list template is a list of 2-4 elements with an button where button can be optional. Each item may contain a thumbnail image, title, subtitle, and one button.

Create new case in Switch statement,

To send this list Create new function,

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

Send Button template

chatbot-fb3-image2

Button template includes text message with up to three attached buttons. We can send three types of buttons that can handle postback, Phone call, and URL.

Create new case in switch statement,

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

Send Open Graph template

chatbot-fb3-image3
The open graph template allows to send open graph URL with optional button. Currently, only sharing songs is supported.

Create new case in Switch Statement,

Now create sendGraphTemplate() function to send element,

callSendAPI() function will send messageData to send API and the song will appear in a bubble that allows the user to see album art and preview the song.

Send Receipt template

chatbot-fb3-image4

When you are making chatbot for shopping related apps and when user buys something from your bot you must send receipt at the end of payment, that’s the receipt template facebook provides.

Create new case in switch statement,

Create sendReceiptMessage() function to send above elements,

By this way you can generate and send receipt to users when they make payment.

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