Esta página explica como criar uma página inicial para mensagens diretas com sua app Google Chat. Uma página inicial, conhecida como página inicial do app no A API Google Chat é uma interface de card personalizável que aparece na guia Página inicial. de espaços para mensagens diretas entre um usuário e um app do Chat.
Você pode usar a página inicial do app para compartilhar dicas sobre como interagir com o app do Chat ou para permitir que os usuários acessem e usem um serviço ou ferramenta externa no Chat.
Use o Card Builder para criar e visualizar mensagens e interfaces do usuário para apps do Chat:
Abrir o Card BuilderPré-requisitos
Node.js
Um app do Google Chat que tenha recursos interativos ativados. Para criar um interativo do Chat que usa um serviço HTTP, conclua este guia de início rápido.
Python
Um app do Google Chat que tenha recursos interativos ativados. Para criar um app de chat interativo usando um serviço HTTP, conclua este guia de início rápido.
Java
Um app do Google Chat com recursos interativos ativados. Para criar um interativo do Chat que usa um serviço HTTP, conclua este guia de início rápido.
Apps Script
Um app do Google Chat com recursos interativos ativados. Para criar um interativo com o app Chat no Apps Script, conclua este guia de início rápido.
Configurar a página inicial do app de chat
Para oferecer suporte à página inicial, configure o app do Chat
para receber
APP_HOME
eventos de interação,
Seu app do Chat recebe esse evento sempre que um usuário
clicar na guia Início de uma mensagem direta com o
App Chat.
Para atualizar as configurações no console do Google Cloud, faça o seguinte:
No console do Google Cloud, acesse Menu > Mais produtos > Google Workspace > Biblioteca de produtos > API Google Chat.
Clique em Gerenciar e na guia Configuração.
Em Recursos interativos, acesse a seção Funcionalidade para configurar a página inicial do app:
- Marque a caixa de seleção Receber mensagens individuais.
- Marque a caixa de seleção Suporte à página inicial do app.
Se o app do Chat usar um serviço HTTP, acesse Configurações de conexão e especifique um endpoint para a campo URL da página inicial do app. Você pode usar o mesmo URL especificado no Campo URL do endpoint HTTP.
Clique em Salvar.
Criar um card de início de app
Quando um usuário abre a tela inicial do app, o app Chat precisa processar
o evento de interação APP_HOME
retornando uma instância de
RenderActions
com navegação pushCard
e um
Card
. Para criar um
experiência interativa, o card pode conter widgets interativos, como botões
ou entradas de texto que o app do Chat pode processar e
responder com cartões adicionais ou uma caixa de diálogo.
No exemplo abaixo, o app Chat mostra um card inicial na tela inicial do app que mostra a hora em que o card foi criado e um botão. Quando um usuário clica no botão, o app do Chat retorna um cartão atualizado que exibe a hora em que o cartão atualizado foi criado.
Node.js
Python
Java
Apps Script
Implemente a função onAppHome
, que é chamada após todos os eventos de interação
APP_HOME
:
Este exemplo envia uma mensagem de card retornando JSON do cartão. Também é possível usar o serviço de cards do Apps Script.
Responder a interações da página inicial do app
Se o card inicial da página inicial tiver widgets interativos, como botões
ou entradas de seleção, o app do Chat precisa processar
os eventos de interação relacionados retornando uma instância do
RenderActions
com a navegação updateCard
. Para saber mais sobre como lidar com
widgets, consulte
Processar as informações inseridas pelos usuários.
No exemplo anterior, o card inicial do app incluía um botão. Sempre que
Um usuário clica no botão, um evento de interação CARD_CLICKED
.
aciona a função updateAppHome
para atualizar o card da página inicial do app, conforme mostrado
no código a seguir:
Node.js
Python
Java
Apps Script
Este exemplo envia uma mensagem de cartão retornando o card JSON. Você também pode usar o Serviço de card do Apps Script.
Abrir caixas de diálogo
Seu app do Chat também pode responder a interações na página inicial do app abrindo caixas de diálogo.
Para abrir uma caixa de diálogo na página inicial do app, processe o evento de interação relacionado
retornando renderActions
com a navegação updateCard
que contém um objeto
Card
. No exemplo a seguir, um app do Chat responde
a um clique em um botão na página inicial do app processando o CARD_CLICKED
evento de interação e abrindo uma caixa de diálogo:
{ renderActions: { action: { navigations: [{ updateCard: { sections: [{
header: "Add new contact",
widgets: [{ "textInput": {
label: "Name",
type: "SINGLE_LINE",
name: "contactName"
}}, { textInput: {
label: "Address",
type: "MULTIPLE_LINE",
name: "address"
}}, { decoratedText: {
text: "Add to favorites",
switchControl: {
controlType: "SWITCH",
name: "saveFavorite"
}
}}, { decoratedText: {
text: "Merge with existing contacts",
switchControl: {
controlType: "SWITCH",
name: "mergeContact",
selected: true
}
}}, { buttonList: { buttons: [{
text: "Next",
onClick: { action: { function: "openSequentialDialog" }}
}]}}]
}]}}]}}}
Para fechar uma caixa de diálogo, processe os seguintes eventos de interação:
CLOSE_DIALOG
: fecha a caixa de diálogo e retorna ao Card inicial do app do Chat na página inicial.CLOSE_DIALOG_AND_EXECUTE
: fecha a caixa de diálogo e atualiza a página inicial do app. carda.
O exemplo de código abaixo usa CLOSE_DIALOG
para fechar uma caixa de diálogo e retornar ao
card de início do app:
{ renderActions: { action: {
navigations: [{ endNavigation: { action: "CLOSE_DIALOG" }}]
}}}
Para coletar informações dos usuários, você também pode criar caixas de diálogo sequenciais. Para aprender a criar caixas de diálogo sequenciais, consulte Abrir e responder a caixas de diálogo.
Temas relacionados
- Confira exemplos de apps de chat que usam a página inicial do app.
- Abrir e responder a caixas de diálogo.