Esta página foi traduzida pela API Cloud Translation.

Visualizar links

Para evitar a troca de contexto quando os usuários compartilham um link no Google Chat, o app Chat pode visualizar o link anexando um card à mensagem, que mostra mais informações e permite que as pessoas realizem ações diretamente no Google Chat.

Por exemplo, imagine um espaço do Google Chat que inclua todos os agentes de atendimento ao cliente de uma empresa e um app de chat chamado Case-y. Os agentes costumam compartilhar links para casos de atendimento ao cliente no espaço do Chat. Sempre que fizerem isso, os colegas precisarão abrir o link do caso para ver detalhes, como o responsável, o status e o assunto. Da mesma forma, se alguém quiser assumir a propriedade de um caso ou alterar o status, precisará abrir o link.

A visualização de links permite que o app Chat residente do espaço, Case-y, anexe um card com o responsável, o status e o assunto sempre que alguém compartilhar um link do caso. Com os botões no card, os agentes podem assumir a propriedade do caso e mudar o status dele diretamente no stream do chat.

Como funciona a visualização de links

Quando alguém adiciona um link à mensagem, um ícone é exibido informando que um app de chat pode visualizar o link.

Ícone indicando que um app de chat pode visualizar um link

Após o envio, o link é enviado para o app Chat, que gera e anexa o card à mensagem do usuário.

App de bate-papo que visualiza um link ao anexar um cartão à mensagem

O card fornece informações adicionais sobre o link, incluindo elementos interativos, como botões. O app Chat pode atualizar o card anexado em resposta a interações do usuário, como cliques em botões.

Se alguém não quiser que o app Chat visualize o link anexando um card à mensagem, é possível impedir a visualização clicando em no ícone de visualização. Os usuários podem remover o cartão anexado a qualquer momento clicando em Remover visualização.

Configurar visualizações de links

Registre links específicos, como example.com, support.example.com e support.example.com/cases/, como padrões de URL na página de configuração do app Chat no Console do Google Cloud para que o app Chat possa visualizá-los.

Menu de configuração das visualizações de link

Abra o Console do Google Cloud.
Ao lado de "Google Cloud", clique na seta para baixo e abra o projeto do app Chat.
No campo de pesquisa, digite Google Chat API e clique em API Google Chat.
Clique em Gerenciar > Configuração.
Em "Visualizações de link", adicione ou edite um padrão de URL.
1. Para configurar visualizações de links de um novo padrão de URL, clique em Adicionar padrão de URL.
2. Para editar a configuração de um padrão de URL existente, clique na seta para baixo .
No campo Host standard, digite o domínio do padrão de URL. O app Chat visualizará os links deste domínio.

Para que o app Chat visualize links de um subdomínio específico, como subdomain.example.com, inclua o subdomínio.

Para que o app Chat visualize links de todo o domínio, especifique um caractere curinga com um asterisco (*) como subdomínio. Por exemplo, *.example.com corresponde a subdomain.example.com e any.number.of.subdomains.example.com.
No campo Prefixo do caminho, digite um caminho para anexar ao domínio do padrão de host.

Para corresponder a todos os URLs no domínio do padrão do host, deixe Prefixo do caminho vazio.

Por exemplo, se o padrão do host for support.example.com, digite cases/ para corresponder aos URLs em casos hospedados em support.example.com/cases/.
Clique em Concluído.
Clique em Salvar.

Agora, sempre que alguém incluir um link que corresponda a um padrão de URL de visualização de link em uma mensagem em um espaço do Chat que inclua seu app de chat, o app exibirá o link.

Visualizar um link

Depois que você configura a visualização de um determinado link, o app Chat pode reconhecer e visualizar o link anexando mais informações.

Dentro dos espaços do Chat que incluem o app Chat, quando a mensagem de alguém contiver um link que corresponde a um padrão de URL de visualização, o link será enviado ao seu app como o atributo matchedUrl no objeto message:

JSON

message {

  . . . // other message attributes redacted

  "matchedUrl": {
     "url": "https://support.example.com/cases/case123"
   },

  . . . // other message attributes redacted

}

