Create Dialogflow chat bot with Example by using Node JS

In this blog post, we will create a new Chatbot by using Dialogflow and NodeJS which is able to schedule the appointment and save the customer information in the CSV file.

I was working on the chatbot development so I thought why not create a simple blogpost which would be beneficial for our users too.

So lets start

Step: 1  Go to the Dialogflow cloud Dialogflow cloud and login with your Gmail account.

Step 2:  After login please click on the Setting wheel icon and Create New Agent and insert the Agent Name, Description and Time Zone.

Step 3: It will create a new Agent and you will see the two default intents are created at the Intent menu.

Step 4: Now create a New Intent by click on “Create Intent” button and name it “Appointment” and in the “Action and Parameters” section please create UserName, UserEmail and User Time. You have to set the prompts accordingly.

Your Prompt should be like it

Step 5: After this you have to set the Response (By default you have to set the response but here we will get the response by using the WebHook) and save it.

Step 6: After the response we have to enable the fulfillment because we will connect the our chatbot with the webhook and save it. Now Dialogflow will train our chatbot with our provided Data.

Here we have finished the process of the agent creation, Actions and parameters , Response and Fulfillment. Next we will create the webhook and connect it with the Dialogflow fulfillment. Before going further we have to install all the needed node packages

npm install express --save
npm install body-parser --save
npm install request --save
npm install csv-writer --save
npm install fs --save

So please make sure  you have installed all the needed packages. Now lets get our hand dirty with the node JS

Step1: Create a new folder “Dialogflow-webhook” on your system and then initiate the node.

npm init

Step2:  Now open your IDE and create the webhook. Here we will use the node express JS framework and load all the needed Node packages

express = require( 'express'); //To handle the HTTP requests.
body_parser = require('body-parser');//To handle the Posts data.
request = require('request');// To send HTTP requests to Google Dialogflow.
csv = require('csv-writer');//  To create & save CSV file.
fs = require('fs'); //  To create file streams. 

Step 3 :  Now you need to setup the App

app = express();
port = process.env.PORT || 5000

app.use(body_parser.urlencoded({
extended: false
}));
app.use(body_parser.json());

Step 4 :  After this we will create the WebHook and define the path of the CSV where we are willing to save in our system. Here we are giving path of the CSV to the same folder.

Basically Dialogflow uses the Post request to send the “Intent Parameters” to our web services that’s why we need to enable the webhook.

We create a CSV Writer object and define the path and CSV Columns. Our defined columns are “User name”, “User Email” and “User Time”.

app.post('/webhook/', function (req, res) {
    
    createCsvWriter = csv.createObjectCsvWriter;
    csv_writer = createCsvWriter({
      path: 'users-appointment-info.csv',
      header: [
        {id: 'UserName', title: 'User Name'},
        {id: 'UserEmail', title: 'User Email'},
        {id: 'User-time', title: 'User Time'},
      ],
      append : true
    });
    content = req.body
    appointent_data =[
      {
        UserName: content.queryResult.parameters["UserName"],
        UserEmail: content.queryResult.parameters["UserEmail"],
        user_time: content.queryResult.parameters["User-time"],
      }
    ];

We can get the post values by using the req.body and then get parameters values using req.body.queryResult.parameters key.

Step 5: Now we will write the collected records on the CSV and displayed the success message on the console.

csv_writer.writeRecords(appointent_data)
              .then(()=> console.log('The CSV file was written successfully'));
response = {
"fulfillmentText": "We have received your query, Thank You !! "
}

 

Now we will listen the port

// Listen the Requests
app.listen(port, function () {
    console.log('webhook is currently running on port', port);
})

Step 6: Now execute the program by using this command

node app.js

Our server is running on local system on 5000 port. So we need to make it public URL because our local URL is not able to connect with our Dialogflow.

We will use here NGROK, You can read the full documentation here NgROK

Now you only need to copy the highlighted yellow area URL which is we have created a Public URL from our local system and paste this URL to your Dialogflow fullfillment. Your URL will be different from ours,

 

Step7:  Please go to your created Agent in Dialogflow and paste the public URL there in the webhook and save it.

 

Now go to the Integrations Menu and use the web demo to test the chatbot.

 

After this you will see the user inserted user data are saved on the CSV file, you can check on the console