Esta página explica como adicionar texto e imagens a um card ou 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 em apps de chat:
Abra o Criador de cards.Pré-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 card exibido, e
a altura é ajustada para manter a proporção da imagem. O widget Image
oferece suporte a
ações onclick
que ocorrem quando os usuários clicam na imagem. Exemplos de ações onclick
incluem:
- Abra um hiperlink com
OpenLink
, como um hiperlink para a documentação do desenvolvedor do Google Chat,https://developers.google.com/chat
. - Execute uma ação que executa 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 o bom desempenho dos cards, o tamanho máximo recomendado da imagem é de 2 MB.
A seguir, 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 para desenvolvedores 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 a seguir mostra duas imagens em uma grade em que uma delas é cortada:
Cortar uma imagem
Ajuste a forma 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 a seguir mostra cinco imagens em uma grade com um cropStyle
diferente
aplicado a cada uma delas:
Adicionar um ícone
O widget Icon
representa um ícone integrado ou personalizado. Você pode usar Icon
em
mensagens de cards
e
caixas de diálogo
das seguintes maneiras:
- Exibir um ícone independente.
- Exibir um ícone na frente do texto relacionado, como parte de um
widget
DecoratedText
. - Exibir um ícone como um botão interativo, como parte de um
widget
ButtonList
.
Confira a seguir um card que consiste em um componente Icon
com um ícone integrado:
A tabela a seguir lista os ícones integrados disponíveis para mensagens de cards:
AO PLANO | BOOKMARK | ||
BUS | CAR | ||
RELÓGIO | CONFIRMATION_NUMBER_ICON | ||
DESCRIÇÃO | MOEDA | ||
EVENT_SEAT | |||
FLIGHT_ARRIVAL | FLIGHT_DEPARTURE | ||
HOTÉ | 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
mostra 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 saber mais sobre quais tags HTML são compatíveis, consulte
Formatação de texto de cards.
Por exemplo, a seguinte formatação está disponível para parágrafos:
- Exiba texto em negrito, sublinhado ou itálico com 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>
.
Confira a seguir um card que consiste em dois widgets TextParagraph
usados para
exibir dois parágrafos com formatação HTML simples:
Mostrar texto com elementos decorativos
O
widget DecoratedText
exibe texto com layout e recursos opcionais. Exemplo:
- Exiba um
icon
na frente do texto comstartIcon
. - Mostre um título antes do texto com
topLabel
. - Adicione um botão clicável com
button
ou um botão de alternância 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 cartões 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 de card.
Veja a seguir um card que consiste em um widget DecoratedText
usado para exibir detalhes de 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 a mensagem "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 o cartão do Chat produz um resultado inesperado. Por exemplo, uma mensagem de card pode não aparecer.
Embora uma mensagem de erro possa não aparecer na interface do Chat, mensagens de erro descritivas e dados de registro estão disponíveis para ajudar a corrigir erros quando o registro de erros para apps do Chat está ativado. Se precisar de ajuda para visualizar, depurar e corrigir erros, consulte Resolver problemas e corrigir erros do Google Chat.