Ao verificar a presença do atributo matchedUrl no objeto message, seu app de chat pode adicionar informações à mensagem com o link visualizado. O app Chat pode responder com uma mensagem de texto simples ou anexar um card.

Responder com uma mensagem de texto

Para respostas simples, o app Chat pode visualizar um link respondendo com uma mensagem de texto simples. Este exemplo anexa uma mensagem que repete o URL do link que corresponde a um padrão de URL de visualização do link.

Node.js

node/preview-link/simple-text-message.js (em inglês)

Ver no GitHub

/**
 * Responds to messages that have links whose URLs match URL patterns
 * configured for link previewing.
 *
 * @param {Object} req Request sent from Google Chat.
 * @param {Object} res Response to send back.
 */
exports.onMessage = (req, res) => {
  if (req.method === 'GET' || !req.body.message) {
    res.send(
      'Hello! This function is meant to be used in a Google Chat Space.');
  }

  // Checks for the presence of event.message.matchedUrl and responds with a
  // text message if present
  if (req.body.message.matchedUrl) {
    res.json({
      'text': 'req.body.message.matchedUrl.url: ' +
        req.body.message.matchedUrl.url,
    });
  }

  // If the Chat app doesn’t detect a link preview URL pattern, it says so.
  res.json({'text': 'No matchedUrl detected.'});
};

Apps Script

apps-script/preview-link/simple-text-message.gs

Ver no GitHub

/**
 * Responds to messages that have links whose URLs match URL patterns
 * configured for link previewing.
 *
 * @param {Object} event The event object from Chat API.
 *
 * @return {Object} Response from the Chat app attached to the message with
 * the previewed link.
 */
function onMessage(event) {
  // Checks for the presence of event.message.matchedUrl and responds with a
  // text message if present
  if (event.message.matchedUrl) {
    return {
      'text': 'event.message.matchedUrl.url: ' + event.message.matchedUrl.url,
    };
  }

  // If the Chat app doesn’t detect a link preview URL pattern, it says so.
  return {'text': 'No matchedUrl detected.'};
}

Anexar um cartão

Para anexar um card a um link visualizado, retorne um ActionResponse do tipo UPDATE_USER_MESSAGE_CARDS. Este exemplo anexa um cartão simples.

App de bate-papo que visualiza um link ao anexar um cartão à mensagem

Node.js

node/preview-link/attach-card.js

Ver no GitHub

/**
 * Responds to messages that have links whose URLs match URL patterns
 * configured for link previewing.
 *
 * @param {Object} req Request sent from Google Chat.
 * @param {Object} res Response to send back.
 */
exports.onMessage = (req, res) => {
  if (req.method === 'GET' || !req.body.message) {
    res.send(
      'Hello! This function is meant to be used in a Google Chat Space.');
  }

  // Checks for the presence of event.message.matchedUrl and attaches a card
  // if present
  if (req.body.message.matchedUrl) {
    res.json({
      'actionResponse': {'type': 'UPDATE_USER_MESSAGE_CARDS'},
      'cardsV2': [
        {
          'cardId': 'attachCard',
          'card': {
            'header': {
              'title': 'Example Customer Service Case',
              'subtitle': 'Case basics',
            },
            'sections': [
              {
                'widgets': [
                  {'keyValue': {'topLabel': 'Case ID', 'content': 'case123'}},
                  {'keyValue': {'topLabel': 'Assignee', 'content': 'Charlie'}},
                  {'keyValue': {'topLabel': 'Status', 'content': 'Open'}},
                  {
                    'keyValue': {
                      'topLabel': 'Subject', 'content': 'It won"t turn on...',
                    }
                  },
                ],
              },
              {
                'widgets': [
                  {
                    'buttons': [
                      {
                        'textButton': {
                          'text': 'OPEN CASE',
                          'onClick': {
                            'openLink': {
                              'url': 'https://support.example.com/orders/case123',
                            },
                          },
                        },
                      },
                      {
                        'textButton': {
                          'text': 'RESOLVE CASE',
                          'onClick': {
                            'openLink': {
                              'url': 'https://support.example.com/orders/case123?resolved=y',
                            },
                          },
                        },
                      },
                      {
                        'textButton': {
                          'text': 'ASSIGN TO ME',
                          'onClick': {
                            'action': {
                              'actionMethodName': 'assign',
                            },
                          },
                        },
                      },
                    ],
                  },
                ],
              },
            ],
          },
        },
      ],
    });
  }

  // If the Chat app doesn’t detect a link preview URL pattern, it says so.
  res.json({'text': 'No matchedUrl detected.'});
};

