Hangouts Chat

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

Set up

To set up and enable the Hangouts 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 Hangouts 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 Platform Console page for the Hangouts Chat API.

Follow the instructions on the Hangouts Chat API Publishing bots guide to configure and publish your bot.

Enable and configure with the Google Cloud Platform Console

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

  1. In the Google Cloud Platform 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 "Hangouts chat".
  5. Click on the Hangouts Chat API tile.
  6. Click Enable.
  7. Click Configuration in the left sidebar menu.
  8. Follow the instructions on the Hangouts 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 Hangouts 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 G Suite administrator to allow users to install bots.

Rich response messages

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

Text Responses

Text responses are sent to Hangouts 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 Hangouts as Hangouts Image Widgets.

Cards

Card responses are sent to Hangouts as Hangouts Cards.

Custom Payload

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

Hangouts 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 hangouts 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/..."
              }
            }
          }
        }]
      }]
    }]
  }
}