Dialogflow Google Chat integration

Stay organized with collections Save and categorize content based on your preferences.

The Dialogflow Google Chat integration lets you create Chat apps you can include in one-on-one conversations as well as chat spaces. See the Google Chat developer docs for more information.

Limitations

Only the default agent language is supported by this integration.

Set up

To set up and enable the Google Chat integration, follow these steps:

  1. Click on Integrations in the left menu.
  2. Click on Hangouts Chat.
  3. Select an access option.
  4. [Optional] Select an agent environment.
  5. Click Start.

Configure your Chat app

Once your Google Chat app is created, you can change the details by clicking the CONFIGURE BOT DETAILS button, on the integration pop-up. This will take you to the Google Cloud console page for the Google Chat API.

Follow the instructions on the Google Chat API Publish apps guide to configure and publish your app.

Configure your Chat app avatar

There are two alternatives to configure your app's avatar:

  • Click the CONFIGURE BOT DETAILS button in the integration settings and enter an avatar URL in the Avatar URL field.
  • Enter an avatar URL in the Agent Avatar URI field in the agent general settings.

Enable and configure with the Google Cloud console

The Google Chat integration can also be enabled through the Google Cloud console, using the following steps:

  1. In the Google Cloud console, click on the menu icon in the upper left hand corner.
  2. Click on APIs & Services then Dashboard.
  3. Click ENABLE APIS AND SERVICES.
  4. Search for "Google Chat API".
  5. Click on the Google Chat API tile.
  6. Click Enable.
  7. Click Configuration in the left sidebar menu.
  8. Follow the instructions on the Google Chat API Publish apps guide to configure and publish your app.

Test

Before testing your Chat app, make sure you've started it (See the Set up section)

To test your app, follow these steps:

  1. Open Google Chat.
    1. Send a new direct message to the app by clicking Start a chat > Find apps.
    2. On the Find apps page, search for your app's name.
    3. Next to your app, click Chat.
    4. In the new direct message with the app, type Hello and press enter.

Troubleshooting

Error Solution
Your administrator prevented you from talking to apps in direct messages. Ask your Google Workspace administrator to allow users to install Chat apps.

Rich response messages

This integration translates some rich response messages messages to Google Chat message formats.

Text Responses

Text responses are sent to Google Chat as SimpleText. With this formatting you can make text bold or italics by wrapping the text in certain (markdown light) symbols.

The SimpleText response, visually looks the same as the Default Text Response in the Dialogflow Console. However, the raw API response will look a bit different. It also sets the platform config to GOOGLE_HANGOUTS, which could be interesting when building agents for multiple integrations.

"fulfillmentMessages": [
{
   "text": {
   "text": [
        "This is a test."
   ]
},
  "platform": "GOOGLE_HANGOUTS"
},

Images

Image responses are sent to Google Chat as Google Chat Image Widgets.

Cards

Card responses are sent to Google Chat as Google Chat Cards.

Custom Payload

To send other types of Google Chat messages, you can use a custom payload.

Google Chat Custom Payload allows you to create more advanced cards. One card can have one or many sections. Each section could have a header. You can have a look into the Google Chat message formats cards reference guide, to see some of the combinations you can create with this. However, using custom payloads means that you will have to provide the JSON format.

Here's a working example:

{
  "hangouts": {
    "header": {
      "title": "Pizza Delivery Customer Support",
      "subtitle": "pizzadelivery@example.com",
      "imageUrl": "https://goo.gl/aeDtrS"
    },
    "sections": [{
      "widgets": [{
        "keyValue": {
          "icon": "TRAIN",
          "topLabel": "Order No.",
          "content": "12345"
        }
      },
      {
        "keyValue": {
          "topLabel": "Status",
          "content": "In Delivery"
        }
      }]
    },
    {
      "header": "Location",
      "widgets": [{
        "image": {
          "imageUrl": "https://dummyimage.com/600x400/000/fff"
        }
      }]
    },
    {
      "header": "Buttons - I could leave the header out",
      "widgets": [{
        "buttons": [{
          "textButton": {
            "text": "OPEN ORDER",
            "onClick": {
              "openLink": {
                "url": "https://example.com/orders/..."
              }
            }
          }
        }]
      }]
    }]
  }
}