Dialogflow Rich Responses Click event

In this story, I will tell you how I have used dialogflow to make rich responses clickable in Flask environment and used Dialogflow messenger for showing output.

Fig. Dialogflow logo

Prerequisites -

Before going through this article, I assume you know the basics of dialogflow which you can go through the official docs at https://cloud.google.com/dialogflow/docs.

I personally learned the basics from this awesome youtube playlist
https://www.youtube.com/watch?v=FH4BMLpTZuw&list=PLZoTAELRMXVNR8WeqIFJZ_246uNQo4Ude by Krish Naik. You can check it out too, it’s really small.

Now immediate precursor to this article is this another medium article which I have referenced https://medium.com/analytics-vidhya/dialogflow-chatbot-with-webhooks-using-python-c1e7fc46faf6 by Sruthi Vijay.

If you have any doubts, please use these resources as a reference to clear them. Now we are ready to see the main article.

Flag dataset
You can get the flag dataset which I’m going to be using from this link :
https://data.world/pbi/country-flag-database-from-wikipedia you need to sign up to get the data from here.

Next step — Create a Dialogflow Agent

You need to create a dialogflow agent by visiting the dialogflow console using https://dialogflow.cloud.google.com. If you are coming here for the first time, it will ask you to sign in using your google account.

Once you are inside the console, click on Create Agent Button to create an agent which basically represents your application, also give it a name and click save.

Fig. 1. Create new agent

Fig. 2. Assign a name to your agent

Creating intents

Now you need to create these intents which will represent the user story that is user will receive a message like “select a country to view flag” followed by a list of countries in Alphabetical order five at a time with an additional button “View more after the last country”. So user can either choose to expand the list of countries or click on one to see the flag of that country.

Fig. Intents we need to create

Enable the fulfillment for the default welcome intent and add two more intents flag intent and view more flags.

Fig. Enable fulfillment for welcome intent

The flag intent is for displaying the flag to the user so add the event to trigger on click on a list item and action for detecting the intent in the backend.

Fig.3. Flag Intent

Also add the view more flags to show 5 more countries to user when the user clicks on the ‘View more’ list item.

Fig. 4. View more flags

Also enable fulfillment for both of them similar to the welcome intent, because remember, we haven’t given a default response for any of them, because the responses are coming from the webhooks in the backend.

Building a backend server with Flask framework (Python)

Create a main.py file and copy and paste the code below in it. Use any editor you want since there are only 3 files in our project.

main python file

Creating a Module for Rich responses

I have also created a library of rich responses which contains custom functions which we will use to create out interactive list of countries and also create an image response in the form of flag image.

The module file for rich responses

Creating a Webhook for our Dialogflow agent

So a webhook simply means we will process requests from dialogflow bot to fetch flags and countries on user’s demand. Since it’s coming from our backend project in Flask we need to run a server on the localhost but there is a problem.

Our local server cannot receive request from clients from outside our computer and since the dialogflow is sending the request from a faraway google server, we need a tunneling service to accept request from outside world. That is exactly what ngrok is used for, it can accept request over internet effectively hosting our local server online.

It can be installed using the command :

snapd install ngrok

In order to test our chatbot, we need to start the local server in one terminal by running main.py using

(Code python main.py)

and strictly we need to start the ngrok service in another terminal using the command

ngrok http <port no>
i.e.
ngrok http 8000

Now copy the url generated by ngrok which is of the form of https://xxxxxx.ngrok.io and paste it in the webhook URL part and click save.

Fig. 4. Webhook Url

Running our chatbot by integrating with Dialogflow Messenger

Now you need to select integrations in the navigation bar and select the option Dialogflow Messenger and there you go, you have learnt how to use click event on rich responses in Dialogflow. Please go ahead and test your chatbot and if you have any doubts I am highly active, I will be available to answer your comments. I am attaching the result of my test run below for your reference. Cheers!

Fig. Dialogflow messenger integration for rich responses

Conclusion

Special thanks to Sruthi Vijay and Krish Naik and my mentor Mr. Amit Sharma for helping me get started in Dialogflow. And yes, the reference of the example is taken from Sruthi’s article. Please forgive me for plagiarism of any form and please let me know if you find something wrong with my article. Thank you.

Fig. Chatbot demo