Apps Script

apps-script/preview-link/attach-card.gs

Ver no GitHub

/**
 * Responds to messages that have links whose URLs match URL patterns
 * configured for link previewing.
 *
 * @param {Object} event The event object from Chat API.
 * @return {Object} Response from the Chat app attached to the message with
 * the previewed link.
 */
function onMessage(event) {
  // Checks for the presence of event.message.matchedUrl and attaches a card
  // if present
  if (event.message.matchedUrl) {
    return {
      'actionResponse': {
        'type': 'UPDATE_USER_MESSAGE_CARDS',
      },
      'cardsV2': [{
        'cardId': 'attachCard',
        'card': {
          'header': {
            'title': 'Example Customer Service Case',
            'subtitle': 'Case basics',
          },
          'sections': [{
            'widgets': [
              {'keyValue': {'topLabel': 'Case ID', 'content': 'case123'}},
              {'keyValue': {'topLabel': 'Assignee', 'content': 'Charlie'}},
              {'keyValue': {'topLabel': 'Status', 'content': 'Open'}},
              {
                'keyValue': {
                  'topLabel': 'Subject', 'content': 'It won\'t turn on...',
                },
              },
            ],
          },
          {
            'widgets': [{
              'buttons': [
                {
                  'textButton': {
                    'text': 'OPEN CASE',
                    'onClick': {
                      'openLink': {
                        'url': 'https://support.example.com/orders/case123',
                      },
                    },
                  },
                },
                {
                  'textButton': {
                    'text': 'RESOLVE CASE',
                    'onClick': {
                      'openLink': {
                        'url': 'https://support.example.com/orders/case123?resolved=y',
                      },
                    },
                  },
                },
                {
                  'textButton': {
                    'text': 'ASSIGN TO ME',
                    'onClick': {'action': {'actionMethodName': 'assign'}},
                  },
                },
              ],
            }],
          }],
        },
      }],
    };
  }

  // If the Chat app doesn’t detect a link preview URL pattern, it says so.
  return {'text': 'No matchedUrl detected.'};
}

Atualizar um cartão

Para atualizar o card anexado a um link visualizado, retorne um ActionResponse do tipo UPDATE_USER_MESSAGE_CARDS. Os cards anexados aos links visualizados só são atualizados em resposta a solicitações síncronas dos eventos de chat. As solicitações assíncronas para atualizar cartões anexados a um link visualizado pela API REST do Chat não são compatíveis.

A visualização de links não é compatível com o retorno de um ActionResponse do tipo UPDATE_MESSAGE. Como o UPDATE_MESSAGE atualiza toda a mensagem em vez de apenas o card, ela só funcionará se o app Chat tiver criado a mensagem original. A visualização de links anexa um card a uma mensagem criada pelo usuário para que o app Chat não tenha permissão para atualizá-lo.

Para garantir que uma função atualize os cards criados pelo usuário e pelo app no stream do Chat, defina ActionResponse dinamicamente, dependendo se o app Chat ou um usuário criou a mensagem.

Se um usuário criou a mensagem, defina ActionResponse como UPDATE_USER_MESSAGE_CARDS.
Se um app de chat tiver criado a mensagem, defina ActionResponse como UPDATE_MESSAGE.

Há duas maneiras de fazer isso: especificando e verificando uma actionMethodName personalizada como parte da propriedade onclick do cartão anexado, que identifica a mensagem como criada pelo usuário, ou verificando se ela foi criada por um usuário.

Opção 1: verificar se há `actionMethodName`

