Skip to content
Permalink
Browse files

Annotated images

  • Loading branch information...
mishushakov committed Aug 25, 2019
1 parent 87c7fd6 commit c41021c64b63cd9aea5a588a2c09361611f3d55c
Showing with 38 additions and 38 deletions.
  1. +1 −1 README.md
  2. +19 −19 hosted/configuration.md
  3. +1 −1 hosted/faq.md
  4. +6 −6 hosted/installation.md
  5. +8 −8 hosted/integrations.md
  6. +3 −3 hosted/usage.md
@@ -1,6 +1,6 @@
# Dialogflow Gateway

![](https://svgur.com/i/EHv.svg)
![Dialogflow Gateway schema](https://svgur.com/i/EHv.svg)

Dialogflow Gateway is a backend enabling third-party integrations to securely access the Dialogflow V2 API. Any server, that implements the API (see below) can be refered as "Dialogflow Gateway"

@@ -2,21 +2,21 @@

Before making any further steps, described below, please make sure, that you have successfully connected your Agent to the Gateway and it is displayed in the console, like in my case:

![](images/1*dNrnAw5_fujrbkv9z3PkDQ.png)
![Dialogflow Gateway Console](images/1*dNrnAw5_fujrbkv9z3PkDQ.png)

## Get into the configuration screen

Please click on the “Manage” button on the right side of the Agent that you want to configure:

![](images/1*6IQ7e85pPwzec-2xpeJ4pQ.png)
![Dialogflow Gateway Console "Manage"](images/1*6IQ7e85pPwzec-2xpeJ4pQ.png)

The “Manage” window should now pop up. Here, select the “Settings” tab to continue:

![](images/1*dR5bVY4fUuWwgxEdeeqm_A.png)
![Dialogflow Gateway Settings](images/1*dR5bVY4fUuWwgxEdeeqm_A.png)

## Configuring Webhook

![](images/1*1mXV-mVBdlEfFbFgxftaNg.png)
![Dialogflow Gateway Settings (Webhook)](images/1*1mXV-mVBdlEfFbFgxftaNg.png)

The Webhook field allows you to paste a URL to a Webhook, which will receive a POST request from Dialogflow Gateway, when it’s triggered.

@@ -26,15 +26,15 @@ It’s great for analytics or building custom functionality on top of Dialogflow

Here i have coded the Example Webhook using Webtask.io:

![](images/1*1P5DjCpGfLWgP6lQpoV7OA.png)
![Dialogflow Gateway example webhook](images/1*1P5DjCpGfLWgP6lQpoV7OA.png)

It doesn’t do much more, than logging the incoming request body. Notice, that this is not the request body which is received by the Gateway, but instead it’s a matched Dialogflow response. In this case you are ensured, that your webhook only receives legit requests and does not need to handle the errors and some edge-cases.

For security reasons, i also recommend authenticating your requests via a secret request parameter or using CORS.

On the Screenshoot, i have highlighted the URL, which points to the Webhook. Paste that URL in the Console and you will see magic happening:

![](images/1*Kpqq20MfRzHgPRkMbkmADg.png)
![Dialogflow Gateway example webhook url](images/1*Kpqq20MfRzHgPRkMbkmADg.png)

For your convenience, i have also uploaded the example Code as Gist on Github:

@@ -58,15 +58,15 @@ Another thing you need to know about the Webhook functionality, is that it isn

## Connecting Virtual Agent Analytics

![](images/1*XZEmrPIvovzEsj3ENKx9Fg.png)
![Dialogflow Gateway Settings (Virtual Agent Analytics)](images/1*XZEmrPIvovzEsj3ENKx9Fg.png)

In this part of the Article, we are going to connect Google’s Area 120 [Chatbase](http://chatbase.com) Virtual Agent Analytics Service to our Dialogflow Gateway in order to get detailed Analytics of our Agent’s usage and reports from the Dialogflow Gateway Platform. Notice that, Dialogflow Gateway has no built-in service for such Analytics and does not store your message history.

![](images/1*NQdQk2PPVFOrxHa56Q_qqw.png)
![Chatbase Dashboard](images/1*NQdQk2PPVFOrxHa56Q_qqw.png)

![](images/1*62QR5SouuxZH_n9U9epMkg.png)
![Chatbase Dashboard messages](images/1*62QR5SouuxZH_n9U9epMkg.png)

![](images/1*mPnKhb4JonFQprSGAMQEXA.png)
![Chatbase Dashboard transcripts](images/1*mPnKhb4JonFQprSGAMQEXA.png)

On top of that, Chatbase gives you even more features to play with:

@@ -94,47 +94,47 @@ Excited? Let’s connect our Agent to get it!

1. Sign into [Chatbase](https://chatbase.com/overview) with your Google Account:

![](images/1*dIvJurZEmgizndXTGdlFBw.png)
![Chatbase Bot List](images/1*dIvJurZEmgizndXTGdlFBw.png)

2. Press on “Add a bot” button on the Dashboard and enter the requested info:

![](images/1*bitGmbe8nlnrr4IX0Ipcew.png)
![Chatbase Add bot](images/1*bitGmbe8nlnrr4IX0Ipcew.png)

3. Copy the API Key for your Bot:

![](images/1*XiohDWc7br_BH_nkjHsLVw.png)
![Chatbase bot API key](images/1*XiohDWc7br_BH_nkjHsLVw.png)

4. Paste the API Key into your Dialogflow Gateway Integration Settings:

![](images/1*cP1g1f87V9x7ycNsTf5v1w.png)
![Dialogflow Gateway Settings (Chatbase API Key)](images/1*cP1g1f87V9x7ycNsTf5v1w.png)

5. View your Analytics Data

![](images/1*aKTMHA4wygSZb67T2G3S6w.png)
![Chatbase Dialogflow Gateway Analytics](images/1*aKTMHA4wygSZb67T2G3S6w.png)

Notice: Chatbase it can take up to 24 hours to index your messages, so be patient. For your convenience Dialogflow Gateway messages are tagged as “Dialogflow gateway” Platform in Chatbase.

Success! Now we have connected our own Webhook and configured Virtual Agent Analytics Service 🤘

## Sources

![](images/1*mvXf5JQnhnEtcifBEnG3Qw.png)
![Dialogflow Gateway Settings (Sources)](images/1*mvXf5JQnhnEtcifBEnG3Qw.png)

It’s a little bit difficult to explain this feature for newbies, but no worry, i will do my best, so you can understand, what it does and how you can benefit from it as well!

To understand what problem it solves, have a look at this Example Intent:

![](images/1*gzRWa6Edve7C17UzmYQiSA.png)
![Dialogflow Intent Responses Example](images/1*gzRWa6Edve7C17UzmYQiSA.png)

As you see in the “Responses” field, there can be different Responses for different Platforms. In the Simulator window, you can manually select, which Platform you want to have previewed:

![](images/1*-AsFIfJ-1TVUZVcPmYrGQg.png)
![Dialogflow Simulator Responses](images/1*-AsFIfJ-1TVUZVcPmYrGQg.png)

Of course, in a Real-World application, there is no such selector, so there is also no way to know, which responses Dialogflow Gateway should respect. To solve this problem (and many others) the “Sources” feature was introduced, so you can manually select which Platforms you want to Support in your Dialogflow Gateway Integration.

## Actions

![](images/1*ZBL4EhjjtVRt__XUWG4kXw.png)
![Dialogflow Gateway Settings (Actions)](images/1*ZBL4EhjjtVRt__XUWG4kXw.png)

The last, but not least thing is the “Actions” section. You can press on the “Unlink” button, to unlink your Agent from Dialogflow Gateway.

@@ -44,6 +44,6 @@ For any further questions, [contact us](https://ushakov.co/#contact)

**Why is my integration displayed as "Blocked"?**

![](./images/blocked.png)
![Dialogflow Gateway Blocked](./images/blocked.png)

Likely, because it violated our ToS and system decided to hold it. Get in touch, to learn why it happened to your project and how you can resolve it
@@ -12,7 +12,7 @@ Then, press on the “Create Service Account” button

Enter the name of your Service Account and press on “Create”

![](images/0*8iYHLAGC8Qc5APhY.png)
![Dialogflow Gateway Service Account creation](images/0*8iYHLAGC8Qc5APhY.png)

## Step 2: Grant permissions to the Service Account

@@ -22,7 +22,7 @@ We will need thoose permissions: “Dialogflow API Client” and “Dialogflow A

It’s important, that you set these permissions, otherwise your integration may not work as expected

![](images/0*ZtCBwK0pme7dkEUa.png)
![Dialogflow Gateway Service Account permissions](images/0*ZtCBwK0pme7dkEUa.png)

Set the Roles and press on “Continue”

@@ -34,7 +34,7 @@ Press on “Create Key Button” and in the “Create Key” window set the “K

The keys should been downloaded to your default Downloads folder. Make sure to check that as well.

![](images/0*Bw3c0_7Az-MWc4gD.png)
![Dialogflow Gateway Service Account keys](images/0*Bw3c0_7Az-MWc4gD.png)

Now, when you have the keys with the correct permissions, you are ready to setup Dialogflow Gateway

@@ -46,15 +46,15 @@ Sign in with your Google Account

And you will see the console

![](images/0*3WG-EcS8ae8H6mYR.png)
![Dialogflow Gateway Console](images/0*3WG-EcS8ae8H6mYR.png)

In the “Agents” section press on the “Upload” button and select your keys

![](images/0*5QltXiQ6vbGzhFM7.jpeg)
![Dialogflow Gateway Service Account upload](images/0*5QltXiQ6vbGzhFM7.jpeg)

Your agent should now appear on the “Agents” list. To find your connection information and settings, press on the “Manage” button

![](images/0*XTPYBZcSPWM3uhfx.png)
![Dialogflow Gateway Agents](images/0*XTPYBZcSPWM3uhfx.png)

Congratulations! You have successfully connected your Agent to the Gateway.

@@ -3,27 +3,27 @@
## First Party

- [Dialogflow Gateway API](api.md#api)
![](./images/gatewayurl.png)
![Dialogflow Gateway API (Integration)](./images/gatewayurl.png)

- [Dialogflow Gateway Realtime API](api.md#realtime-api)
![](./images/gatewayurlrt.png)
![Dialogflow Gateway Realtime API (Integration)](./images/gatewayurlrt.png)

- [Dialogflow for Web v2](https://github.com/mishushakov/dialogflow-web-v2)
![](./images/uiurl.png)
![Dialogflow Gateway Dialogflow for Web (Integration)](./images/uiurl.png)

- [DF-BTN](https://github.com/mishushakov/df-btn)
![](./images/embeddeduiurl.png)
- [df-btn](https://github.com/mishushakov/df-btn)
![Dialogflow Gateway Dialogflow df-btn (Integration)](./images/embeddeduiurl.png)

- [Dialogflow Inbox](https://github.com/mishushakov/dialogflow-inbox)
![](./images/inboxemail.png)
![Dialogflow Gateway Inbox (Integration)](./images/inboxemail.png)

## Third Party

- [Webhook](./configuration.md#configuring-webhook)
![](./images/webhookurl.png)
![Dialogflow Gateway Webhook (Integration)](./images/webhookurl.png)

- [Chatbase](./configuration.md#connecting-virtual-agent-analytics)
![](./images/chatbaseapikey.png)
![Dialogflow Gateway Chatbase (Integration)](./images/chatbaseapikey.png)

## Other

@@ -2,7 +2,7 @@

In this guide we will code our own CLI-Integration for Dialogflow using [Dialogflow Gateway API](api.md.md#api) and [Dialogflow Gateway Realtime API](api.md.md#realtime-api).

![](images/1*Sax2IOrqX6_09FPS-kqLdA.gif)
![Dialogflow Gateway Usage Example (Demo)](images/1*Sax2IOrqX6_09FPS-kqLdA.gif)

It’s a badass idea, because sometimes you can’t have access to your Google Assistant, Web Browser or a Messenger, but still want to process your Messages through Dialogflow 💪

@@ -154,11 +154,11 @@ ask() // <- Start the messages loop

Execute node index.js and you should see this:

![](images/1*g7d0ZMyE_ODPiwGqalT_wQ.png)
![Dialogflow Gateway Usage Example (Console input)](images/1*g7d0ZMyE_ODPiwGqalT_wQ.png)

Type in your message and press Enter:

![](images/1*0zPrr0SOtY9ulOXmWHhXig.png)
![Dialogflow Gateway Usage Example (Console output)](images/1*0zPrr0SOtY9ulOXmWHhXig.png)

Your Agent will reply with Dialogflow Response, Webhook or Actions on Google Simple Response! That works 🤘

0 comments on commit c41021c

Please sign in to comment.
You can’t perform that action at this time.