This page explains how to build a Google Chat app that can both understand and respond with natural language using Dialogflow. This guide uses Dialogflow CX, which has a direct integration with Google Chat. You can also use Dialogflow ES to build a Dialogflow ES Google Chat app by following the Dialogflow ES Google Chat guide.
For example, consider a Chat app that helps people rent cars. A user might write, "I'd like to rent a car". The Chat app might respond with a question like "Where would you like to pick up the vehicle?" which starts a human-like conversation with the user in which the Chat app both understands and responds with human speech while booking the car rental.
This is just one example. Dialogflow Chat apps are useful in all kinds of interactions. If it requires natural human speech, it calls for a Dialogflow Chat app. The prebuilt agents help you get started fast, and showcase what Dialogflow can do, like:
- Book flights
- Schedule doctor appointments
- Order food delivery
- Answer questions about a retail product catalog, like whether items are available in other colors
-
Figure 2. Testing the agent in Dialogflow CX to make sure the agent's logic and configuration work as intended. The diagram shows a sequential set of topical pages that concern specific steps in the conversation, like setting a pickup and return location for a rental car, and configures the logic that connects them. The conversation is tested in a simulator. -
Figure 3. Configuring a Chat app to process responses using the Dialogflow CX agent on the Chat API configuration page in Google Cloud console. -
Figure 4. Having a conversation about booking a rental car with the Dialogflow Chat app in Google Chat.
Objectives
- Set up your environment.
- Create and deploy a Dialogflow CX agent.
- Create and deploy a Chat app powered by the Dialogflow CX agent.
- Test the Chat app.
Prerequisites
- A Business or Enterprise Google Workspace account with access to Google Chat.
- A Google Cloud project with billing enabled. To check that an existing project has billing enabled, see Verify the billing status of your projects. To create a project and set up billing, see Create a Google Cloud project.
Architecture
The following diagram shows the architecture of a Chat app built with Dialogflow:
In the preceding diagram, a user interacting with a Dialogflow Chat app has the following flow of information:
- A user sends a message in Chat to a Chat app, either in a direct message or in a Chat space.
- A Dialogflow virtual agent, which resides in Google Cloud, receives and processes the message to produce a response.
- Optionally, using a Dialogflow webhook, the Dialogflow agent can interact with external third-party services, such as a project management system or a ticketing tool.
- The Dialogflow agent sends a response back to the Chat app service in Chat.
- The response is delivered to the Chat space.
Set up the environment
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.In the Google Cloud console, enable the Google Chat API and the Dialogflow API.
Confirm that you're enabling the APIs in the correct Cloud project, then click Next.
Confirm that you're enabling the correct APIs, then click Enable.
Create a Dialogflow CX agent
A Dialogflow CX agent is a virtual agent that handles concurrent conversations with your end-users. It's a natural language comprehension module that understands the nuances of human language. Dialogflow translates end-user text during a conversation to structured data that your apps and services can understand. You design and build a Dialogflow agent to handle the types of conversations required for your system.
A Dialogflow agent is like a human call center agent. You train them both to handle expected conversation scenarios, and your training doesn't need to be overly explicit.
Here's how to create the Dialogflow CX agent:
In the Dialogflow CX console, open the Dialogflow CX Console. Click Menu > Dialogflow CX.
Choose a Google Cloud project. To find your project, you might need to click All and then search for it.
Now you have the option to choose a prebuilt agent or create your own. If you prefer to explore agent customization in detail later, choose one of the prebuilt agents, which are also helpful to learn about what agents can do.
To choose a prebuilt agent, follow these steps:
- Click Use prebuilt agents.
Select a prebuilt agent. For this guide, select Travel: car rental.
Agents are rated as beginner, intermediate, or advanced based on how many features the agent uses and upon the sophistication of its conversation logic. Choosing an intermediate or advanced agent might require agent-specific customizations and settings, including enabling features and APIs in Google Cloud console.
Click Import as agent.
To create your own agent, follow these steps:
- Click Create agent.
- Select Auto-generate to create a data store agent or select Build your own to create other kinds of agents.
For a detailed walkthrough of the agent building process, see Create a Dialogflow CX agent.
Configure basic agent settings:
- In Display name, enter a display name.
- Select your preferred location. If you want to change advanced location settings, click Edit.
- Select your preferred time zone.
- Select the default language for your agent. You can't change the default language for an agent after creation.
Click Create. Dialogflow CX begins creating the agent, and then displays the agent's default start flow.
Optionally, customize the agent. For a detailed walkthrough the agent customization process, see Create a Dialogflow CX agent.
As a best practice, test the agent:
- Click Test agent.
- Select Test agent in environment.
- In Environment, select Draft.
- In Flow, select Default Start Flow.
- In Page, select Start Page.
- In the Talk to agent compose bar, type
Hello
and press Enter. The agent responds by introducing itself. - Complete the test by having the sample test conversation.
The Dialogflow CX agent is created. Return to the Dialogflow CX console. Click Menu > Dialogflow CX.
Under Agents, click > Copy name. Save this name, as you use it when configuring the Chat app.
Create a Chat app and connect it with the Dialogflow agent
After creating a Dialogflow CX agent, follow these steps to turn it into a Chat app:
In the Google Cloud console, go to Google Chat API. Search for "Google Chat API" and click Google Chat API, then click Manage.
Click Configuration and set up the Chat app:
- In App name, enter
Dialogflow App
. - In Avatar URL, enter
https://developers.google.com/workspace/chat/images/quickstart-app-avatar.png
. - In Description, enter
Responds to real human conversation
. - Under Functionality, select Receive 1:1 messages and Join spaces and group conversations.
- Under Connection settings, select Dialogflow.
- Under Dialogflow settings, select Dialogflow CX.
- In Agent or Environment resource name, paste the Dialogflow CX agent name you copied at the end of Create a Dialogflow CX agent.
- Make this Chat app available to specific people and groups in your domain and enter your email address.
- Under Logs, select Log errors to Logging.
- In App name, enter
Click Save.
The Chat app is ready to receive and respond to messages on Chat.
Test the Chat app
Test the Dialogflow CX Chat app by messaging it in Google Chat.
Open Google Chat using the Google Workspace account that you provided when you added yourself as a trusted tester.
- Click New chat.
- In the Add 1 or more people field, type the name of your Chat app.
Select your Chat app from the results. A direct message opens.
In the new direct message with the app, type
Hello
and pressenter
.The Dialogflow Chat app responds by introducing itself.
- Complete the test by having the sample test conversation.
Sample test conversation
To test the Dialogflow CX Chat app in either the Dialogflow CX console or in Google Chat, have the following conversation. The explanation helps you understand how the Dialogflow CX agent interprets the user's natural language and produces its own natural language response at each step in the conversation. This sample conversation is based on the prebuilt agent called Travel: car rental.
Dialog | Explanation |
---|---|
End-user: Hello Agent: Hi! I'm the virtual car rental agent. I can help you start a new car rental reservation. How can I assist you today? |
|
End-user: I'd like to rent a car. Agent: Where would you like to pick up the vehicle? |
|
End-user: Las Vegas Agent: Ok, your pickup will be in Las Vegas. Agent: Is your drop off location different from your pickup location? |
|
End-user: Yes. I'll drop the car off in Los Angeles. Agent: Ok, your drop off will be in Los Angeles. Agent: What date and time would you like to pick up the vehicle? |
|
End-user: I'd like to pick up the car on March 5 at noon. Agent: What date and time would you like to drop off the vehicle? |
|
End-user: March 15 at noon. Agent: So to confirm: You will be picking the vehicle up in Las Vegas 2024-03-05 12:00:00 and dropping it off in Los Angeles 2024-03-15 12:00:00 Does that sound right? |
|
End-user: Yes, thank you. Agent: Great! Now let's choose a vehicle. Agent: Would you like an economy or luxury vehicle? |
|
End-user: Economy, please. Agent: Would you like the Cymbal Car or the Cymbal Truck? |
|
End-user: Cymbal Truck. Agent: The Cymbal Truck is $50.33 per day. It fits 4 people and comes with an AM/FM radio. Would you like to proceed to payment? End-user: Yes, please. |
|
Agent: What card type will you be using? End-user: Altostrat Agent: Please enter the card number. End-user: 1234 1234 1234 1234 Agent: What is the name on the card? End-user: Charlie Agent: What is the billing street address? End-user: 1800 Amphibious Blvd. Mountain View, CA Agent: What is the billing ZIP code? End-user: 94045 Agent: You will be picking the Cymbal Car up in Las Vegas, 2024-03-05 12:00:00 and dropping it off, 2024-03-15 12:00:00. The total for this trip will be $175.38. Agent: Thank you for renting with us and have a wonderful day! |
|
Send card messages from Dialogflow
Dialogflow can respond with text or card messages. To respond with a card message, specify it as a custom payload in fulfillment.
The following JSON shows how to send a card message as a custom payload in fulfillment:
json
{
'cardsV2': [{
'cardId': 'createCardMessage',
'card': {
'header': {
'title': 'A card message!',
'subtitle': 'Sent from Dialogflow',
'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'
}
}
}
]
}
}
]
}
]
}
}]
}
Limits and considerations
- Chat interaction events
have limited support and some considerations:
- The following
interaction events types
are supported:
MESSAGE
ADDED_TO_SPACE
CARD_CLICKED
- For
MESSAGE
orADDED_TO_SPACE
events, the query input sent to the Dialogflow agent corresponds to the value of theargumentText
field in the Chat message. If the message includes a slash command, the value of thetext
field is used instead. - For
CARD_CLICKED
events, the query input sent to the Dialogflow agent is formatted asCARD_CLICKED.functionName
, wherefunctionName
corresponds to the value of thefunction
field of the Action object attached to the interactive card element (like a button). - The full JSON payload of each Chat interaction event
is sent to Dialogflow as a custom payload in the query parameter, and
can be accessed with a
Dialogflow webhook
by querying the value of the
WebhookRequest.payload
field.
- The following
interaction events types
are supported:
- Considerations for responding to
slash commands and
receiving data from cards or dialogs:
- When Dialogflow Chat apps receive a message with a slash
command, the query input contains only the value of the
text
field. Thetext
field begins with the name of the slash command (for example,/command
), which you can use to configure a Dialogflow agent's intent to detect a slash command. - If the Dialogflow agent needs to process the Chat interaction event JSON payload, it can do so by using a Dialogflow webhook to inspect the custom payload in the query parameter.
- To display a dialog from the
Dialogflow Agent, respond with a single custom JSON payload that
includes a message containing a
DIALOG
action response. - To process data inputted from cards, the Dialogflow agent can detect
intents that begin with the text
CARD_CLICKED
and respond with a single custom JSON payload containing the appropriate action.
- When Dialogflow Chat apps receive a message with a slash
command, the query input contains only the value of the
- Link previews aren't supported.
- If the Dialogflow agent responds with just one message, then the message
is sent to Google Chat synchronously. If the Dialogflow agent responds
with multiple messages, then all messages are sent to Chat
asynchronously by calling the
create
method on thespaces.messages
resource in Chat API once for each message. - When using the Dialogflow CX integration with Chat, the Dialogflow agent and the Chat app must be set up in the same Google Cloud project. If you need to set up the Dialogflow and Chat in different Cloud projects, then you can set up an intermediate server to facilitate the connection. To learn how, see this Chat integration for Dialogflow CX example on GitHub.
Troubleshoot
When a Google Chat app or card returns an error, the Chat interface surfaces a message saying "Something went wrong." or "Unable to process your request." Sometimes the Chat UI doesn't display any error message, but the Chat app or card produces an unexpected result; for example, a card message might not appear.
Although an error message might not display in the Chat UI, descriptive error messages and log data are available to help you fix errors when error logging for Chat apps is turned on. For help viewing, debugging, and fixing errors, see Troubleshoot and fix Google Chat errors.
Clean up
To avoid incurring charges to your Google Cloud account for the resources used in this tutorial, we recommend that you delete the Cloud project.
- In the Google Cloud console, go to the Manage resources page. Click Menu > IAM & Admin > Manage Resources.
- In the project list, select the project you want to delete and then click Delete .
- In the dialog, type the project ID and then click Shut down to delete the project.
Related topics
- Dialogflow CX takes a
state machine
approach to Dialogflow agent design, which gives you clear and explicit
control over a conversation, a better end-user experience, and a better
development workflow. When building a Dialogflow
Chat app, we recommend using Dialogflow CX.
- To learn more about building and configuring agents, see Dialogflow CX Agents.
- For a detailed walkthrough instructing you how to build and configure agents, see Create a Dialogflow CX agent.
- Build apps for Google Chat with Gemini. Codelab: For an example of how to build a Dialogflow CX data store agent, see the knowledge Chat app from the codelab
- Build apps for Google Chat with Gemini. Codelab: For an example of how to build a Dialogflow CX conversational agent, see the feedback Chat app from the codelab
- Dialogflow ES is another way to use Dialogflow with a Chat app.