NodeJS Webhook for Dialogflow Fulfillment

Photo by Nicolas Picard on Unsplash

When you are building an agent on Dialogflow, it is important to setup webhook fulfillment especially when your agent grows and has a number of intents. It becomes difficult to manage those intent and intent handlers, especially when you are dealing with any 3rd party API or building a multi-channel agent within the default provided Inline Editor(Powered by Cloud Functions for Firebase). So, it’s a good idea to create and set up a webhook server from your local codebase.

So, let's create NodeJS webhook fulfillment

Prerequisite: Beginner level knowledge of JavaScript, NodeJS, ExpressJS, Dialogflow

Steps:

  1. Create an agent, it will have Default Fallback Intent, Default Welcome Intent and enable webhook call for Default Welcome Intent
Default Welcome Intent

Now enable the webhook call for this intent. You can find the option in the fulfillment section at the bottom.

Enable webhook call

Similarly, enable webhook call for Default Fallback Intent. This option lets your agent call the webhook API with a post request. You can enable webhook calls for all those intent which required some backend processing, database query or any this party API integration.

2. Now let's create the webhook server.

create app.js file, add one API route with ‘/dialogflow’. All the agent webhook requests will be handled by this route.

When the agent will grow, it will have a number of intent-based on different functionality. It is recommended to create a different intent handler file, based on the feature.

Now, we are ready to run the server. let's configure some command and checkout the package.json file.

Let look at the configured script in package JSON.

“dev”: “nodemon — inspect src/app.js”,
I am using nodemon, that automatically run the file whenever it’s content changes.

"tunnel”: “ngrok http 8080”
This is a very important part. Ngrok will create a public URL for our webhook and listen to 8080 port.

Run both the npm script, one is to start the server in development mode another one is to get the public URL for webhook.

Server and tunnel up

You will get the URL like https://028b9d62.ngrok.io. For Dialogflow fulfillment, you will need https secured server localhost will not work.

3. Now configure the URL in Dialogflow fulfillment.

Webhook configuration in Dialogflow

That's it. Now your webhook is ready to respond to the Dialogflow request.

Let me know with a comment if you tried it or anything, really. Bye!
Happy Coding!

--

--

--

UI | Mobile-First | Accessibility | Angular | NodeJS | Data Visualization | JavaScript | MS Bot Framework | Dialogflow

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

[EN] TryHackMe TimtalCtf WriteUp

How to Get Started With React and TypeScript

//platform.twitter.com/widgets.js from Twitter https://twitter.com/SkilledSurvivor

How to deploy Node.js and MongoDB easily

React vs Angular

Building a Parallax Header in React

Map, Filter and Reduce Functions in Python

My first React puzzle journey

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Abhinav Kumar

Abhinav Kumar

UI | Mobile-First | Accessibility | Angular | NodeJS | Data Visualization | JavaScript | MS Bot Framework | Dialogflow

More from Medium

Basic commands for mongoDB 2022

Building a Dynamic Github profile with Github Actions

Ingesting Reddit memes into Elasticsearch using node.js: Locally and on Google Cloud

Taager’s Foray in Messaging Part 2; Installing the Pulsar Node.js client on macOS