Wyświetl podgląd linków

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

Wyobraź sobie na przykład pokój Google Chat ze wszystkimi pracownikami obsługi klienta w danej firmie oraz aplikację Google Chat o nazwie Case-y. Pracownicy obsługi klienta często udostępniają w pokoju czatu linki do zgłoszeń do obsługi klienta. Za każdym razem, gdy udostępniają link, muszą go otworzyć współpracownicy, aby zobaczyć szczegóły takie jak przypisana osoba, stan i temat. Podobnie jeśli ktoś chce zostać właścicielem zgłoszenia lub zmienić jego stan, musi otworzyć link.

Podgląd linków pozwala użytkownikom aplikacji Google Chat, Case-y, załączyć kartę zawierającą przypisaną osobę, stan i temat, 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 w trakcie czatu.

Gdy ktoś doda link do swojej wiadomości, pojawi się element z informacją, ż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 generuje i załącza kartę do wiadomości użytkownika.

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

Oprócz linku na tej karcie znajdują się dodatkowe informacje o linku, w tym elementy interaktywne, takie jak przyciski. Twoja aplikacja Google Chat może aktualizować dołączoną kartę w odpowiedzi na interakcje użytkownika, takie jak kliknięcie przycisku.

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

Wymagania wstępne

Node.js

Aplikacja Google Chat, w której można korzystać z funkcji interaktywnych. Aby utworzyć interaktywna aplikacja do obsługi czatu przy użyciu usługi HTTP zapoznaj się z tym krótkim wprowadzeniem.

Google Apps Script

Aplikacja Google Chat, w której można korzystać z funkcji interaktywnych. Aby utworzyć z interaktywną aplikacją Google Chat w Apps Script, zapoznaj się z tym krótkim wprowadzeniem.

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 aplikacja Google Chat mogła wyświetlać ich podgląd.

Menu konfiguracji podglądu linków

  1. Otwórz konsolę Google Cloud.
  2. Obok „Google Cloud” Kliknij strzałkę w dół i otwórz projekt aplikacji Google Chat.
  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 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ół .

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

    Aby linki do podglądu aplikacji Google Chat w określonej subdomenie, np. subdomain.example.com, uwzględnij tę subdomenę.

    Aby linki do podglądu aplikacji Google Chat były dostępne w całej domenie, jako subdomenę wpisz 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óra ma zostać dodana 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, aby dopasować adresy URL do zgłoszeń hostowanych w support.example.com/cases/, wpisz cases/.

  8. Kliknij Gotowe.

  9. Kliknij Zapisz.

Od teraz za każdym razem, gdy ktoś doda link, który pasuje do wzorca adresu URL podglądu linku do wiadomości w pokoju czatu, który obejmuje Twoją aplikację Google Chat, wyświetli się podgląd tego linku.

Po skonfigurowaniu podglądu dla danego linku Aplikacja do obsługi czatu może rozpoznawać i wyświetlać podgląd linku przez załączając dodatkowe informacje.

Wewnątrz pokoi czatu, w których znajdują się aplikacji do obsługi czatu, gdy czyjeś wiadomości zawiera link pasuje do wzorca adresu URL podglądu linku, Twoja aplikacja Google Chat otrzymuje MESSAGE zdarzenia interakcji. Plik JSON ładunek dla zdarzenia interakcji zawiera pole matchedUrl:

JSON

"message": {

  . . . // other message attributes redacted

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

  . . . // other message attributes redacted

}

Sprawdzając obecność pola matchedUrl w zdarzeniu MESSAGE. aplikacja Google Chat może dodawać informacje do pola wiadomość z podglądem linku. Aplikacja Google Chat może wyślij odpowiedź w formie SMS-a lub załącz kartę.

Odpowiedz SMS-em

W przypadku prostych odpowiedzi możesz wyświetlić podgląd linku w aplikacji Google Chat wysyłając prostą wiadomość tekstową do linku. W tym przykładzie dołączany jest komunikat z powtarzającym się adresem URL linku, pasuje do wzorca 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 na podglądzie: zwróci błąd ActionResponse typu UPDATE_USER_MESSAGE_CARDS. W tym przykładzie dołączono prostą kartę.

Aplikacja do obsługi czatu wyświetla podgląd linku, dołą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

