Ta strona została przetłumaczona przez Cloud Translation API.

Wyświetl podgląd linków

Aby zapobiec zmianie kontekstu, gdy użytkownicy udostępniają link w Google Chat, mogą wyświetlić podgląd tego linku, umieszczając w wiadomości kartę, która zawiera więcej informacji i umożliwia użytkownikom podjęcie działania bezpośrednio z Google Chat.

Weźmy na przykład pokój w Google Chat obejmujący wszystkich pracowników obsługi klienta firmy oraz aplikację do obsługi czatu o nazwie Case-y. Pracownicy obsługi klienta często udostępniają linki do zgłoszeń do obsługi klienta w pokoju czatu. Za każdym razem, gdy robią to przez współpracownika, muszą otworzyć link do zgłoszenia, aby zobaczyć szczegółowe informacje, takie jak osoba, której przypisano zadanie, status lub temat. I podobnie, jeśli ktoś chce przejąć własność zgłoszenia lub zmienić jego stan, musi otworzyć link.

Podgląd linków pozwala zakwalifikowanej do pokoju osoby kontaktowej w aplikacji Case-y do dołączania karty z przydzielonym użytkownikiem, stanem i tematem za każdym razem, gdy ktoś udostępni link do zgłoszenia. Przyciski na karcie pozwalają agentom przejąć własność zgłoszenia i zmienić jego stan bezpośrednio w oknie czatu.

Jak działa podgląd linków

Gdy ktoś doda link do wiadomości, pojawi się element, który informuje, że aplikacja Google Chat może wyświetlić podgląd linku.

Element wskazujący, że aplikacja do obsługi czatu może mieć podgląd linku

Po wysłaniu wiadomości link jest wysyłany do aplikacji Google Chat, która generuje ją i załącza do niej kartę.

Aplikacja Google Chat wyświetlająca podgląd linku przez załączenie karty do wiadomości

Oprócz linku karta zawiera dodatkowe informacje, w tym elementy interaktywne, takie jak przyciski. Aplikacja Google Chat może aktualizować załączoną kartę w odpowiedzi na interakcje użytkowników, np. kliknięcia przycisków.

Jeśli użytkownik nie chce, aby aplikacja Google Chat wyświetlała podgląd linku, załączając kartę do wiadomości, może zablokować podgląd, klikając na elemencie podglądu. Użytkownicy mogą usunąć załączoną kartę w dowolnym momencie, klikając Usuń podgląd.

Skonfiguruj podgląd linków

Zarejestruj określone linki (np. example.com, support.example.com i support.example.com/cases/) jako wzorce adresów URL na stronie konfiguracji aplikacji Google Chat w konsoli Google Cloud, aby można było wyświetlać ich podgląd w aplikacji Google Chat.

Menu konfiguracji podglądu linku

Otwórz konsolę Google Cloud.
Obok „Google Cloud” kliknij strzałkę w dół i otwórz projekt aplikacji do obsługi czatu.
W polu wyszukiwania wpisz Google Chat API i kliknij Google Chat API.
Kliknij Zarządzaj > Konfiguracja.
W sekcji Podgląd linków dodaj lub edytuj wzorzec adresu URL.
1. Aby skonfigurować podgląd linków dla nowego wzorca adresu URL, kliknij Dodaj wzorzec adresu URL.
2. Aby edytować konfigurację istniejącego wzorca adresu URL, kliknij strzałkę w dół .
W polu Wzorzec hosta wpisz domenę wzorca adresu URL. Aplikacja Google Chat wyświetli podgląd linków do tej domeny.

Aby w przypadku określonej subdomeny, np. subdomain.example.com, były wyświetlane linki do podglądu aplikacji do obsługi czatu, uwzględnij tę subdomenę.

Aby w całej domenie były wyświetlane linki do podglądu aplikacji do obsługi czatu, określ symbol wieloznaczny z gwiazdką (*). Na przykład *.example.com pasuje do elementów subdomain.example.com i any.number.of.subdomains.example.com.
W polu Prefiks ścieżki wpisz ścieżkę, którą chcesz dołączyć do domeny wzorca hosta.

Aby dopasować wszystkie adresy URL w domenie wzorca hosta, pozostaw Prefiks ścieżki pusty.

Jeśli na przykład wzorzec hosta to support.example.com, aby dopasować adresy URL do zgłoszeń hostowanych w domenie support.example.com/cases/, wpisz cases/.
Kliknij Gotowe.
Kliknij Zapisz.

