Adicionar texto e imagens a um card ou caixa de diálogo

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.


Crie e visualize cards com o Criador de cards.

Abra o Criador de cards.

Pré-requisitos

  • Uma conta do Google Workspace com acesso ao Google Chat.
  • Um app do Chat publicado. Para criar um app do Chat, siga este quickstart.
  • 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 usar 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 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
    E-MAIL 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 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 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 "Ocorreu um erro" 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 ou card do Chat produz um resultado inesperado. Por exemplo, uma mensagem de card pode não aparecer.

    Embora uma mensagem de erro não apareça 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 dos apps do Chat está ativado. Se precisar de ajuda para visualizar, depurar e corrigir erros, consulte Resolver problemas e corrigir erros do Google Chat.