En esta página, se explica cómo crear y enviar un mensaje de tarjeta principal de la app para tu app de Chat. La página principal de la app es un mensaje de tarjeta personalizable que una app de Chat envía a un usuario cuando este abre un mensaje directo con la app de Chat.
Por ejemplo, puedes configurar el mensaje de la tarjeta principal de la app para incluir sugerencias y, así, interactuar con la app de Chat mediante comandos de barra. Para los usuarios finales, la página principal de la app solo está disponible en el mensaje directo de la app de Chat si el desarrollador de la app habilita la función.
Usa el Creador de tarjetas para diseñar mensajes de tarjetas JSON y obtener una vista previa de ellos en las apps de Chat:
Abre el Creador de tarjetasRequisitos previos
Python
- Una cuenta de Google Workspace con acceso a Google Chat
- Una app de Chat publicada. Para compilar una app de Chat, consulta esta quickstart.
- Una app de Google Chat configurada para la interactividad. Si quieres obtener más información, consulta Configura tu app de Google Chat para recibir eventos de interacción.
Apps Script
- Una cuenta de Google Workspace con acceso a Google Chat
- Una app de Chat publicada. Para compilar una app de Chat, sigue esta quickstart.
- Una app de Google Chat configurada para la interactividad. Si quieres obtener más información, consulta Configura tu app de Google Chat para recibir eventos de interacción.
Configura en la consola de Google Cloud
Python
En la consola de Google Cloud, ve al Menú > Más productos > Google Workspace > Biblioteca de productos > API de Google Chat.
Haz clic en Administrar y, luego, en la pestaña Configuración.
Habilita Support App Home.
Selecciona la casilla de verificación Support App Home.
En el campo App Home URL, agrega una URL. Este valor suele ser la misma URL que la URL de la app. Esta URL se llama para eventos
APP_HOME.Haz clic en Guardar.
Apps Script
En la consola de Google Cloud, ve al Menú > Más productos > Google Workspace > Biblioteca de productos > API de Google Chat.
Haz clic en Administrar y, luego, en la pestaña Configuración.
Selecciona la casilla de verificación Support App Home.
Haz clic en Guardar.
Configura tu app de Chat
Configurar tu app de Chat para enviar un nuevo mensaje de tarjeta en la página principal de la app
Python
Cuando un usuario abre un mensaje directo desde una app de Chat, se envía un evento APP_HOME a tu app de Chat. Cuando una app de Chat recibe este evento, se muestra una instancia JSON de RenderActions con la navegación pushCard.
@app.route('/', methods=['POST'])
def on_event():
event = request.get_json()
chat = event.get('chat')
if chat is not None:
return handle_chat_event(event)
def handle_chat_event(event):
if event['chat'].get('type') == 'APP_HOME':
return get_app_home_card()
def get_app_home_card():
return {
"action": {
"navigations": [
{
"pushCard": {
"sections": [
{
"widgets": [
{
"buttonList": {
"buttons": [
{
"text": "Open documentation",
"onClick": {
"openLink": {
"url": "https://developers.google.com/chat"
}
}
}
]
}
}
]
}
]
}
}
]
}
}
Apps Script
En este ejemplo, se muestra el JSON de la tarjeta para enviar un mensaje de tarjeta. También puedes usar el servicio de tarjetas de Apps Script.
Implementa una función onAppHome para mostrar una instancia JSON de RenderActions con la navegación pushCard:
// "onAppHome" is the pre-defined name of the callback that the Chat servers
// execute.
function onAppHome() {
return {
action: {
navigations: [
{
pushCard: getCard()
}
]
}
};
}
function getCard() {
return {
sections: [
{
widgets: [
{
buttonList: {
buttons: [
{
text: "Open documentation",
onClick: {
openLink: {
url: "https://developers.google.com/chat"
}
}
}
]
}
}
]
}
]
};
}
Actualizar mensaje de la tarjeta principal de la app
El mensaje de la tarjeta principal de la app se puede actualizar cuando un usuario envía información en un mensaje de tarjeta o cierra un diálogo. Por ejemplo, el mensaje inicial de la tarjeta principal de la app es un mensaje de bienvenida en el que se le solicita al usuario que complete un formulario con información. Después de que el usuario completa el formulario, se envía un mensaje de tarjeta principal de la app actualizado. Se debe mostrar la actualización con una instancia de RenderActions que contenga una navegación updateCard.
Python
En el caso de las apps HTTP, la actualización del mensaje de la tarjeta de la página principal de la app es similar a la opción Process informationted by users, pero debes mostrar RenderActions. invokedFunction representa el nombre de la función invocada asociada con el widget Card. Si deseas obtener más información, consulta CommonEventObject.
En el siguiente ejemplo, submitForm muestra que el usuario envió datos del formulario:
@app.route('/', methods=['POST'])
def on_event():
event = request.get_json()
chat = event.get('chat')
if chat is not None:
return handle_chat_event(event)
def handle_chat_event(event):
if event['chat'].get('type') == 'SUBMIT_FORM':
event_object = event.get('commonEventObject')
if event_object is not None:
// Forms
if 'submitForm' == event_object.get('invokedFunction'):
return {
'render_actions': {
'action': {
'navigations': [{
'updateCard': get_update_card()
}]
}
}
}
def get_update_card():
return {
"action": {
"navigations": [{
"pushCard": {
"sections": [{
"widgets": [{
"buttonList": {
"buttons": [{
"text": "Open documentation",
"onClick": {
"openLink": {
"url": "https://developers.google.com/chat"
}
},
}]
}
}]
}]
}
}]
}
}
Apps Script
En este ejemplo, se muestra el JSON de la tarjeta para enviar un mensaje de tarjeta. También puedes usar el servicio de tarjetas de Apps Script.
// Called from elsewhere (i.e. on button press).
function updateAppHomeCard(event) {
return {
render_actions: {
action: {
navigations: [
{
updateCard: getCard()
}
]
}
}
}
}
function getCard() {
return {
sections: [
{
widgets: [
{
buttonList: {
buttons: [
{
text: "Open documentation",
onClick: {
openLink: {
url: "https://developers.google.com/chat"
}
}
}
]
}
}
]
}
]
};
}
Limitaciones
En general, navigation no está disponible para las apps de Chat. No puedes devolver una pila de tarjetas.
Solo pushCard (para la respuesta inicial) y updateCard (para las actualizaciones) están disponibles para las apps de Chat.
Temas relacionados
Para abrir un diálogo, usa la interacción
OPEN_DIALOG. Para obtener más información, consulta Cómo abrir un diálogo en respuesta a un mensaje de la tarjeta principal de la app.Si deseas cerrar un diálogo, usa la interacción
CLOSE_DIALOGpara cerrarlo y volver al mensaje de la tarjeta principal de la app, o bien usa la interacciónCLOSE_DIALOG_EXECUTEpara cerrar el diálogo y actualizar el mensaje de la tarjeta principal de la app. Si deseas obtener más información, consulta Cómo responder a un diálogo para mensajes de tarjetas de la página principal de la app.