Od teraz, gdy ktoś dołączy link, który pasuje do wzorca adresu URL podglądu linku do wiadomości w pokoju czatu zawierającej Twoją aplikację do obsługi czatu, aplikacja wyświetli podgląd.

Wyświetlanie podglądu linku

Gdy skonfigurujesz podgląd linku dla danego linku, aplikacja Google Chat może rozpoznawać i wyświetlać podgląd linku, dołączając do niego więcej informacji.

W pokojach czatu, które zawierają aplikację do obsługi czatu, gdy wiadomość zawiera link zgodny ze wzorcem adresu URL podglądu linku, jest on wysyłany do aplikacji do obsługi czatu jako atrybut matchedUrl w obiekcie message:

JSON

message {

  . . . // other message attributes redacted

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

  . . . // other message attributes redacted

}

Aplikacja Google Chat może dodać informacje do wiadomości z linkiem podglądu, sprawdzając, czy w obiekcie message występuje atrybut matchedUrl. Twoja aplikacja do obsługi czatu może wysłać prostą wiadomość lub dołączyć kartę.

Odpowiedz SMS-em

Aby uzyskać proste odpowiedzi, aplikacja Google Chat może wyświetlić podgląd linku, wysyłając prostą wiadomość tekstową. Ten przykład załącza wiadomość, która powtarza adres URL linku, który pasuje do wzorca adresu URL podglądu linku.

Node.js

węzeł/podgląd-linku/prosty-tekst-wiadomości.js

Wyświetl w GitHubie

