Adicionar texto e imagens a cards

Nesta página, explicamos como adicionar e formatar texto e imagens em cards.

Para saber mais sobre a criação de cards, consulte Criar cards para apps do Google Chat.

Use o Card Builder para criar e visualizar mensagens de cards JSON para apps do Chat:

Abrir o Card Builder

Pré-requisitos

Um app do Google Chat com recursos interativos ativados. Para criar um interativo do Chat, conclua um dos seguintes guias de início rápido com base na arquitetura do app que você quer usar:

Adicionar imagens ou ícones

Esta seção explica como adicionar elementos visuais, como imagens, componentes de imagem e ícones.

Adicionar uma imagem

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 sua altura se ajusta para manter a proporção da imagem. O widget Image oferece suporte para onclick ações que ocorrem quando os usuários clicam na imagem. Exemplos de ações onclick incluem:

  • Abrir um hiperlink com OpenLink, como um hiperlink para a documentação do desenvolvedor do Google Chat, https://developers.google.com/chat.
  • Execute um 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. Ele mostra Imagem da página de destino da documentação para desenvolvedores do Google Chat. Quando os usuários clicam no imagem, a documentação do desenvolvedor do Google Chat será 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:

Você pode ajustar a forma de um componente de 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.
  • Usar RECTANGLE_CUSTOM para aplicar um corte retangular com um aspecto personalizado proporção. Por exemplo, use RECTANGLE_4_3 para aplicar um corte retangular. com proporção de 4:3.

O exemplo a seguir mostra cinco imagens em uma grade com um cropStyle diferente. aplicada a cada imagem:

Adicionar um ícone

A Widget Icon representa um integrado ícone ou personalizado ícone. É possível adicionar ícones aos cards para realizar as seguintes ações:

  • Mostre um ícone independente.
  • Exibir 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 MARCA EM RELAÇÃO AO LIVRO
ÔNIBUS CARRO
RELÓGIO CONFIRMATION_NUMBER_ICON
DESCRIÇÃO MOEDA
E-MAIL EVENT_SEAT
FLIGHT_ARRIVAL FLIGHT_DEPARTURE
HOTEL HOTEL_ROOM_TYPE
CONVIDAR MAP_PIN
ASSINATURA MULTIPLE_PEOPLE
PESSOA TELEFONE
RESTAURANT_ICON SHOPPING_CART
STAR LOJA
INGRESSO TREINAMENTO
VIDEO_CAMERA VIDEO_PLAY

Adicionar texto a um card

Nesta seção, explicamos como adicionar e formatar texto em um card.

Adicionar um parágrafo de texto formatado

A 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 Formatar o texto que aparece em cards.

Por exemplo, a seguinte formatação está disponível para texto de parágrafo:

  • Mostrar texto em negrito, sublinhado ou itálico com HTML <b>, <u>, <i> tags.
  • 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 é composto por dois widgets TextParagraph usados para: exibir dois parágrafos com formatação HTML simples:

Adicionar um parágrafo de texto recolhível

Com os parágrafos de texto recolhíveis, os usuários revelam mais informações sob demanda. Esse widget é perfeito para apresentar conteúdo longo ou detalhes adicionais que podem ser explorados quando selecionados, criando um ambiente de usuário dinâmico e interativo do usuário.

Mostrar texto com elementos decorativos

A Widget DecoratedText exibe texto com layout e recursos opcionais. Exemplo:

  • Mostre uma icon na frente do texto com startIcon.
  • Mostre um título antes do texto com topLabel.
  • Adicione um botão clicável com button ou botão alternável com switchControl.

Use o widget DecoratedText quando precisar apresentar informações em uma 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 do texto do card.

Confira abaixo um card que consiste em um widget DecoratedText usado para mostrar 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 retornar um erro, o 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 do Chat ou produz um resultado inesperado; por exemplo, uma mensagem de cartão 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 você a corrigir os erros quando a geração de registros de erros nos apps do Chat está ativada. Para receber ajuda com a visualização, depurar e corrigir erros, consulte Resolver problemas e corrigir erros do Google Chat.