Para usar o actionMethodName para gerenciar corretamente os eventos de clique nos cards visualizados, defina um actionMethodName personalizado como parte da propriedade onclick do card anexado:

JSON

. . . // Preview card details
{
  "textButton": {
    "text": "ASSIGN TO ME",
    "onClick": {

      // actionMethodName identifies the button to help determine the
      // appropriate ActionResponse.
      "action": {
        "actionMethodName": "assign",
      }
    }
  }
}
. . . // Preview card details

Com "actionMethodName": "assign" identificando o botão como parte de uma visualização de link, é possível retornar dinamicamente o ActionResponse correto verificando se há um actionMethodName correspondente:

Node.js

node/preview-link/update-card.js (em inglês)

Ver no GitHub

/**
 * Responds to messages that have links whose URLs match URL patterns
 * configured for link previewing.
 *
 * @param {Object} req Request sent from Google Chat.
 * @param {Object} res Response to send back.
 */
exports.onMessage = (req, res) => {
  if (req.method === 'GET' || !req.body.message) {
    res.send(
      'Hello! This function is meant to be used in a Google Chat Space.');
  }

  // Respond to button clicks on attached cards
  if (req.body.type === 'CARD_CLICKED') {
    // Checks for the presence of "actionMethodName": "assign" and sets
    // actionResponse.type to "UPDATE_USER"MESSAGE_CARDS" if present or
    // "UPDATE_MESSAGE" if absent.
    const actionResponseType = req.body.action.actionMethodName === 'assign' ?
      'UPDATE_USER_MESSAGE_CARDS' :
      'UPDATE_MESSAGE';

    if (req.body.action.actionMethodName === 'assign') {
      res.json({
        'actionResponse': {

          // Dynamically returns the correct actionResponse type.
          'type': actionResponseType,
        },

        // Preview card details
        'cardsV2': [{}],
      });
    }
  }
};

Apps Script

apps-script/preview-link/update-card.gs

Ver no GitHub

/**
 * Updates a card that was attached to a message with a previewed link.
 *
 * @param {Object} event The event object from Chat API.
 * @return {Object} Response from the Chat app. Either a new card attached to
 * the message with the previewed link, or an update to an existing card.
 */
function onCardClick(event) {
  // Checks for the presence of "actionMethodName": "assign" and sets
  // actionResponse.type to "UPDATE_USER"MESSAGE_CARDS" if present or
  // "UPDATE_MESSAGE" if absent.
  const actionResponseType = event.action.actionMethodName === 'assign' ?
    'UPDATE_USER_MESSAGE_CARDS' :
    'UPDATE_MESSAGE';

  if (event.action.actionMethodName === 'assign') {
    return assignCase(actionResponseType);
  }
}

/**
 * Updates a card to say that "You" are the assignee after clicking the Assign
 * to Me button.
 *
 * @param {String} actionResponseType Which actionResponse the Chat app should
 * use to update the attached card based on who created the message.
 * @return {Object} Response from the Chat app. Updates the card attached to
 * the message with the previewed link.
 */
function assignCase(actionResponseType) {
  return {
    'actionResponse': {

      // Dynamically returns the correct actionResponse type.
      'type': actionResponseType,
    },
    // Preview card details
    'cardsV2': [{}],
  };
}

Opção 2: verificar o tipo de remetente

Verifique se message.sender.type é HUMAN ou BOT. Se HUMAN, defina ActionResponse como UPDATE_USER_MESSAGE_CARDS. Caso contrário, defina ActionResponse como UPDATE_MESSAGE. Veja como fazer isso:

Node.js

node/preview-link/sender-type.js

Ver no GitHub

/**
 * Responds to messages that have links whose URLs match URL patterns
 * configured for link previewing.
 *
 * @param {Object} req Request sent from Google Chat.
 * @param {Object} res Response to send back.
 */
