Creating Angular Webhook for Dialogflow

Creating NodeJS Webhook for Dialogflow

Creating a chatbot that provides information like movie details, news, flight details, weather information requires some external API’s to collect the data. This is achieved through Webhooks.

Webhook is simple HTTP callback. You can think of it as an event-trigger based system. It will perform some actions if certain thing are changed.

Let’s see how we can create a webhook to get the Movie details. I assume you have created intents and entities for your chatbot. The first step is to create new nodejs project. After creating the project, you should see the following folder structure. .
Now go to the root directory and install the following packages.

npm install express
npm install unirest

Once done, lets create the sample API to test the app.

server.get('/getName',function (req,res){
res.send('Swarup Bam'); });

here  /getName is the URL for the API. Let’s call the API from the postman.

As the app is working without any errors, let’s create the container API which will be called by the Dialog flow for every request. Every request has a parameter associated with it. Depending upon the parameter we can call the different APIs. Let’s call the Tmdb API to get the top rated movies.

Your Content Goes Here
server.post(‘/getMovies’,function (request,response) {
if(request.body.result.parameters[‘top-rated’]) {
var req = unirest(“GET”, “https://api.themoviedb.org/3/movie/top_rated”);
req.query({
“page”: “1”,
“language”: “en-US”,
“api_key”: “”
});
req.send(“{}”);
req.end(function(res) {
if(res.error) {
response.setHeader(‘Content-Type’, ‘application/json’);
response.send(JSON.stringify({
“speech” : “Error. Can you try it again ? “,
“displayText” : “Error. Can you try it again ? “
}));
} else if(res.body.results.length > 0) {
let result = res.body.results;
let output = ”;
for(let i = 0; i<result.length;i++) {
output += result[i].title;
output+=”\n”
}
response.setHeader(‘Content-Type’, ‘application/json’);
response.send(JSON.stringify({
“speech” : output,
“displayText” : output
}));
}
});
}
}

/getMovies is the root level API which Dialog flow will invoke upon receiving a request from the user. I am using Unirest library to handle the HTTP calls. You can use any library which is suitable for you. If-else statements are used to handle the error. If the request is successful and API has returned the response, we can send back the customized response to the user through speech and displayText properties.

Note- Every response should contain the speech and displayText property.

Parameter detection all depends upon how well you have trained your chatbot. For example, to detect the “top-rated” parameter from user input, I have trained my agent with the following user expressions.

We are almost done. Now enable the webhook in fulfillment section in dialogflow console. Also dont forget to enable the webhook call for each intent. To enter the URL for webhook, you need to host the app on the server. I have hosted my app on Heroku. After hosting the app, append”/getMovies” at the end of URL.

Tech Prescient

Become a part of our big family to inspire and get
inspired by professional experts.

Join Tech Prescient Team