Google Chat

The Google Chat integration for Dialogflow CX lets you create Google Chat apps with natural language understanding based on Dialogflow CX technology.

Limitations

Set up Google Chat

To set up the Google Chat integration for your agent, you'll need the following:

Enable the Google Chat API

Before using Google APIs, you need to turn them on in a Google Cloud project. You can turn on one or more APIs in a single Google Cloud project.

  1. In the https://console.cloud.google.com/, enable the Google Chat API and the Dialogflow API.
  2. Check that you're enabling the APIs in the correct Cloud project, and then click Next.
  3. Check that you're enabling the correct APIs, and then click Enable.

Set up from Dialogflow CX

  1. Go to the Dialogflow CX console.
  2. Select your Google Cloud project.
  3. Select your agent.
  4. Go to the Manage tab on the navigation menu.
  5. Select Integrations.
  6. Click Connect on Google Chat.
  7. Complete the following required information:
    • Name: The name displayed to users who interact with or consume content created by this app, such as in messages, search, and @mentions. For example, Dialogflow CX App.
    • Avatar URL: The avatar image that's displayed to users who interact with the app. Specify an HTTPS URL that hosts a square (aspect ratio of 1:1) PNG image. Recommended minimum size: 256 by 256 pixels. For example, https://developers.google.com/workspace/chat/images/quickstart-app-avatar.png.
    • Description: A description of the app. For example, A helpful bot that responds to real human conversation.
    • Environment: The environment to connect to. Select an Environment as applicable.
  8. Enter email addresses to make this Chat app available to specific people and groups as applicable.
  9. Click Start.

Testing

To test your configured app, mention it in a Google Chat space or send a direct message.

For example:

  1. Open Google Chat.
  2. Click New chat.
  3. In the Add 1 or more people field, enter the name of your Chat app.
  4. Select your Chat app from the results. A direct message opens.

Rich response messages

You can support rich response messages using Custom Payload in Fulfillment. See the Google Chat message API for information about the message format.

Text message

The following custom payload provides a Google Chat text message:

{
  "text": "Hello, world"
}

If you're using a Chat add-on, the following custom payload provides a Google Chat text message:

{
  "hostAppDataAction": {
    "chatDataAction": {
      "createMessageAction": {
        "message": {
          "text": "Your pizza delivery is here!"
        }
      }
    }
  }
}

Card message

The following custom payload provides a Google Chat card message:

{
  "cardsV2": [{
    "cardId": "createCardMessage",
    "card": {
      "header": {
        "title": "A card message!",
        "subtitle": "Sent from Dialogflow CX",
        "imageUrl": "https://developers.google.com/chat/images/chat-product-icon.png",
        "imageType": "CIRCLE"
      },
      "sections": [
        {
          "widgets": [
            {
              "buttonList": {
                "buttons": [
                  {
                    "text": "Read the docs!",
                    "onClick": {
                      "openLink": {
                        "url": "https://developers.google.com/workspace/chat"
                      }
                    }
                  }
                ]
              }
            }
          ]
        }
      ]
    }
  }]
}

The following custom payload provides a Google Chat card message if you're using a Chat add-on:

{
  "hostAppDataAction": {
    "chatDataAction": {
      "createMessageAction": {
        "message": {
          "cardsV2": [
            {
              "cardId": "basic1",
              "card": {
                "header": {
                  "title": "This is a card!",
                  "subtitle": "Sent from Conversational Agents (Dialogflow CX)",
                  "imageUrl": "https://developers.google.com/chat/images/chat-product-icon.png",
                  "imageType": "CIRCLE"
                },
                "sections": [
                  {
                    "widgets": [
                      {
                        "buttonList": {
                          "buttons": [
                            {
                              "text": "Open Google!",
                              "color": {
                                "red": 0.101960786,
                                "green": 0.4509804,
                                "blue": 0.9098039
                              },
                              "onClick": {
                                "openLink": {
                                  "url": "http://google.com"
                                }
                              }
                            }
                          ]
                        }
                      }
                    ]
                  }
                ]
              }
            }
          ]
        }
      }
    }
  }
}

Channel-specific responses

When configured, channel-specific responses with channel DF_CX_GOOGLE_CHAT are automatically used when the agent responds to Google Chat messages.