DEV Community

Creating a Whatsapp chatbot using Node JS, Dialogflow and Twilio

Newton Munene on January 03, 2020

I'm going to walk you through creating a WhatsApp chatbot using Dialogflow. I initially wanted to do this in several blog posts but I'm going to co...

Read full post

Kleiton Moraes • Jun 17 '20

Hi Newton, great article!
How can I identify the name of the itent that matched the dialogflow and give a specific answer?

I know the value in the dialogflow is at
body.intent.displayName, but how can I capture this value in the code to give a dynamic response?

Thank you!

Newton Munene • Jun 19 '20

Hey sorry for the late reply. I'm not sure I understand what you mean, but I'll answer what I understood.
When your fulfilment webhook is called the intent name will be in body.queryResult.intent.displayName you can use a switch case statement to check the name of the intent and perform some actions. You then have to return a webhook response for the request.

Here's how you can do this in express

app.post('/webhook', (req, res) => {
  switch (req.body.queryResult.intent.displayName) {
    case 'INTENTNAME':{
        const customParameter = req.body.queryResult.parameters.mYCustomParameter;
      res.send({
        fulfillmentMessages: [
          {
            text: {
              text: [`My custom response based on ${customParameter}`],
            },
          },
        ],
      });
      break;}

    default:
      break;
  }
});

Please read more about this here cloud.google.com/dialogflow/docs/f...

Kleiton Moraes • Jun 20 '20

Hello @newton , thank you very much for your answer!
I'm having trouble understanding which part of your project I should create this code that you informed.
I understand how the webhook should work, but I don't know where I put that part of the code that you passed.

I must create a new route in the bot.js file
router.post (/webhook, (request, response) => {}); ?

and then refer to BotController.ts?
With the code you passed?

Sorry for the long text, if you have any code examples that are working, you can share that I analyze and try to understand, thank you my friend!

Newton Munene • Jun 21 '20 • Edited

Hi,
From my understanding, what you're looking to achieve is something like this:

