d

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.

15 St Margarets, NY 10033
(+381) 11 123 4567
ouroffice@aware.com

 

KMF

How to Install Dialogflow Chatbot into Django website | by Parth Shrivastava | Apr, 2021

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 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 with Kommunicate
  • Integrate Kommunicate with Django framework

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:

  1. Open Dialogflow agent settings by clicking on the settings icon
  2. Click on the Google cloud link which is mentioned in the google project bar
  3. In the Google Cloud page navigate to the Credentials section by clicking on API’s & services
  4. Under the Credentials section find the service account and click on edit for Dialogflow integrations
  5. On the bottom of the screen click on the ADD key button and create key option, An JSON key will be downloaded
  6. 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.

Signup Now

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.

1. Chatbot Trends Report 2021

2. 4 DO’s and 3 DON’Ts for Training a Chatbot NLP Model

3. Concierge Bot: Handle Multiple Chatbots from One Chat Screen

4. An expert system: Conversational AI Vs Chatbots

<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 runserver

This is how the chat widget looks on a website:

Voila! How simple was that?

In these few simple steps, you could integrate the Dialogflow bot into Django websites.

Credit: Source link

Previous Next
Close
Test Caption
Test Description goes like this