Enviar uma mensagem de card da página inicial de um app do Google Chat

Nesta página, explicamos como criar e enviar uma mensagem de card inicial para seu app do Chat. Essa página é um card personalizável que um app do Chat envia a um usuário quando ele abre uma mensagem direta com o app do Chat.

Card inicial do app com duas mensagens.

Por exemplo, você pode configurar a mensagem do card da página inicial do app para incluir dicas de como interagir com o app do Chat usando comandos de barra. Para os usuários finais, a página inicial só estará disponível na mensagem direta do app do Chat se o desenvolvedor do app ativar o recurso.

Use o Card Builder para criar e visualizar mensagens de cards JSON em apps de chat:

Abra o Criador de cards.

Pré-requisitos

Python

Apps Script

Configurar no console do Google Cloud

Python

  1. No console do Google Cloud, acesse Menu > Mais produtos > Google Workspace > Biblioteca de produtos > API Google Chat.

    Acessar a API Google Chat

  2. Clique em Gerenciar e na guia Configuração.

  3. Ative a Página inicial do app de suporte.

  4. Marque a caixa de seleção Support App Home.

  5. No campo URL da página inicial do app, adicione um URL. Geralmente, esse valor é o mesmo URL do URL do aplicativo. Esse URL é chamado para eventos APP_HOME.

  6. Clique em Salvar.

Apps Script

  1. No console do Google Cloud, acesse Menu > Mais produtos > Google Workspace > Biblioteca de produtos > API Google Chat.

    Acessar a API Google Chat

  2. Clique em Gerenciar e na guia Configuração.

  3. Marque a caixa de seleção Support App Home.

  4. Clique em Salvar.

Configurar o app do Chat

Configure seu app do Chat para enviar uma nova mensagem de cartão para a página inicial do app.

Python

Quando um usuário abre uma mensagem direta de um app do Chat, um evento APP_HOME é enviado ao app do Chat. Quando um app do Chat recebe esse evento, uma instância JSON de RenderActions é retornada com a navegação 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

Neste exemplo, uma mensagem de cartão é enviada retornando JSON do cartão. Você também pode usar o serviço de card do Apps Script.

Implemente uma função onAppHome para retornar uma instância JSON de RenderActions com a navegação 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"
                    }
                  }
                }
              ]
            }
          }
        ]
      }
    ]
  };
}

Atualizar uma mensagem de card na página inicial do app

A mensagem do card inicial do app pode ser atualizada quando um usuário envia informações em uma mensagem de card ou fecha uma caixa de diálogo. Por exemplo, a mensagem inicial do card na página inicial é uma mensagem de boas-vindas que solicita que o usuário preencha um formulário com informações. Depois que o usuário preencher o formulário, uma mensagem atualizada do card da página inicial do app será enviada. A atualização precisa ser retornada com uma instância de RenderActions que contenha uma navegação updateCard.

Python

Para apps HTTP, a atualização da mensagem do card inicial do app é semelhante a Processar informações inseridas pelos usuários, mas é necessário retornar RenderActions. invokedFunction representa o nome da função invocada associada ao widget Card. Para mais informações, consulte CommonEventObject. No exemplo a seguir, submitForm mostra que o usuário enviou os dados do formulário:

@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

Neste exemplo, uma mensagem de cartão é enviada retornando JSON do cartão. Você também pode usar o serviço de card do 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"
                    }
                  }
                }
              ]
            }
          }
        ]
      }
    ]
  };
}

Limitações

Em geral, o navigation não está disponível para apps do Chat. Não é possível devolver um conjunto de cartões. Apenas pushCard (para resposta inicial) e updateCard (para atualizações) estão disponíveis para apps de chat.