How to Build a Django Chatbot using Dialogflow: A Step-by-Step Guide
Python is one of today’s most popular programming languages, and Django is a free, open-source web development platform for Python and is a very versatile tool for web development that can be used to build just about any kind of website or app that is needed.
In this article, I will try to make it very easy for you to understand how to integrate Dialogflow chatbot into the Django website.
If you don’t have Dialogflow chatbot then here is the step by step tutorial to build your own chatbot. However, Dialogflow has its own limitations. It doesn’t provide the UI we need for chat conversations.
Since we are not in the 1980s now, we need a front end, not a dull dark command line UI for non-tech guys, to offer a chatbot that resonates well and is user-friendly to the user.
So we are integrating Dialogflow with Kommunicate where it provides pre-built UI for the chat widget and admin dashboard.
If you don’t have kommunicate a/c, please signup here for free a/c to proceed further.
The article is divided into two parts for easy comprehension.
- Integrating Dialogflow bot with Kommunicate
- Integrate Kommunicate with Django framework
Part 1: Integrate Dialogflow with Kommunicate
To integrate your Dialogflow bot in Kommunicate, log in to your Kommunicate dashboard and navigate to the bot integrations section. If you do not have an account, you can create one here. Locate the Dialogflow section and click on Integrate Bot.
Now, navigate to your Dialogflow console and download the service account key file. Here are the steps to locate the file:
- Open Dialogflow agent settings by clicking on the settings icon
- Click on the google cloud link which is mentioned in the google project bar
- In the google, cloud page navigate to the Credentials section by clicking on API’s & services
- Under the Credentials, section find the service account and click on edit for Dialogflow integrations
- On the bottom of the screen click on the ADD key button and create a key option, An JSON key will be downloaded
- Now upload the Key file
By giving your bot a name, complete the setup and enable/disable the bot to human handoff in the final step, and then you can check and test your newly developed bot in two places:
Dashboard →Bot Integration → Manage Bots: You can check all your integrated bots here
Dashboard → Bot Integration: Your Dialogflow icon should be green with the number of bots you have successfully integrated.
Part 2: Integrate Kommunicate with Django framework
Now that we have our Dialogflow chatbot and its user interface, we can now integrate it with the Django web framework. After creating a Django project there are two possible ways to add the kommunicate script code to the HTML template that you have created
1.Copy the javascript code from kommunicate dashboard and paste it just above the closing body tag (</body>) on the HTML page that you have created.
<h1>Hello, World!</h1> <body> <script type="text/javascript"> (function(d, m){ var kommunicateSettings = {"appId":"kommunicate-support","popupWidget":true,"automaticChatOpenOnNavigation":true}; var s = document.createElement("script"); s.type = "text/javascript"; s.async = true; s.src = "https://widget.kommunicate.io/v2/kommunicate.app"; var h = document.getElementsByTagName("head")[0]; h.appendChild(s); window.kommunicate = m; m._globals = kommunicateSettings; })(document, window.kommunicate || {}); /* NOTE: Use webserver to view HTML files as the real-time update will not work if you directly open the HTML file in the browser. */ </script> </body>2.Defining the STATIC_URL in settings.py file as given below and load the file directly in the template
STATIC_URL = '/static/'Load static files in the templates by using the below expression
1 {% load static %}In your project, create a “static” directory first and store the files within it. Create the js file in the static directory and add the Kommunicate script to the js file you generated.
HTML template should look something like this
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Index</title> {% load static %} <script src="{% static '/JS/script.js' %}" type="text/javascript"></script> </head> <body> <h1>Hello, World!</h1> </body> </html>Script.js file should look something like this (Note: replace APP-ID with your own APP id mentioned in the install section)
(function(d, m){ var kommunicateSettings = {"appId":"APP-ID","popupWidget":true,"automaticChatOpenOnNavigation":true}; var s = document.createElement("script"); s.type = "text/javascript"; s.async = true; s.src = "https://widget.kommunicate.io/v2/kommunicate.app"; var h = document.getElementsByTagName("head")[0]; h.appendChild(s); window.kommunicate = m; m._globals = kommunicateSettings; })(document, window.kommunicate || {});Use the following command to start your newly created website with the installed Dialogflow bot.
1 python manage.py runserverVoila! How simple was that? In these few simple steps, you could integrate the Dialogflow bot into Django websites. This is how the chat widget looks on a website:
Originally published at https://www.kommunicate.io on December 29, 2020.
