Masz 5 minut? Pomóż nam ulepszać dokumentację Google Chat dla deweloperów, wypełniając krótką ankietę.

Wyświetl podgląd linków

Aby zapobiec przełączaniu kontekstu, gdy użytkownicy udostępniają link w Google Chat, aplikacja Google Chat może wyświetlić podgląd linku, załączając do wiadomości kartę, która zawiera więcej informacji i umożliwia podejmowanie działań bezpośrednio z Google Chat.

Wyobraź sobie na przykład pokój Google Chat, który zawiera 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ą w pokoju czatu linki do zgłoszeń do zespołu obsługi klienta. Za każdym razem, gdy to robią, współpracownicy muszą otworzyć link do zgłoszenia, aby zobaczyć szczegóły takie jak przypisana osoba, stan i temat. Jeśli ktoś chce przejąć własność zgłoszenia lub zmienić jego stan, musi otworzyć link.

Podgląd linku umożliwia aplikacji Case-y, która znajduje się w pokoju, załączanie karty z przypisaną osobą, statusem i tematem za każdym razem, gdy ktoś udostępni link do zgłoszenia. Przyciski na karcie umożliwiają agentom przejęcie własności zgłoszenia i zmianę stanu bezpośrednio z poziomu czatu.

Gdy ktoś doda do swojej wiadomości link, pojawi się ikona informująca, że aplikacja do obsługi czatu może zobaczyć podgląd linku.

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

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

aplikacja do obsługi czatu wyświetlająca podgląd linku, załączając kartę do wiadomości;

Karta zawiera dodatkowe informacje o linku, m.in. elementy interaktywne, takie jak przyciski. Aplikacja do obsługi czatu może aktualizować załączoną kartę w odpowiedzi na interakcje użytkownika, np. kliknięcie przycisku.

Jeśli ktoś nie chce, aby aplikacja Google Chat wyświetlała podgląd linku przez załączenie karty do wiadomości, może wyłączyć podgląd, klikając w elemencie podglądu. Użytkownicy mogą w każdej chwili usunąć dołączoną kartę, klikając Usuń podgląd.

Zarejestruj określone linki, na przykład example.com, support.example.com i support.example.com/cases/, jako wzorce adresów URL na stronie konfiguracji aplikacji do obsługi czatu w konsoli Google Cloud, aby aplikacja do obsługi czatu miała ich podgląd.

Menu konfiguracji podglądu linków

  1. Otwórz konsolę Google Cloud.
  2. Obok opcji „Google Cloud” kliknij strzałkę w dół i otwórz projekt aplikacji do obsługi czatu.
  3. W polu wyszukiwania wpisz Google Chat API i kliknij Google Chat API.
  4. Kliknij Zarządzaj > Konfiguracja.
  5. W sekcji Podgląd linków dodaj lub zmień 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ół .

  6. W polu Wzorzec hosta wpisz domenę wzorca adresu URL. Aplikacja Google Chat będzie wyświetlać podgląd linków do tej domeny.

    Jeśli chcesz, aby linki do podglądu aplikacji do obsługi czatu w konkretnej subdomenie, np. subdomain.example.com, były dostępne w subdomenie.

    Aby linki do podglądu aplikacji do obsługi czatu w całej domenie były dostępne w całej domenie, jako subdomenę podaj symbol wieloznaczny z gwiazdką (*). Na przykład *.example.com pasuje do subdomain.example.com i any.number.of.subdomains.example.com.

  7. 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 pole Prefiks ścieżki puste.

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

  8. Kliknij Gotowe.

  9. Kliknij Zapisz.

Od tej pory za każdym razem, gdy ktoś doda link pasujący do wzorca adresu URL podglądu linku do wiadomości w pokoju czatu, który zawiera aplikację Google Chat, aplikacja wyświetli podgląd tego linku.

Po skonfigurowaniu podglądu linku dla danego linku aplikacja Google Chat może rozpoznać link i wyświetlić jego podgląd, dołączając do niego więcej informacji.

Jeśli w pokojach czatu, które obejmują Twoją aplikację Google Chat, wiadomość zawiera link pasujący do wzorca adresu URL podglądu linku, aplikacja do obsługi czatu otrzyma zdarzenie interakcji MESSAGE. Ładunek JSON dla zdarzenia interakcji zawiera pole matchedUrl:

JSON

message {

  . . . // other message attributes redacted

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

  . . . // other message attributes redacted

}

Dzięki sprawdzeniu obecności pola matchedUrl w ładunku zdarzeń MESSAGE aplikacja do obsługi czatu może dodać informacje do wiadomości z linkiem widocznym na podglądzie. W aplikacji do obsługi czatu możesz odpowiedzieć SMS-em lub dołączyć kartę.

Odpowiedz SMS-em

Aby uzyskać proste odpowiedzi, aplikacja do obsługi czatu może wyświetlić podgląd linku, wysyłając w odpowiedzi prostego SMS-a z linkiem. W tym przykładzie załączamy wiadomość, która powtarza adres URL linku pasujący do wzorca adresu URL podglądu linku.

