Adicionar texto e imagens a cards

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

Para saber mais sobre como criar cards, consulte Criar cards para apps do Google Chat.

Use o Card Builder para criar e visualizar mensagens e interfaces do usuário para apps do Chat:

Abra o Criador de Cards

Pré-requisitos

Um app do Google Chat configurado para receber e responder a interações do usuário. Para criar um app do Google Chat interativo, conclua um dos seguintes guias de início rápido com base na arquitetura do app que você quer usar:

Adicionar imagens ou ícones

Nesta seção, explicamos como adicionar elementos visuais aos cards, como imagens, componentes de imagem e ícones.

Adicionar uma imagem

O widget Image mostra uma imagem PNG ou JPG hospedada em um URL HTTPS. A largura da imagem exibida preenche toda a largura do cartão, 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 de onclick:

  • Abra um hiperlink com OpenLink, como um hiperlink para a documentação para desenvolvedores do Google Chat, https://developers.google.com/chat.
  • Executar 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 aceitas.
  • O URL do host precisa ser HTTPS.
  • Para garantir o desempenho dos cards, o tamanho máximo recomendado para as imagens é de 2 MB.

Veja a seguir um card que consiste em um widget Image. Ela mostra a imagem da página de destino da documentação para desenvolvedores 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 ImageComponent permite aplicar cropStyle e borderStyle a uma imagem.

O exemplo a seguir mostra duas imagens em uma grade em que uma delas é cortada:

É possível 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.
  • Use RECTANGLE_CUSTOM para aplicar um corte retangular com uma proporção personalizada. Por exemplo, use RECTANGLE_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:

Adicionar um ícone

O widget Icon representa um ícone integrado ou personalizado. Adicione ícones aos cards para:

  • 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.

Veja 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 card:

AIRPLANE BOOKMARK
BUS CAR
RELÓGIO CONFIRMATION_NUMBER_ICON
DESCRIÇÃO DOLLAR
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
TICKET TREINAR
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

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 mais informações sobre quais tags HTML são compatíveis, consulte Formatar o texto que aparece nos cards.

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

  • Exiba texto em negrito, sublinhado ou itálico com as tags HTML <b>, <u>, <i>.
  • Vincular a 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>.

Veja a seguir um card que consiste em dois widgets TextParagraph usados para exibir dois parágrafos com formatação HTML simples:

Adicionar um parágrafo de texto recolhível

Os parágrafos de texto recolhíveis permitem que os usuários encontrem mais informações quando quiserem. Este widget é ótimo para apresentar conteúdo extenso ou dar mais detalhes que aparecem quando selecionados, criando uma experiência mais dinâmica e interativa para os usuários.

Mostrar texto com elementos decorativos

O widget DecoratedText mostra texto com layout e recursos opcionais. Exemplo:

  • Mostre um 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 um botão de alternância com switchControl.

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 do pedido e notificações de tíquetes de trabalho.

O widget DecoratedText aceita 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.

Veja a seguir 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 do Google Chat ou card 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 mostra nenhuma mensagem de erro, mas o app do Chat ou card 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 você a corrigir erros quando o registro de erros para apps do Chat está ativado. Para receber ajuda para visualizar, depurar e corrigir erros, consulte Resolver problemas e corrigir erros do Google Chat.