exports.onMessage = (req, res) => {
  if (req.method === 'GET' || !req.body.message) {
    res.send(
      'Hello! This function is meant to be used in a Google Chat Space.');
  }

  // Respond to button clicks on attached cards
  if (req.body.type === 'CARD_CLICKED') {
    // Checks whether the message event originated from a human or a Chat app
    // and sets actionResponse.type to "UPDATE_USER_MESSAGE_CARDS if human or
    // "UPDATE_MESSAGE" if Chat app.
    const actionResponseType = req.body.action.actionMethodName === 'HUMAN' ?
      'UPDATE_USER_MESSAGE_CARDS' :
      'UPDATE_MESSAGE';

    res.json({
      'actionResponse': {

        // Dynamically returns the correct actionResponse type.
        'type': actionResponseType,
      },

      // Preview card details
      'cardsV2': [{}],
    });
  }
};

Apps Script

apps-script/preview-link/sender-type.gs

Ver no GitHub

/**
 * Updates a card that was attached to a message with a previewed link.
 *
 * @param {Object} event The event object from Chat API.
 * @return {Object} Response from the Chat app. Either a new card attached to
 * the message with the previewed link, or an update to an existing card.
 */
function onCardClick(event) {
  // Checks whether the message event originated from a human or a Chat app
  // and sets actionResponse.type to "UPDATE_USER_MESSAGE_CARDS if human or
  // "UPDATE_MESSAGE" if Chat app.
  const actionResponseType = event.message.sender.type === 'HUMAN' ?
    'UPDATE_USER_MESSAGE_CARDS' :
    'UPDATE_MESSAGE';

  return assignCase(actionResponseType);
}

/**
 * Updates a card to say that "You" are the assignee after clicking the Assign
 * to Me button.
 *
 * @param {String} actionResponseType Which actionResponse the Chat app should
 * use to update the attached card based on who created the message.
 * @return {Object} Response from the Chat app. Updates the card attached to
 * the message with the previewed link.
 */
function assignCase(actionResponseType) {
  return {
    'actionResponse': {

      // Dynamically returns the correct actionResponse type.
      'type': actionResponseType,
    },
    // Preview card details
    'cardsV2': [{}],
  };
}

Um motivo comum para atualizar um cartão é em resposta a um clique de botão. Lembre-se do botão Atribuir a mim da seção anterior, Anexar um cartão. O exemplo completo a seguir atualiza o card e informa que ele está atribuído a "Você" depois que o usuário clica em Atribuir a mim. O exemplo define ActionResponse dinamicamente verificando o tipo de remetente.

Exemplo completo: caso, app de chat do atendimento ao cliente

Este é o código completo do Case-y, um app de chat que mostra links para casos compartilhados em um espaço do Chat em que os agentes de atendimento ao cliente colaboram.

Node.js

node/preview-link/preview-link.js

Ver no GitHub

/**
 * Responds to messages that have links whose URLs match URL patterns
 * configured for link previewing.
 *
 * @param {Object} req Request sent from Google Chat.
 * @param {Object} res Response to send back.
 */
exports.onMessage = (req, res) => {
  if (req.method === 'GET' || !req.body.message) {
    res.send(
      'Hello! This function is meant to be used in a Google Chat Space.');
  }

  // Checks for the presence of event.message.matchedUrl and attaches a card
  // if present
  if (req.body.message.matchedUrl) {
    res.json(createMessage());
  }

  // Respond to button clicks on attached cards
  if (req.body.type === 'CARD_CLICKED') {
    // Checks whether the message event originated from a human or a Chat app
    // and sets actionResponse.type to "UPDATE_USER_MESSAGE_CARDS if human or
    // "UPDATE_MESSAGE" if Chat app.
    const actionResponseType = req.body.action.actionMethodName === 'HUMAN' ?
      'UPDATE_USER_MESSAGE_CARDS' :
      'UPDATE_MESSAGE';

    if (req.body.action.actionMethodName === 'assign') {
      res.json(createMessage(actionResponseType, 'You'));
    }
  }

  // If the Chat app doesn’t detect a link preview URL pattern, it says so.
  res.json({'text': 'No matchedUrl detected.'});
};

/**
 * Message to create a card with the correct response type and assignee.
 *
 * @param {string} actionResponseType
 * @param {string} assignee
 * @return {Object} a card with URL preview
 */