Node.js

węzeł/link-podglądu/simple-text-message.js
/**
 * 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
/**
 * 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łącz kartę

Aby dołączyć kartę do linku na podglądzie, zwróć ActionResponse typu UPDATE_USER_MESSAGE_CARDS. W tym przykładzie załączamy prostą kartę.

aplikacja do obsługi czatu wyświetlająca podgląd linku, załączając kartę do wiadomości;

Node.js

węzeł/link-podglądu/załącznik-karty.js
/**
 * 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
/**
 * 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.'};
}

Aktualizacja karty

Aby zaktualizować kartę dołączoną do linku na podglądzie, zwróć ActionResponse typu UPDATE_USER_MESSAGE_CARDS. Aplikacje do obsługi czatu mogą aktualizować karty z podglądem linków tylko w odpowiedzi na zdarzenie interakcji z aplikacją Google Chat. Aplikacje do obsługi czatu nie mogą aktualizować tych kart przez asynchroniczne wywoływanie interfejsu Chat API.

Podgląd linku nie obsługuje zwracania ActionResponse typu UPDATE_MESSAGE. Ponieważ aplikacja UPDATE_MESSAGE aktualizuje całą wiadomość, a nie tylko kartę, działa tylko wtedy, gdy aplikacja do obsługi czatu utworzyła oryginalną wiadomość. Podgląd linku powoduje dołączenie karty do wiadomości utworzonej przez użytkownika, więc aplikacja Google Chat nie ma uprawnień do jej aktualizowania.

Aby funkcja aktualizowała zarówno karty utworzone przez użytkowników, jak i te utworzone w aplikacjach w strumieniu czatu, ustaw dynamicznie wartość ActionResponse na podstawie tego, czy wiadomość utworzyła aplikacja Google Chat, czy to użytkownik.

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

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

Opcja 1. Sprawdź actionMethodName

Aby za pomocą narzędzia actionMethodName prawidłowo obsługiwać zdarzenia interakcji (CARD_CLICKED) na kartach wyświetlanych w podglądzie, ustaw niestandardową wartość actionMethodName jako część właściwości onclick dołą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żesz dynamicznie zwracać prawidłową wartość ActionResponse, sprawdzając, czy występuje pasujący actionMethodName:

Node.js

węzeł/link-podglądu/karta-aktualizacji.js
/**
 * 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
/**
 * 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 ma wartość HUMAN lub BOT. Jeśli HUMAN, ustaw ActionResponse na UPDATE_USER_MESSAGE_CARDS. W przeciwnym razie ustaw ActionResponse na UPDATE_MESSAGE. Aby to zrobić:

Node.js

węzeł/link-podglądu/typ-nadawcy.js
/**
 * 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
/**
 * 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 reakcja na kliknięcie przycisku. Wycofaj przycisk Przypisz do mnie z poprzedniej sekcji (Załącz kartę). Ten pełny przykład spowoduje zaktualizowanie karty w taki sposób, że po kliknięciu przez użytkownika Przypisz do mnie będzie ona przypisana do „Ty”. Ten przykład dynamicznie ustawia ActionResponse przez sprawdzenie typu nadawcy.

Pełny przykład: aplikacja Google Chat do obsługi klienta

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

Node.js

węzeł/link-do-podglądu/link-podglądu.js
/**
 * 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
/**
 * 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 kwestie

Podczas konfigurowania podglądu linków w aplikacji do obsługi czatu weź pod uwagę te ograniczenia i uwagi:

  • Każda aplikacja do obsługi czatu obsługuje podgląd linków w przypadku maksymalnie 5 wzorców adresów URL.
  • W aplikacjach do obsługi czatu wyświetla się podgląd 1 linku na wiadomość. Jeśli w jednej wiadomości znajduje się kilka linków do podglądu, pojawia się tylko pierwszy z nich.
  • Czaty w aplikacjach do obsługi czatu wyświetlają tylko linki zaczynające się od https://, więc opcja podglądu https://support.example.com/cases/ nie jest dostępna, a support.example.com/cases/ – nie.
  • Jeśli wiadomość nie zawiera innych informacji wysyłanych do aplikacji Google Chat, takich jak polecenie po ukośniku, za pomocą podglądu linków do aplikacji Google Chat jest wysyłany tylko adres URL linku.
  • Karty dołączone do linków w podglądzie obsługują tylko element ActionResponse typu UPDATE_USER_MESSAGE_CARDS i tylko w odpowiedzi na zdarzenie interakcji z aplikacją Google Chat. Podgląd linków nie obsługuje UPDATE_MESSAGE ani żądań asynchronicznych w celu aktualizacji kart dołączonych do linku, którego podgląd pokazano na podglądzie, za pomocą interfejsu Chat API. Więcej informacji znajdziesz w artykule Aktualizowanie karty.

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