Ten przykładowy kod karty wysyła wiadomość przez zwrócenie card JSON. Możesz też użyć usługi Usługa karty 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 informacji o karcie

Aby zaktualizować kartę dołączoną do podglądu linku, zwróć ActionResponse typu UPDATE_USER_MESSAGE_CARDS. Aplikacje do obsługi czatu mogą być aktualizowane tylko kart z podglądem linków w odpowiedzi na Zdarzenie interakcji z aplikacją do obsługi czatu. Aplikacje do obsługi czatu nie mogą zaktualizować tych kart przez wywołanie interfejsu Chat API asynchronicznie.

Podgląd linków nie obsługuje zwracania wartości ActionResponse typu UPDATE_MESSAGE. Funkcja UPDATE_MESSAGE aktualizuje całą wiadomość, a nie tylko kartę, dlatego działa tylko wtedy, gdy aplikacja Google Chat utworzyła oryginalną wiadomość. Podgląd linku dołącza kartę do wiadomości utworzonej przez użytkownika, dlatego aplikacja Google Chat nie ma uprawnień do aktualizowania tej karty.

Aby mieć pewność, że funkcja będzie aktualizować karty utworzone przez użytkowników i utworzone w aplikacji w strumieniu czatu, dynamicznie ustaw 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 opcję ActionResponse na UPDATE_MESSAGE.

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

Opcja 1. Sprawdź actionMethodName

Aby za pomocą actionMethodName prawidłowo obsługiwać zdarzenia interakcji (CARD_CLICKED) na podglądzie kart, ustaw niestandardowy actionMethodName w ramach 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

Jeśli funkcja "actionMethodName": "assign" identyfikuje przycisk w podglądzie linku, można dynamicznie zwrócić prawidłową wartość ActionResponse, sprawdzając dopasowanie 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

Ten przykładowy kod karty wysyła wiadomość przez zwrócenie card JSON. Możesz też użyć usługi Usługa karty 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 pole message.sender.type ma wartość HUMAN czy BOT. Jeśli HUMAN, ustaw opcję ActionResponse na UPDATE_USER_MESSAGE_CARDS, a 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

Ten przykładowy kod karty wysyła wiadomość przez zwrócenie card JSON. Możesz też użyć usługi Usługa karty 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 kliknięcie przycisku. Wywołaj przycisk Przypisz do mnie z poprzedniej sekcji – Załącz kartę. Ten kompletny przykład aktualizuje kartę tak, że jest przypisana do użytkownika „Ty”. gdy użytkownik kliknie Przypisz do mnie. Ten przykład dynamicznie ustawia ActionResponse przez sprawdzenie typu nadawcy.

Kompletny przykład: Case-y – aplikacja do obsługi klienta Google Chat

Oto pełny kod 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
/**
 * 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

Ten przykładowy kod karty wysyła wiadomość przez zwrócenie card JSON. Możesz też użyć usługi Usługa karty 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 zwróć uwagę na te ograniczenia i uwagi:

  • Każda aplikacja do obsługi czatu obsługuje podgląd linków dla maksymalnie 5 wzorców adresów URL.
  • Aplikacje do obsługi czatu wyświetlają podgląd jednego linku na wiadomość. Jeśli w pojedynczej wiadomości znajduje się wiele linków, które można wyświetlać w podglądzie, pojawia się podgląd tylko pierwszych z nich.
  • W aplikacjach do obsługi czatu wyświetlane są tylko linki, które zaczynają się od https://, więc https://support.example.com/cases/ wyświetla podgląd, ale support.example.com/cases/ nie.
  • O ile wiadomość nie zawiera innych informacji wysyłanych do aplikacji Google Chat, takich jak polecenie po ukośniku, w podglądzie linków do aplikacji Google Chat jest wysyłany tylko adres URL linku.
  • Karty dołączone do linków do podglądu obsługują tylko ActionResponse typu UPDATE_USER_MESSAGE_CARDS i tylko w odpowiedzi na zdarzenia interakcji z aplikacją Google Chat. Podgląd linków nie obsługuje UPDATE_MESSAGE ani asynchronicznych żądań aktualizacji kart dołączonych do podglądu linku za pomocą interfejsu Chat API. Więcej informacji znajdziesz w artykule Aktualizowanie karty.

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