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 dela se ajusta para manter a proporção da imagem.

O widget do Image oferece suporte a ações no clique que ocorrem quando os usuários clicam na imagem. Exemplos de ações "onclick":

• Abra um hiperlink com o OpenLink, como um hiperlink para a documentação do desenvolvedor do Google Chat, https://developers.google.com/chat.
• executar uma ação que executa uma função personalizada, como chamar uma API.

Exemplo: uma imagem clicável

A imagem a seguir mostra um card que consiste em um widget Image. Ela exibe 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.

Figura 1: uma mensagem com card no Google Chat que mostra um widget Image.

Este é o JSON do cartão:

JSON

{
  "cardsV2": [
    {
      "cardId": "exampleCard",
      "card": {
        "sections": [
          {
            "widgets": [
              {
                "image": {
                  "imageUrl": "https://developers.google.com/chat/images/chat-app-hero-image_1440.png",
                  "onClick": {
                    "openLink": {
                      "url": "https://developers.google.com/chat",
                    }
                  },
                  "altText": "The Google Chat developer documentation landing page image."
                }
              }
            ]
          }
        ]
      }
    }
  ]
}

Image representação e campos JSON

Representação JSON
{ "imageUrl": string, "onClick": { object (OnClick) }, "altText": string }

Campos
imageUrl	string O URL https que hospeda a imagem. Exemplo: https://developers.google.com/chat/images/quickstart-app-avatar.png
onClick	object ( OnClick ) Quando um usuário clica na imagem, o clique aciona essa ação.
altText	string O texto alternativo desta imagem, usado para acessibilidade.

Onclick

Representa como responder quando os usuários clicam em um elemento interativo em um card, como um botão.

Representação JSON
{ // Union field data can be only one of the following: "action": { object (Action) }, "openLink": { object (OpenLink) }, "openDynamicLinkAction": { object (Action) }, "card": { object (Card) } // End of list of possible types for union field data. }

Campos
Campo de união data . data pode ser apenas de um dos tipos a seguir:
action	object ( Action ) Se especificada, uma ação é acionada por este onClick .
openLink	object ( OpenLink ) Se especificado, este onClick vai acionar uma ação de link aberto.
openDynamicLinkAction	object ( Action ) Um complemento aciona essa ação quando ela precisa abrir um link. Isso é diferente do openLink acima, porque ele precisa se comunicar com o servidor para receber o link. Portanto, parte do trabalho de preparação é necessário para que o cliente da Web faça antes que a resposta da ação de link aberto volte.
card	object ( Card ) Um novo cartão é enviado para a pilha de cards após o clique, se especificado. Com os complementos do Google Workspace, mas não os apps do Chat.

Action

Uma ação que descreve o comportamento quando o formulário é enviado. Por exemplo, um Apps Script pode ser invocado para processar o formulário. Se a ação for acionada, os valores do formulário serão enviados ao servidor.

Representação JSON
{ "function": string, "parameters": [ { object (ActionParameter) } ], "loadIndicator": enum (LoadIndicator), "persistValues": boolean, "interaction": enum (Interaction) }

Campos
function	string Uma função personalizada a ser invocada quando o elemento que contém o conteúdo for clicado ou ativado por outros motivos. Para ver exemplos de uso, consulte Criar cards interativos .
parameters[]	object ( ActionParameter ) Lista de parâmetros de ação.
loadIndicator	enum ( LoadIndicator ) Especifica o indicador de carregamento que a ação exibe ao fazer a chamada para a ação.
persistValues	boolean Indica se os valores do formulário persistem após a ação. O valor padrão é false . Se true , os valores do formulário permanecem após o acionamento da ação. Para permitir que o usuário faça alterações durante o processamento da ação, defina LoadIndicator como NONE . Para mensagens do cartão em apps de chat, você também precisa definir o ResponseType da ação como UPDATE_MESSAGE e usar o mesmo cardId do cartão que continha a ação. Se false , os valores do formulário serão apagados quando a ação for acionada. Para evitar que o usuário faça alterações enquanto a ação é processada, defina LoadIndicator como SPINNER .
interaction	enum ( Interaction ) Opcional. Obrigatório ao abrir uma caixa de diálogo . O que fazer em resposta a uma interação com o usuário, como clicar em um botão em uma mensagem de card. Se não for especificado, o app responderá executando uma action , como a abertura de um link ou a execução de uma função, normalmente. Ao especificar um interaction , o app pode responder de maneiras interativas especiais. Por exemplo, definindo interaction como OPEN_DIALOG , o app pode abrir uma caixa de diálogo . Quando especificado, um indicador de carregamento não é mostrado. Compatível com apps de chat, mas não com complementos do Google Workspace. Se especificado para um complemento, todo o cartão será retirado, e nada será exibido no cliente.

ActionParameter

Lista de parâmetros de string a serem fornecidos quando o método de ação for invocado. Por exemplo, considere estes três botões: adiar agora, adiar 1 dia ou adiar semana que vem. Você pode usar o método de ação = sleep(), transmitindo o tipo de adiamento e o tempo de adiamento na lista de parâmetros de string.

Para saber mais, consulte CommonEventObject .

Representação JSON
{ "key": string, "value": string }

Campos
key	string Nome do parâmetro do script de ação.
value	string O valor do parâmetro.

LoadIndicator

Especifica o indicador de carregamento que a ação exibe ao fazer a chamada para a ação.

Enums
SPINNER	Exibe um ícone de carregamento indicando que o conteúdo está sendo carregado.
NONE	Nada é exibido.

Interaction

Opcional. Obrigatório ao abrir uma caixa de diálogo .

O que fazer em resposta a uma interação com o usuário, como clicar em um botão em uma mensagem de card.

Se não for especificado, o app responderá executando uma action , como a abertura de um link ou a execução de uma função, normalmente.

Ao especificar um interaction , o app pode responder de maneiras interativas especiais. Por exemplo, definindo interaction como OPEN_DIALOG , o app pode abrir uma caixa de diálogo .

Quando especificado, um indicador de carregamento não é mostrado.

Compatível com apps de chat, mas não com complementos do Google Workspace. Se especificado para um complemento, todo o cartão será retirado, e nada será exibido no cliente.

Enums
INTERACTION_UNSPECIFIED	Valor padrão. O action é executado normalmente.
OPEN_DIALOG	Abre uma caixa de diálogo , uma interface em janelas e baseada em cards que os apps de chat usam para interagir com os usuários. Esse recurso só é compatível com apps de chat em resposta a cliques em botões nas mensagens do card. Não é compatível com os complementos do Google Workspace. Se especificado para um complemento, todo o cartão será retirado, e nada será exibido no cliente.

OpenLink

Representa um evento onClick que abre um hiperlink.

Representação JSON
{ "url": string, "openAs": enum (OpenAs), "onClose": enum (OnClose) }

Campos
url	string O URL a ser aberto.
openAs	enum ( OpenAs ) Como abrir um link. Não há suporte para os apps de chat.
onClose	enum ( OnClose ) Indica se o cliente esqueceu de um link depois de abri-lo ou se o observa até a janela fechar. Não há suporte para os apps de chat.

Limites e considerações

• Somente as imagens .png e .jpg são compatíveis.
• O URL do host precisa ser HTTPS.
• Para garantir esse desempenho, o tamanho máximo da imagem recomendado é de 2 MB.