/**
 * 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.'});
};

Google Apps Script

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

Wyświetl w GitHubie

/**
 * 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.'};
}

Załączanie karty

Aby dołączyć kartę do linku do podglądu, zwróć ActionResponse typu UPDATE_USER_MESSAGE_CARDS. Ten przykład załącza prostą kartę.

Aplikacja Google Chat wyświetlająca podgląd linku przez załączenie karty do wiadomości

Node.js

node/preview-link/attach-card.js

Wyświetl w GitHubie

/**
 * 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.'});
};

Google Apps Script

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

Wyświetl w GitHubie

/**
 * 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.'};
}

Aktualizowanie karty

Aby zaktualizować kartę załączoną do podglądu, zwracaj ActionResponse typu UPDATE_USER_MESSAGE_CARDS. Karty załączone do podglądu linków są aktualizowane tylko w odpowiedzi na synchroniczne żądania ze zdarzeń Google Chat. Asynchroniczne prośby o zaktualizowanie kart dołączonych do linku do podglądu za pomocą interfejsu Chat REST API nie są obsługiwane.

Podgląd linku nie obsługuje zwrócenia ActionResponse typu UPDATE_MESSAGE. UPDATE_MESSAGE aktualizuje całą wiadomość, a nie tylko kartę. Działa tylko wtedy, gdy oryginalna wiadomość została utworzona w aplikacji Google Chat. Podgląd linków załącza kartę do wiadomości utworzonej przez użytkownika, dlatego aplikacja Google Chat nie ma uprawnień do jej aktualizowania.

Aby funkcja mogła aktualizować karty utworzone przez użytkowników i przez użytkowników w strumieniu czatu, dynamicznie ustawiaj ActionResponse w zależności od tego, czy aplikacja Google Chat czy użytkownik utworzył wiadomość.

Jeśli użytkownik utworzył wiadomość, w polu ActionResponse ustaw wartość UPDATE_USER_MESSAGE_CARDS.
Jeśli wiadomość została utworzona przez aplikację do obsługi czatu, w polu ActionResponse ustaw wartość UPDATE_MESSAGE.

Możesz to zrobić na 2 sposoby: określając i sprawdzając niestandardowy element actionMethodName w ramach właściwości onclick na załączonej karcie (która określa, że wiadomość została utworzona przez użytkownika) lub sprawdzając, czy wiadomość została utworzona przez użytkownika.

Opcja 1. Sprawdź, czy nie ma `actionMethodName`

Aby element actionMethodName prawidłowo obsługiwał zdarzenia kliknięcia karty na wyświetlanych kartach, ustaw właściwość actionMethodName jako część właściwości onclick załączonej karty:

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

Gdy "actionMethodName": "assign" identyfikuje przycisk w podglądzie linku, może dynamicznie zwracać prawidłowy numer ActionResponse, sprawdzając dopasowanie actionMethodName:

Node.js

węzeł/podgląd-linku/aktualizacja-karty.js

Wyświetl w GitHubie

/**
 * 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': [{}],
      });
    }
  }
};

Google Apps Script

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

Wyświetl w GitHubie

/**
 * 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': [{}],
  };
}

Opcja 2. Sprawdź typ nadawcy

Sprawdź, czy message.sender.type to HUMAN czy BOT. Jeśli HUMAN, ustaw ActionResponse na UPDATE_USER_MESSAGE_CARDS, w innym przypadku ActionResponse na UPDATE_MESSAGE. W tym celu:

Node.js

węzeł/link-podglądu/typ-nadawcy.js

Wyświetl w GitHubie

/**
 * 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': [{}],
    });
  }
};

Google Apps Script

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

Wyświetl w GitHubie

/**
 * 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': [{}],
  };
}

Typowym powodem aktualizacji karty jest kliknięcie przycisku. Ponownie kliknij przycisk Przypisz do mnie z poprzedniej sekcji: Załącz kartę. Poniższy pełny przykład powoduje zaktualizowanie karty, tak by po kliknięciu Przypisz do mnie użytkownik zobaczył kartę „Ty”. Ten przykład dynamicznie ustawia ActionResponse, sprawdzając typ nadawcy.

Przykład: korzystanie z aplikacji Google Chat do obsługi klienta

Oto pełny kod aplikacji Case-y – aplikacji do obsługi czatu, która wyświetla podgląd linków do zgłoszeń udostępnionych w pokoju czatu, z którym współpracują pracownicy obsługi klienta.

Node.js

node/preview-link/preview-link.js

Wyświetl w GitHubie

/**
 * 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',
                          },
                        },
                      },
                    },
                  ],
                },
              ],
            },
          ],
        }
      },
    ],
  };
}

Google Apps Script

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

Wyświetl w GitHubie

/**
 * 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'}},
                },
              },
            ],
          }],
        }],
      },
    }],
  };
}

Ograniczenia i uwagi

Podczas konfigurowania podglądu linków w aplikacji Google Chat pamiętaj o tych ograniczeniach i uwagach:

Każda aplikacja do obsługi czatu obsługuje podgląd maksymalnie 5 wzorców linków.
W aplikacji do obsługi czatu możesz zobaczyć 1 link na wiadomość. Jeśli w jednej wiadomości znajduje się wiele linków do podglądu, wyświetlany jest tylko pierwszy link.
W przypadku aplikacji do obsługi czatu dostępny jest tylko podgląd linków, które zaczynają się od wartości https://, więc https://support.example.com/cases/ – podglądy – support.example.com/cases/ nie.
Jeśli wiadomość nie zawiera innych informacji wysyłanych do aplikacji do obsługi czatu, np. polecenia po ukośniku, tylko podgląd linku jest wysyłany do aplikacji Google Chat.
Karty dołączone do podglądu linków obsługują tylko typ ActionResponse typu UPDATE_USER_MESSAGE_CARDS i odpowiadają tylko na synchroniczne żądania ze zdarzeń Google Chat. Podgląd linków nie obsługuje żądań UPDATE_MESSAGE ani asynchronicznych żądań aktualizacji kart dołączonych do podglądu linku przez Chat REST API. Więcej informacji znajdziesz w sekcji Aktualizowanie karty.

Podgląd linku do debugowania

Podczas implementacji podglądu linków może być konieczne debugowanie aplikacji Google Chat przez odczyt jej dzienników. Aby odczytać logi, otwórz eksplorator logów w konsoli Google Cloud.

Wyświetl podgląd linków

Jak działa podgląd linków

Skonfiguruj podgląd linków

Wyświetlanie podglądu linku

JSON

Odpowiedz SMS-em

Node.js

Google Apps Script

Załączanie karty

Node.js

Google Apps Script

Aktualizowanie karty

Opcja 1. Sprawdź, czy nie ma actionMethodName

JSON

Node.js

Google Apps Script

Opcja 2. Sprawdź typ nadawcy

Node.js

Google Apps Script

Przykład: korzystanie z aplikacji Google Chat do obsługi klienta

Node.js

Google Apps Script

Ograniczenia i uwagi

Podgląd linku do debugowania

Opcja 1. Sprawdź, czy nie ma `actionMethodName`