This page explains how to build a homepage for your Google Chat app. App home is a customizable card interface that a Chat app sends to a user when they open a direct message with the Chat app.
For example, you can configure the app home card message to include tips for interacting with the Chat app using slash commands. For end users, app home is only available in a Chat app's direct message if the app developer enables the feature.
Use the Card Builder to design and preview JSON card messages for Chat apps:
Open the Card BuilderPrerequisites
Python
A Google Chat app that's enabled for interactive features. To create an interactive Chat app using an HTTP service, complete this quickstart.
Apps Script
A Google Chat app that's enabled for interactive features. To create an interactive Chat app in Apps Script, complete this quickstart.
Node.js
A Google Chat app that's enabled for interactive features. To create an interactive Chat app using an HTTP service, complete this quickstart.
Java
A Google Chat app that's enabled for interactive features. To create an interactive Chat app using an HTTP service, complete this quickstart.
Configure the Chat API
To support app home, you must update your Chat API configuration in the Google Cloud console.
Python
In the Google Cloud console, go to Menu > More products > Google Workspace > Product Library > Google Chat API.
Click Manage, and then click the Configuration tab.
Select the Support App Home checkbox.
In the App Home URL field, add a URL. This value is usually the same URL as the App URL. This URL is called for
APP_HOME
events.Click Save.
Apps Script
In the Google Cloud console, go to Menu > More products > Google Workspace > Product Library > Google Chat API.
Click Manage, and then click the Configuration tab.
Select the Support App Home checkbox.
Click Save.
Node.js
In the Google Cloud console, go to Menu > More products > Google Workspace > Product Library > Google Chat API.
Click Manage, and then click the Configuration tab.
Select the Support App Home checkbox.
In the App Home URL field, add a URL. This value is usually the same URL as the App URL. This URL is called for
APP_HOME
events.Click Save.
Java
In the Google Cloud console, go to Menu > More products > Google Workspace > Product Library > Google Chat API.
Click Manage, and then click the Configuration tab.
Select the Support App Home checkbox.
In the App Home URL field, add a URL. This value is usually the same URL as the App URL. This URL is called for
APP_HOME
events.Click Save.
Build app home
The app home card is initiated when a user opens a direct message from the Chat app and it can be updated as a response of an interactive event such as a button click, form submission, or dialog closure.
In the following example, the Chat app displays an initial app home card that displays the time the card was created and a button. When a user clicks the button, the Chat app returns an updated card that displays the time the updated card was created.
Create the initial card for app home
To build app home, the Chat app must handle
APP_HOME
interaction events and return an instance of
RenderActions
with pushCard
navigation.
Python
Apps Script
Implement the onAppHome
function that is called after all APP_HOME
events:
This example sends a card message by returning card JSON. You can also use the Apps Script card service.
Node.js
Java
Update an app home card
If your initial app home card contains interactive widgets, such as buttons
or selection inputs, your Chat app must handle
the related interaction events by returning an instance of
RenderActions
with updateCard
navigation. To learn more about handling interactive
widgets, see
Process information inputted by users.
Python
Apps Script
This example sends a card message by returning card JSON. You can also use the Apps Script card service.
Node.js
Java
Limitations
In general,
navigation
is
unavailable for Chat apps. You can't return a stack of cards.
Only pushCard
(for initial response) and updateCard
(for updates) are
available for Chat apps.
Related topics
- View Chat app samples that use app home.
To open a dialog, use the
OPEN_DIALOG
interaction. For more information, see Open a dialog in response to an app home card.To close a dialog, use the
CLOSE_DIALOG
interaction to close the dialog and return to the app home card or useCLOSE_DIALOG_EXECUTE
interaction to close the dialog and refresh the app home card. For more information, see Respond to a dialog for app home card.For an example of how to use app home, see the issue management Chat app in the codelab Build apps for Google Chat with Gemini.