function createMessage(
  actionResponseType = 'UPDATE_USER_MESSAGE_CARDS',
  assignee = 'Charlie'
) {
  return {
    'actionResponse': {'type': actionResponseType},
    'cardsV2': [
      {
        'cardId': 'previewLink',
        'card': {
          'header': {
            'title': 'Example Customer Service Case',
            'subtitle': 'Case basics',
          },
          'sections': [
            {
              'widgets': [
                {'keyValue': {'topLabel': 'Case ID', 'content': 'case123'}},
                {'keyValue': {'topLabel': 'Assignee', 'content': assignee}},
                {'keyValue': {'topLabel': 'Status', 'content': 'Open'}},
                {
                  'keyValue': {
                    'topLabel': 'Subject', 'content': 'It won"t turn on...',
                  },
                },
              ],
            },
            {
              'widgets': [
                {
                  'buttons': [
                    {
                      'textButton': {
                        'text': 'OPEN CASE',
                        'onClick': {
                          'openLink': {
                            'url': 'https://support.example.com/orders/case123',
                          },
                        },
                      },
                    },
                    {
                      'textButton': {
                        'text': 'RESOLVE CASE',
                        'onClick': {
                          'openLink': {
                            'url': 'https://support.example.com/orders/case123?resolved=y',
                          },
                        },
                      },
                    },
                    {
                      'textButton': {
                        'text': 'ASSIGN TO ME',
                        'onClick': {
                          'action': {
                            'actionMethodName': 'assign',
                          },
                        },
                      },
                    },
                  ],
                },
              ],
            },
          ],
        }
      },
    ],
  };
}

Apps Script

apps-script/preview-link/preview-link.gs

Ver no GitHub

/**
 * Responds to messages that have links whose URLs match URL patterns
 * configured for link previews.
 *
 * @param {Object} event The event object from Chat API.
 * @return {Object} Response from the Chat app attached to the message with
 * the previewed link.
 */
function onMessage(event) {
  // Checks for the presence of event.message.matchedUrl and attaches a card
  // if present
  if (event.message.matchedUrl) {
    return {
      'actionResponse': {
        'type': 'UPDATE_USER_MESSAGE_CARDS',
      },
      'cardsV2': [{
        'cardId': 'previewLink',
        'card': {
          'header': {
            'title': 'Example Customer Service Case',
            'subtitle': 'Case basics',
          },
          'sections': [{
            'widgets': [
              {'keyValue': {'topLabel': 'Case ID', 'content': 'case123'}},
              {'keyValue': {'topLabel': 'Assignee', 'content': 'Charlie'}},
              {'keyValue': {'topLabel': 'Status', 'content': 'Open'}},
              {
                'keyValue': {
                  'topLabel': 'Subject', 'content': 'It won\'t turn on...',
                }
              },
            ],
          },
          {
            'widgets': [{
              'buttons': [
                {
                  'textButton': {
                    'text': 'OPEN CASE',
                    'onClick': {
                      'openLink': {
                        'url': 'https://support.example.com/orders/case123',
                      },
                    },
                  },
                },
                {
                  'textButton': {
                    'text': 'RESOLVE CASE',
                    'onClick': {
                      'openLink': {
                        'url': 'https://support.example.com/orders/case123?resolved=y',
                      },
                    },
                  },
                },
                {
                  'textButton': {
                    'text': 'ASSIGN TO ME',
                    'onClick': {'action': {'actionMethodName': 'assign'}}
                  },
                },
              ],
            }],
          }],
        },
      }],
    };
  }

  // If the Chat app doesn’t detect a link preview URL pattern, it says so.
  return {'text': 'No matchedUrl detected.'};
}

/**
 * Updates a card that was attached to a message with a previewed link.
 *
 * @param {Object} event The event object from Chat API.
 * @return {Object} Response from the Chat app. Either a new card attached to
 * the message with the previewed link, or an update to an existing card.
 */
