Envía un mensaje de tarjeta principal de app para una app de Google Chat

En esta página, se explica cómo crear y enviar un mensaje de tarjeta de inicio 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 abre un mensaje directo con la app de Chat. Por ejemplo, puedes configurar el mensaje de la tarjeta de inicio de la app para que incluya sugerencias para 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 las apps de Chat si el desarrollador de la app habilita la función.


Diseña tarjetas y obtén una vista previa de ellas con el Creador de tarjetas.

Abre el Creador de tarjetas

Requisitos previos

Python

Apps Script

Configura en la consola de Google Cloud

Python

  1. En la consola de Google Cloud, ve al Menú > Más productos > Google Workspace > Biblioteca de productos > API de Google Chat.

    Ir a la API de Google Chat

  2. Haz clic en Administrar y, luego, en la pestaña Configuración.

  3. Habilita Support App Home.

  4. Selecciona la casilla de verificación Support App Home.

  5. 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.

  6. Haz clic en Guardar.

Apps Script

  1. En la consola de Google Cloud, ve al Menú > Más productos > Google Workspace > Biblioteca de productos > API de Google Chat.

    Ir a la API de Google Chat

  2. Haz clic en Administrar y, luego, en la pestaña Configuración.

  3. Selecciona la casilla de verificación Support App Home.

  4. 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 recibe este evento, se muestra una instancia JSON de RenderActions con la navegación push_card.

En el siguiente ejemplo, se muestra un evento:

@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 "Card v2" representing App Home.

En el siguiente ejemplo, se muestra una tarjeta configurada para incluir un vínculo de botón a la documentación:

{
  action: {
    navigations: [
      {
        push_card: {
          sections: [
            {
              widgets: [
                {
                  buttonList: {
                    buttons: [
                      {
                        text: "Open documentation",
                        onClick: {
                          openLink: {
                            url: "https://developers.google.com/chat"
                          }
                        }
                      }
                    ]
                  }
                }
              ]
            }
          ]
        }
      }
    ]
  }
}

Apps Script

Implementa una función onAppHome para mostrar una instancia JSON de RenderActions con la navegación push_card:

// "onAppHome" is the pre-defined name of the callback that the Chat servers
// execute.
function onAppHome() {
  return {
    action: {
      navigations: [
        {
          push_card: 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 update_card.

Python

En el caso de las apps HTTP, la actualización del mensaje de la tarjeta de inicio de la app es similar a Process informationted by users, pero debes mostrar RenderActions. invokedFunction representa el nombre de la función invocada asociada con el widget Card. Para 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': [{
                'update_card': get_update_card
              }]
            }
          }
        }

def get_update_card:
  // Return "Card v2" representing App Home.
  ...

Apps Script

// Called from elsewhere (i.e. on button press).
function updateAppHomeCard(event) {
  return {
    render_actions: {
      action: {
        navigations: [
          {
            update_card: getCard()
          }
        ]
      }
    }
  }
}

function getCard() {
  // Return "Card v2" representing App Home.
  ...
}