Wyświetl podgląd linków

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

Wyobraź sobie na przykład pokój Google Chat, w którym znajdują się wszyscy pracownicy obsługi klienta firmy oraz aplikacja do obsługi czatu o nazwie Case-y. Pracownicy obsługi klienta często udostępniają w pokoju czatu linki do zgłoszeń z obsługą klienta. Za każdym razem, gdy to zrobią, ich współpracownicy muszą otworzyć taki link, aby zobaczyć szczegóły takie jak osoba, której przypisano temat, stan i temat. Jeśli ktoś chce przejąć własność zgłoszenia lub zmienić jego status, musi otworzyć odpowiedni link.

Podgląd linku umożliwia aplikacji Case-y dostępną w pokoju możliwość dołączania karty z przypisaną osobą, stanem i tematem za każdym razem, gdy ktoś udostępni link do zgłoszenia. Przyciski na karcie umożliwiają pracownikom obsługi klienta przejęcie własności zgłoszenia i zmianę stanu bezpośrednio na czacie.

Gdy ktoś doda do swojej wiadomości link, pojawi się element informujący o tym, że aplikacja Google Chat może wyświetlić 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 następnie generuje i dołącza kartę do wiadomości.

Aplikacja do obsługi czatu wyświetla podgląd linku, załączając kartę do wiadomości

Oprócz linku karta zawiera dodatkowe informacje o linku, w tym interaktywne elementy, 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 ktoś nie chce, aby aplikacja Google Chat wyświetlała podgląd linku przez załączenie karty do wiadomości, może zablokować wyświetlanie podglądu, klikając na 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 mogła je wyświetlać.

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.

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

    Aby w całej domenie były dostępne linki do podglądu aplikacji do obsługi czatu, 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 w przypadkach hostowanych w domenie support.example.com/cases/, wpisz cases/.

  8. Kliknij Gotowe.

  9. Kliknij Zapisz.

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

Gdy skonfigurujesz podgląd danego linku, aplikacja Google Chat będzie w stanie 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ść użytkownika zawiera link pasujący do wzorca adresu URL podglądu linku, aplikacja Google Chat otrzyma zdarzenie interakcji MESSAGE. Ładunek JSON zdarzenia interakcji zawiera pole matchedUrl:

JSON

"message": {

  . . . // other message attributes redacted

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

  . . . // other message attributes redacted

}

Gdy sprawdzisz obecność pola matchedUrl w ładunku zdarzeń MESSAGE, aplikacja do obsługi czatu będzie mogła dodać informacje do wiadomości za pomocą linku wyświetlonego na podglądzie. W aplikacji Google Chat możesz wysłać odpowiedź zwykłego SMS-a lub dołączyć kartę.

Odpowiedz SMS-em

W przypadku prostych odpowiedzi aplikacja Google Chat może wyświetlić podgląd linku, wysyłając w odpowiedzi prostego SMS-a. W tym przykładzie załączamy wiadomość, która powtarza adres URL linku zgodny ze wzorcem adresu URL podglądu linku.

Node.js

node/preview-link/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) {
    return 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) {
    return 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.
  return 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.'};
}

Dołącz kartę

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

Aplikacja do obsługi czatu wyświetla podgląd linku, załączając kartę do wiadomości

Node.js

node/preview-link/attach-card.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) {
    return 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) {
    return 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.
  return 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 wyświetlanego 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. Aplikacja UPDATE_MESSAGE aktualizuje całą wiadomość, a nie tylko kartę, więc działa tylko wtedy, gdy aplikacja Google Chat utworzyła oryginalną wiadomość. Podgląd linku powoduje dołączenie karty do wiadomości utworzonej przez użytkownika, przez co aplikacja Google Chat nie ma uprawnień do jej aktualizowania.

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

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

Można to zrobić na dwa sposoby: określić i sprawdzić własną actionMethodName właściwość onclick na załączonej karcie (która wskazuje, że wiadomość została utworzona przez użytkownika) lub sprawdzić, czy wiadomość została utworzona przez użytkownika.

Opcja 1. Sprawdź, czy actionMethodName

Aby używać actionMethodName do prawidłowej obsługi zdarzeń 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 parametr "actionMethodName": "assign" identyfikuje przycisk w podglądzie linku, można dynamicznie zwracać prawidłową wartość ActionResponse, sprawdzając zgodność z parametrem actionMethodName:

Node.js

node/preview-link/update-card.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) {
    return 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') {
      return 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 to HUMAN czy BOT. Jeśli ustawiona jest wartość HUMAN, ustaw ActionResponse na UPDATE_USER_MESSAGE_CARDS. W przeciwnym razie ustaw ActionResponse na UPDATE_MESSAGE. Aby to zrobić:

Node.js

node/preview-link/sender-type.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) {
    return 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';

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

Częstym powodem aktualizacji karty jest reakcja na kliknięcie przycisku. Przywołaj przycisk Przypisz do mnie z poprzedniej sekcji: Załącz kartę. Ten pełny przykład aktualizuje kartę tak, aby po kliknięciu przez użytkownika Przypisz do mnie wyświetlała się informacja, że jest ona przypisana do użytkownika „Ty”. Ten przykład dynamicznie ustawia ActionResponse, sprawdzając typ nadawcy.

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

Oto pełny kod aplikacji Case-y, w której wyświetlają się linki do zgłoszeń udostępnionych w pokoju czatu, nad którym współpracują pracownicy obsługi klienta.

Node.js

node/preview-link/preview-link.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) {
    return 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';

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

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

  // If the Chat app doesn’t detect a link preview URL pattern, it says so.
  return 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 uwagi

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

  • Każda aplikacja do obsługi czatu obsługuje podgląd linków 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, wyświetli się tylko pierwszy z nich.
  • W aplikacjach do obsługi czatu można wyświetlać podgląd tylko linków rozpoczynających się od https://, więc https://support.example.com/cases/ podgląd jest możliwy, ale support.example.com/cases/ tak nie jest.
  • Jeśli wiadomość nie zawiera innych informacji wysyłanych do aplikacji Google Chat, takich jak polecenie po ukośniku, podgląd linków jest wysyłany do aplikacji Google Chat tylko adres URL linku.
  • Karty dołączone do linków wyświetlanych 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 zaktualizowania kart dołączonych do linku, którego podgląd wyświetlano, za pomocą interfejsu Chat API. Więcej informacji znajdziesz w artykule Aktualizowanie karty.

Podczas wdrażania 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.