function onCardClick(event) {
  // Checks whether the message event originated from a human or a Chat app
  // and sets actionResponse to "UPDATE_USER_MESSAGE_CARDS if human or
  // "UPDATE_MESSAGE" if Chat app.
  const actionResponseType = event.message.sender.type === 'HUMAN' ?
    'UPDATE_USER_MESSAGE_CARDS' :
    'UPDATE_MESSAGE';

  // To respond to the correct button, checks the button's actionMethodName.
  if (event.action.actionMethodName === 'assign') {
    return assignCase(actionResponseType);
  }
}

/**
 * Updates a card to say that "You" are the assignee after clicking the Assign
 * to Me button.
 *
 * @param {String} actionResponseType Which actionResponse the Chat app should
 * use to update the attached card based on who created the message.
 * @return {Object} Response from the Chat app. Updates the card attached to
 * the message with the previewed link.
 */
function assignCase(actionResponseType) {
  return {
    'actionResponse': {

      // Dynamically returns the correct actionResponse type.
      'type': actionResponseType,
    },
    'cardsV2': [{
      'cardId': 'assignCase',
      'card': {
        'header': {
          'title': 'Example Customer Service Case',
          'subtitle': 'Case basics',
        },
        'sections': [{
          'widgets': [
            {'keyValue': {'topLabel': 'Case ID', 'content': 'case123'}},
            {'keyValue': {'topLabel': 'Assignee', 'content': 'You'}},
            {'keyValue': {'topLabel': 'Status', 'content': 'Open'}},
            {
              'keyValue': {
                'topLabel': 'Subject', 'content': 'It won\'t turn on...',
              }
            },
          ],
        },
        {
          'widgets': [{
            'buttons': [
              {
                'textButton': {
                  'text': 'OPEN CASE',
                  'onClick': {
                    'openLink': {
                      'url': 'https://support.example.com/orders/case123',
                    },
                  },
                },
              },
              {
                'textButton': {
                  'text': 'RESOLVE CASE',
                  'onClick': {
                    'openLink': {
                      'url': 'https://support.example.com/orders/case123?resolved=y',
                    },
                  },
                },
              },
              {
                'textButton': {
                  'text': 'ASSIGN TO ME',
                  'onClick': {'action': {'actionMethodName': 'assign'}},
                },
              },
            ],
          }],
        }],
      },
    }],
  };
}

Limites e considerações

Ao configurar visualizações de links no app Chat, observe estes limites e considerações:

Cada app Chat aceita visualizações de link de até cinco padrões de URL.
Os apps de chat exibem um link por mensagem. Se vários links visíveis estiverem presentes em uma única mensagem, apenas o primeiro link poderá ser visualizado.
Os apps de chat só visualizam links que começam com https://. Portanto, https://support.example.com/cases/ visualiza, mas support.example.com/cases/ não.
A menos que a mensagem inclua outras informações enviadas para o app Chat, como um comando de barra, somente o URL do link será enviado para esse app por visualizações de link.
Os cards anexados aos links visualizados aceitam apenas uma ActionResponse do tipo UPDATE_USER_MESSAGE_CARDS e somente em resposta a solicitações síncronas de eventos de chat. As visualizações de link não aceitam UPDATE_MESSAGE nem solicitações assíncronas para atualizar cartões anexados a um link visualizado por meio da API REST do Chat. Para saber mais, consulte Atualizar um cartão.

Depurar visualizações de link

Ao implementar as visualizações de link, talvez seja necessário depurar o app Chat lendo os registros do app. Para ler os registros, visite o Explorador de registros no Console do Google Cloud.

Visualizar links

Como funciona a visualização de links

Configurar visualizações de links

Visualizar um link

JSON

Responder com uma mensagem de texto

Node.js

Apps Script

Anexar um cartão

Node.js

Apps Script

Atualizar um cartão

Opção 1: verificar se há actionMethodName

JSON

Node.js

Apps Script

Opção 2: verificar o tipo de remetente

Node.js

Apps Script

Exemplo completo: caso, app de chat do atendimento ao cliente

Node.js

Apps Script

Limites e considerações

Depurar visualizações de link

Opção 1: verificar se há `actionMethodName`