Google’s Dialogflow Chatbot Integration with Node.js

In this blog, we will be building a chatbot that collects information from the user input, and sends that information to the Node.js server where some API call is made and the response from that API is displayed as the chatbot response. Here’s how it would look like at the end:

Prerequisites:

• Basic knowledge on how to create a Nods.js server using Express framework.
• A Google’s dialogflow account where we can create the Project and Intents. One can go through this tutorial to learn about the same.

Google’s Dialogflow: A Brief Introduction:

Google’s Dialogflow is an NLP platform that makes it easy to design chatbots. Users can create something called an ‘Agent’ within the chatbot. Within an agent, users can create several ‘Intents’ in order to train the agent. A chatbot is like a call-center with many agents, where each agent is like a customer care executive who is trained to resolve a particular set of customer queries.

Connecting Dialogflow to Node.js:

• An Intent can get the response either from the Training phrases we add manualy while creating the intent, Or from the webhook response by the server. Here we want the response from our Node.js server so we will go for the second option.

In order to get the response from the webhook, while creating the Intent we have to activate the “Enable webhook call for this intent” toggle under the Fulfillment dropdown:

• We can write the server code in the dialogflow console itself, for that we can navigate to the ‘Fulfillment’ section below the ‘Intents’ section. There we can choose the “Inline Editor” for writing the backend code.

But we will be writing our Node.js code separately and then connect it to the dialogflow intent. For that we will enable the ‘Webhook’ option inside the ‘Fulfillment’ section. After that we will paste the public URL of our Node.js code under the ‘Webhook’.

In order to get the public (https) URL we can deploy our Node.js code, Or we can use Ngrok which helps us to open our local port to a public port without deploying the code.

Note that this will work as long as the server is running locally. If the server is restarted then we have to do this again.

Sending Response from Node.js Server:

Now in the Node.js server first we will define the agent, for that we need to install a library called dialogflow-fulfillment. Once an agent is defined, we will define a function and pass the agent as a parameter to it. So when we pass an agent to a function, we can add something to that agent. After that, we have to map the function to the Intent for which we have enabled the webhook response in step-1:

We can also send custom payloads instead of just text responses. In order to add the payload to the agent, we have defined the payload first:

After adding the payload to the agent, we can map the customPayloadDemo function to the agent for which we want a custom payload as a response.

We will see how the custom payload is used to get images or buttons as responses (from the server) for the chatbot input request.

Getting Rich Response from the chatbot:

Instead of getting just the text response from the chatbot we can get rich responses like images, buttons, list response, suggestion chips, etc. For that, while creating the intent we have to choose ‘Custom Payload’ in the Add Response option. Here’s how we do it:

Adding follow-up intents:

In the ‘suggestion chip’ response above, note that when we click on the first chip, it acts as if we typed ‘Chip 1’ in the input request to the chatbot. Since there was no other intent defined with the training phrase ‘Chip 1’, the chatbot was unable to recognize the input and gave us the response from the Default Fallback Intent. Hence we will add the follow-up intent to our previous intent in order to get the desired response from the chatbot.

Setting up the Welcome Intent:

In order to make the chatbot start the conversation for the desired intent, we have to set that intent as the welcome intent. For that we will be adding the ‘Welcome’ event under the ‘Events’ section inside of our Intent. But before that, we have to remove the Welcome event from the Default Welcome Intent because there can be only one intent with Welcome event.

Note that we don’t have to type “show rich response” as we did earlier to get the chips as a response, that’s because we set the intent ‘showRichresponse’ as the welcome intent.

Setting up the parameters:

Parameters are like variables that we can set while adding the training phrases. Now depending on what user has entered in the training phrase, chatbot response would vary. We can refer to a parameter we defined in the training phrase by using $ symbol.

Back to the Node code:

Now we have all the pieces of the puzzle, the only thing left is to get the response from the api call at the backend and display it in the chatbot response.

We will be making that api call inside the function to which we are passing our agent as an argument (as discussed before). For making the api call we will be using the axios library. 

Referring to the chatbot we saw at the start, it is asking the user to rhyme or not, if the user clicks “Yes i want to rhyme” then it is asking for the word, we will set that word as a parameter. 

Now in the code above, ‘ /rhyming’ is an API endpoint which gives back the rhyming words for the word given to it. First we will take the word from the chatbot input, then in the backend we access that word from the agent.parameters object and pass it as a query parameter to our api.

Once we get the response from the api call, we will send it as a custom payload (as discussed earlier) to the chatbot. Along with that, we will also send the custom payload for the suggestion chips asking the user whether they want to rhyme again.

Looping through the intents:

If the user clicks on “Yes i want to rhyme again” that means we have to loop back to the intent where we the user was replying “Yes i want to rhyme” for the first time. For that, we have to use the input and output Context.

Whenever we add a follow-up intent to some intent, it automatically adds some input and output contexts in both the intents.

So, in order to loop through an intent, we have to set the output Context of child intent the same as the output Context of the parent intent. Otherwise if the user clicks on “No, i don’t want to rhyme again”, we will break the loop and turn ON the toggle “Set this intent as end of conversation” under the Responses. 

Final touch-up:

In order to embed the chatbot agent we created to our own website, navigate to Integrations > Dialogflow Messenger, copy

script and paste it to the index.html file of the website.

We can also do some CSS customizations in order to change the chat text color, background color and more.

Closure:

Phew! We finally integrated our chatbot agent with Node.js, and were able to display the API response to the user. With this integration we can call external APIs, make changes to the databases, and many other tasks that we cannot do with the dialogflow agent alone.