Integrating Dialogflow v2 into Qiscus Multichannel

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.

qiscus multichannel dialogflow

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.

dialogflow

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
SENDER_EMAIL=xxxxx_admin@qismo.com
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:

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:

dialogflow

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.

0 Shares:
Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

You May Also Like