Nesta página, explicamos como adicionar textos e imagens a um cartão ou uma mensagem de caixa de diálogo e modificar a forma como o texto e as imagens aparecem na mensagem.
Use o Card Builder para criar e visualizar mensagens de cards JSON para apps do Chat:
Abrir o Card BuilderPré-requisitos
Adicionar uma imagem
O
widget Image
exibe uma imagem PNG ou JPG hospedada em um URL HTTPS.
A largura da imagem exibida preenche toda a largura do cartão exibido, e
a altura é ajustada para manter a proporção da imagem. O widget Image
é compatível com
ações onclick
que ocorrem quando os usuários clicam na imagem. Exemplos de ações onclick
incluem:
- Abra um hiperlink com
OpenLink
, por exemplo, um hiperlink para a documentação do desenvolvedor do Google Chat,https://developers.google.com/chat
. - Executar uma ação que execute uma função personalizada, como chamar uma API.
O widget Image
tem as seguintes limitações:
- Somente imagens PNG e JPG são compatíveis.
- O URL do host precisa ser
HTTPS
. - Para garantir cartões de desempenho, o tamanho máximo recomendado da imagem é de 2 MB.
Confira abaixo um card que consiste em um widget Image
. Ela mostra a imagem da página de destino da documentação do desenvolvedor do Google Chat. Quando os usuários clicam na
imagem, a documentação do desenvolvedor do Google Chat é aberta em uma nova guia.
Adicionar um componente de imagem
O widget Image
é uma imagem com estilo limitado. Um
widget imageCompent
permite aplicar cropStyle
e borderStyle
a uma imagem.
O exemplo abaixo mostra duas imagens em uma grade em que uma delas é cortada:
Cortar uma imagem
Você pode ajustar o formato de uma imagem aplicando um
cropStyle
.
Há várias formas para aplicar a uma imagem:
- Use
SQUARE
para aplicar um corte quadrado. - Use
CIRCLE
para aplicar um corte circular. - Use
RECTANGLE_CUSTOM
para aplicar um corte retangular com uma proporção personalizada. Por exemplo, você pode usarRECTANGLE_4_3
para aplicar um corte retangular com uma proporção de 4:3.
O exemplo abaixo mostra cinco imagens em uma grade com uma cropStyle
diferente
aplicada a cada uma:
Adicionar um ícone
O
widget Icon
representa um ícone
integrado
ou
personalizado. Você pode usar Icon
em
mensagens de card
e
caixas de diálogo
das seguintes maneiras:
- Mostre um ícone independente.
- Mostre um ícone na frente do texto relacionado, como parte de um
widget
DecoratedText
. - Mostre um ícone como um botão interativo, como parte de um
widget
ButtonList
.
Confira abaixo um card que consiste em um componente Icon
com um ícone integrado:
A tabela a seguir lista os ícones integrados disponíveis para mensagens do card:
AÉREO | BOOKMARK | ||
BUS | CARRO | ||
RELÓGIO | CONFIRMATION_NUMBER_ICON | ||
DESCRIÇÃO | MOEDA | ||
EVENT_SEAT | |||
FLIGHT_ARRIVAL | FLIGHT_DEPARTURE | ||
HOTEL | HOTEL_ROOM_TYPE | ||
CONVIDAR | MAP_PIN | ||
ASSINATURA | MULTIPLE_PEOPLE | ||
PESSOA | TELEFONE | ||
RESTAURANT_ICON | SHOPPING_CART | ||
MARCAR COM ESTRELA | LOJA | ||
INGRESSO | TRAIN | ||
VIDEO_CAMERA | VIDEO_PLAY |
Adicionar um parágrafo de texto formatado
O
widget TextParagraph
exibe um parágrafo de texto com formatação HTML opcional. Ao definir o conteúdo de texto desses widgets, basta incluir as tags HTML correspondentes.
Para mais informações sobre quais tags HTML são compatíveis, consulte
Formatação de texto do card.
Por exemplo, a seguinte formatação está disponível para texto de parágrafo:
- Mostre texto em negrito, sublinhado ou itálico com as tags HTML
<b>
,<u>
,<i>
. - Link para sites com HTML
<a href="https://www.google.com">hyperlinks</a>
. - Adicione um pouco de cor com o HTML
<font color="#ea9999">font tags</font>
.
Cada widget TextParagraph
é renderizado como um novo parágrafo e pode ser considerado semelhante a uma tag HTML <p>
.
O card a seguir consiste em dois widgets TextParagraph
usados para exibir dois parágrafos com formatação HTML simples:
Mostrar texto com elementos decorativos
O
widget DecoratedText
mostra texto com layout e recursos opcionais. Exemplo:
- Mostre uma
icon
na frente do texto comstartIcon
. - Mostre um título antes do texto com
topLabel
. - Adicione um botão clicável com
button
ou botão alternável comswitchControl
.
Use o widget DecoratedText
quando precisar apresentar informações de maneira fácil de consumir e interativa. O widget é perfeito para casos de uso como cards de contato, atualizações de status de pedidos e notificações de tíquetes de trabalho.
O widget DecoratedText
oferece suporte à formatação HTML de texto simples. Ao definir o conteúdo de texto desses widgets, basta incluir as tags HTML correspondentes. Para mais informações sobre quais tags HTML são compatíveis, consulte Formatação de texto do card.
Confira a seguir um card que consiste em um widget DecoratedText
usado para exibir detalhes do contato, como endereço de e-mail, status on-line, número de telefone e site:
Resolver problemas
Quando um app ou card do Google Chat retorna um erro, a interface do Chat mostra uma mensagem dizendo "Algo deu errado". ou "Não foi possível processar sua solicitação". Às vezes, a interface do Chat não exibe nenhuma mensagem de erro, mas o app ou card produz um resultado inesperado. Por exemplo, uma mensagem de card pode não aparecer.
Embora uma mensagem de erro possa não ser exibida na interface do Chat, mensagens de erro descritivas e dados de registro estão disponíveis para ajudar você a corrigir erros quando a geração de registros de erros para apps do Chat está ativada. Se precisar de ajuda para visualizar, depurar e corrigir erros, consulte Resolver problemas e corrigir erros do Google Chat.