User send message from whatsapp
You get the message and send it over to dialogflow for intent matching and await a response
Use dialogflow fulfilment webhook to do something in your server
Send back a response for the fulfilment webhook
Receive the response from Dialogflow (this is the response you're awaiting in step 2)
Send the response back to whatsapp.

I have updated the repo to include a controller for Dialogflow webhook. github.com/newtonmunene99/wa-chatbot

When you receive the webhook from dialogflow, do whatever you need to do with the intent and parameters and then return the response to dialogflow. In BotController.ts, or wherever you execute the runQuery function, just await the result then send that to Whatsapp.

Kleiton Moraes • Jun 21 '20

Thank you so much @newton !
I'll look at it right now, have a great day my friend!

Kleiton Moraes • Jun 20 '20 • Edited

Hello, this is more or less what I need to do,

I have a web service that receives four input parameters and returns an object on the output, I need to return the value of that object to WhatsApp
My doubt is in which part of your project I put the code you passed, so when the dialogflow returns the parameters I make the call to the Webservice and use its output on WhatsApp
Thank you!

Tinashe Gondwa • Jan 20 '20

Hi Newton. Thanks for the tutorial. I seem to be having problems with the code, when i try to run the main file, it says 502 - Bad Gateway and the app won't even run.

Newton Munene • Jan 26 '20

Let me look at this. Thanks

Tinashe Gondwa • Jan 28 '20

You're welcome. Thanks, also awaiting your response on this.

Newton Munene • Jan 28 '20

Hi Tinashe, have you tried the sample code? Here's the repository github.com/newtonmunene99/wa-chatbot

Tinashe Gondwa • Jan 29 '20

Hi Newton. Yes, I cloned the code from github and only changed the Credentials but it's not working.

Newton Munene • Jan 29 '20

Did you rename .env.copy to .env.
Also what OS are you running?

Tinashe Gondwa • Jan 29 '20

yes, I renamed it. I'm running Windows 10

Newton Munene • Jan 30 '20

Please tell me if it runs with npm run dev:watch or npm run dev

Newton Munene • Jan 30 '20

The issue might be that rm isn't supported by Windows OS

Tinashe Gondwa • Jan 30 '20

Thanks mate. I was able to debug it and now it's running. Several factors were taking play, one of which is the issue of platform compatibility. Thanks so much for the assistance

chriskahiga • Feb 6 '20

Hi Tinashe, how did you solve your issue, I'm also getting the same 502 Bad Gateway error

Tinashe Gondwa • Feb 6 '20

Hi Chris. First, check if you have all of the required node modules installed. The second check is this: if you're testing your project in a local environment, you must run npm run dev first, then once the server is running, you also start any other service or app that wants to use your project.

Kleiton Moraes • Jul 7 '20 • Edited

Hello @newtonmunene_yg , how are you my friend?
Do you know if it is possible to send an image as a reply on WhatsApp?
Currently I receive the parameters through Dialogflow, process in the webhook and respond with some text back to WhatsApp, I would like to know if it is possible to respond with an image stored locally for example.

I saw it here, but I couldn't make it work
twilio.com/blog/whatsapp-media-sup...

Thank you!

alejomv21 • Sep 10 '21

hello Newton, I`m starting to program, I want to know if it is possible, to connect twilio with another message control service such as front ap, at the moment I have twilio connected with dialogflow, but I also need to connect it with front app, I need the input messages and output that go through twilio also reach the front app, I don't know if it is possible to do so.

Pranjal Vatsa • Jun 7 '21

Hi Newton,

I am getting a PERMISSION_DENIED: IAM permission 'dialogflow.sessions.detectIntent' when trying to send a message from Whatsapp.

I am added the 'Dialogflow API Admin' role from Google IAM & Admin.

Need help on this please.

Robert Son Hedler • Jan 15 '21

Hi Team. Thanks for the post, it is very useful.
I doit exactly as is says and i got the following error:
src/controllers/BotController.ts:10:12 - error TS1146: Declaration expected.

I do not have much experience on. what it could be? this is the only error i received.

Abubakr Elghazawy • Nov 3 '20

our botcontroller.ts should we put our local server like that

@Controller("localhost:3000/api/bot")
export class BotController {
@post ()
private postMessage(request: Request, response: Response) {
Logger.Info("A post request has been received");
return response.status(200).json({
message: "A post request has been received"
});
}

}
or ngrok server
7b2eac7593d3.ngrok.io -> localhost:3000

NicolaSoccal • Apr 20 '20 • Edited

Hi Newton, Can you please detail more how to expose the local server with Ngrok. I'm totally new in this area, thank you.

Newton Munene • Apr 20 '20

Hello Nicola. You need to first install ngrok on your machine. Check out ngrok.com/ for instructions on this. Once you have this installed, run the Node Js project using npm run dev. Take note of the port that it's running on, I believe its 3000 for this particular project. Next you need to expose your local webserver. Read about that here, dashboard.ngrok.com/get-started/tu... . The command you will need to run will be something like ./ngrok http 3000. 3000 here being the port the project is running on. Ngrok will expose your local server and give you a couple of links that are accessible on the internet. Copy the https link and thats what you will paste in the Twilio Whatsapp Sandbox page (twilio.com/console/sms/whatsapp/sa... ). Don't forget to add the bot's route. ie /api/bot

NicolaSoccal • Apr 20 '20

I'm sorry Newton for bothering you, When I run "npm run dev" it looks like I miss the file package.json (See log below)

In your article you talk about a package.json file where to add scripts. Are you referring to the package.json I find in the dialoflow fullfilment section or is it another file?

I think I'm missing something very important here. Sorry...

npm ERR! path /home/nicolasoccal/wa-chatbot/package.json
npm ERR! code ENOENT
npm ERR! errno -2
npm ERR! syscall open
npm ERR! enoent ENOENT: no such file or directory, open '/home/nicolasoccal/wa-chatbot/package.json'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent
npm ERR! A complete log of this run can be found in:
npm ERR! /home/nicolasoccal/.npm/_logs/2020-04-20T18_53_19_411Z-debug.log

NicolaSoccal • Apr 20 '20

Hi Newton. Thank you. Can you detail how to expose the local server with Ngrok?
I developed quite powerful agent in dialogflow but here I'm totally new. Thanks a lot if you can help.

Phil Nash • Jan 8 '20

This looks like a great article. I've bookmarked it to come back to when I've got some time!

Newton Munene • Jan 28 '20

Thank you Phil

Comment deleted

Angie • Feb 13 '20

Thanks to you I could understand the logic and create my own project.

Newton Munene • Feb 14 '20

You're welcome Angie

Rafael Barbosa • Jul 26 '21

Hello Newton, can you explain how to create this alert (notification) from a message received from the client (POST)?

Newton Munene • Jul 31 '21

Hello.
I'm not sure I understand your question.
Could you give me more details please.

Mateo Castaño Gomez • Feb 18 '20

Hi Newton, thanks for your help, I have a question when you receive a message and you return the answer successfully, twilio doesn't mark you as a mistake?

Abubakr Elghazawy • Nov 3 '20 • Edited

I really apraciate your work here

And I Have A Q?
Assume 1- we have user or multi user send messages to whatsapp my number
2- how chatbot will work After !

Newton Munene • Nov 12 '20

Hi 😀, I'm sorry for the delayed response. I'm not sure I understand what you meant to ask, could you please try and rephrase it?

Alexander Jimenez • Oct 31 '23

Great, article !!