Dialogflow v2 embraces the concept of the service account and no longer uses the client access token approach. Hence, there will be a gap in integrating Dialogflow bot into our services from the v1 point of view. We are going to use the Qiscus Multichannel Platform widget as user client instead of the Qiscus SDK widget in this article.
Setting up a Service Account
As mentioned above, in v2, Dialogflow is using the service account. Thus, in the first step, we are going to set up Dialogflow agent’s service account; more precisely, it’s key.
So let’s go to the settings page, and under the general tab, click on the service account name.
This will open up your Google Cloud Platform project’s service account page. In its table, you will see ‘Dialogflow integrations’ service account already created.
Click on the three vertical dots on the right and click the ‘Create Key’ option. Keep it as a JSON file type, and save it locally with name client-secret.json. We will use it later.
Prepare the Chatbot Webhook
As we already have the service account key, we will then set up our bot webhook to connect the Dialogflow agent with Qiscus Multichannel. In this article, we are going to use the codebase at https://bitbucket.org/qiscus/bot-dialogflow-php/src/master/. We will modify several parts of the codes.
Firstly, if you open up the codes, you will notice in the .env.example file that it is using connect Qiscus Multichannel. Rename the .env.example to .env
Don’t forget to set your env. You can get value BASE_URL_BOT and SENDER_EMAIL from menu Bot Integration.
BASE_URL_BOT=https://multichannel.qiscus.com/xxxxxx/bot
[email protected]
DIALOGFLOW_PROJECT_ID=prject-xxxx
Next, let’s put the client-secret.json file we downloaded earlier into the main directory
├── README.md
├── client-secret.json
├── composer.json
├── composer.lock
├── index.php
├── src
│ └── Dialogflow.php
├── templates
│ └── index.phtml
Then run the codes:
php -S localhost:5000
And to make it globally accessable, we are going to utilise ngrok:
$ ngrok http 5000
ngrok by @inconshreveable (Ctrl+C to quit)
Session Status online
Session Expires 7 hours, 59 minutes
Version 2.3.29
Region United States (us)
Web Interface http://127.0.0.1:4040
Forwarding http://a1fde2ba.ngrok.io -> http://localhost:5000
Forwarding https://a1fde2ba.ngrok.io -> http://localhost:5000
Connections ttl opn rt1 rt5 p50 p90
2 0 0.02 0.01 0.05 0.10
Please note, this method will only work in a local environment. To set it up when you deploy it in your server, such as Heroku or others, please refer to the articles below:
- https://simpleit.rocks/apis/google-cloud/using-google-cloud-with-heroku/
- https://medium.com/@tzahi/how-to-setup-dialogflow-v2-authentication-programmatically-with-node-js-b37fa4815d89
Setting up Qiscus Multichannel
Qiscus Multichannel is an additional product from Qiscus SDK. it is running on top of Qiscus SDK itself. It provides several channels as means to obtain conversations from users and respond to them from one dashboard. One of the channels that we can use is the Qiscus Widget. If you have seen this widget in the previous article before, we are going to use it again here.
In this section, we are going to setup Qiscus Multichannel to connect to the Dialogflow agent. We are going to also use the widget to interact with our agent. If you haven’t had any Qiscus Multichannel account yet, please go to https://multichannel.qiscus.com and register to get one. We give every user a two-week free trial to get familiar with our product.
Now let’s go to the Integration page and select the Bot Integration tab:
In the page above, we have Agent ID, App ID, Qiscus Secret Key, and Qiscus Webhook Bot URL. We save them in the env variables as we are going to use these credentials to post to Qiscus Multichannel as Bot’s responses as written in the view.py file above.
Next, let’s grab the generated URL from ngrok and put it on the Bot Webhook URL. In our case, the URL is https://a1fde2ba.ngrok.io/. Since we use /webhook as our webhook endpoint, the bot webhook URL is https://a1fde2ba.ngrok.io/webhook. Click “Connect” to connect it.
Qiscus Widget
We have set up our bot webhook for Dialogflow agent and we have also connected it to Qiscus Multichannel. The last thing to do is to use Qiscus Widget to get messages from users. Still in the Integration page, click Qiscus Widget tab and click the <> button to get a snippet code of the widget to be used in the client side. Copy it:
Now, let’s go back to the codes, and open up index.html in the templates directory and paste the code there:
<html>
<head>
<title>Qiscus Multichannel Widget</title>
</head>
<body>
<script>
document.addEventListener('DOMContentLoaded', function() {
var s,t; s = document.createElement('script'); s.type = 'text/javascript';
s.src = 'https://s3-ap-southeast-1.amazonaws.com/qiscus-sdk/public/qismo/qismo-v2.js'; s.async = true;
s.onload = s.onreadystatechange = function() { new Qismo({{ app_id | tojson | safe }}); }
t = document.getElementsByTagName('script')[0]; t.parentNode.insertBefore(s, t);
});
</script>
</body>
</html>
As soon as you have finished it, open up the ngrok generated URL in the browser, such as in the image below, and start a chat:
In summary, to be able to use Dialogflow in one of Qiscus’ products, we need to have an intermediate webhook service to connect both services together. This intermediate service will act as a webhook which connects messages from Qiscus and pass it to the Dialogflow agent and obtain the response back to pass it back to Qiscus. In our example, we used Python to build this webhook service, but it’s not limited to this. As Dialogflow is using a service account for authentication, we can utilise any libraries that will handle it. You can read more here.
This code repository is located here.
