Dialogflow Google Chat integration

The Dialogflow Google Chat integration lets you create bots you can include in one-on-one chats as well as chat rooms. See the Google Chat API docs for more information.

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 bot

Once your Google Chat bot 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 Publishing bots guide to configure and publish your bot.

Configure your bot avatar

There are two alternatives to configure your bot 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 Cloud Console

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

  1. In the 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 Publishing bots guide to configure and publish your bot.

Test

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

To test your bot, follow these steps:

  1. Go to Google Chat.
  2. Click into the Search field.
  3. Select Find a bot.
  4. Select your bot name.
  5. Click Message.

Troubleshooting

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

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 Bot Customer Support",
      "subtitle": "pizzabot@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/..."
              }
            }
          }
        }]
      }]
    }]
  }
}