Podgląd linków w wiadomościach w Google Chat

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

Wyobraź sobie na przykład pokój w Google Chat, w którym są wszyscy pracownicy obsługi klienta firmy oraz aplikacja Chat o nazwie Case-y. Pracownicy często udostępniają linki do zgłoszeń klientów w pokoju na czacie, a za każdym razem, gdy to robią, ich współpracownicy muszą otworzyć link do zgłoszenia, aby zobaczyć szczegóły, takie jak osoba przypisana, stan i temat. Podobnie jeśli ktoś chce przejąć sprawę lub zmienić jej stan, musi otworzyć link.

Podgląd linków umożliwia aplikacji do obsługi czatu w przestrzeni, Case-y, dołączanie karty z przypisaną osobą, stanem i tematem, gdy ktoś udostępnia link do zgłoszenia. Przyciski na karcie umożliwiają agentom przejęcie zgłoszenia i zmianę jego stanu bezpośrednio w strumieniu czatu.

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

Chip informujący, że aplikacja do obsługi czatu może wyświetlać podgląd linku

Po wysłaniu wiadomości link jest przesyłany do aplikacji Chat, która generuje i dołą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 karta zawiera dodatkowe informacje o nim, w tym elementy interaktywne, takie jak przyciski. Aplikacja do czatu może aktualizować załączoną kartę w odpowiedzi na interakcje użytkownika, takie jak kliknięcia przycisków.

Jeśli ktoś nie chce, aby aplikacja Chat wyświetlała podgląd linku przez dołączenie karty do wiadomości, może zapobiec wyświetlaniu podglądu, klikając  na chipie podglądu. Użytkownicy mogą w dowolnym momencie usunąć załączoną kartę, klikając Usuń podgląd.

Wymagania wstępne

HTTP

Dodatek do Google Workspace, który rozszerza Google Chat. Aby go utworzyć, wykonaj czynności opisane w tym przewodniku.

Google Apps Script

Dodatek do Google Workspace, który rozszerza Google Chat. Aby go utworzyć, wykonaj czynności opisane w krótkim przewodniku po Apps Script.

Zarejestruj konkretne linki, takie jak example.com, support.example.com i support.example.com/cases/, jako wzorce adresów URL na stronie konfiguracji aplikacji do obsługi Google Chat w konsoli Google Cloud, aby aplikacja do obsługi Google Chat mogła wyświetlać 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 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 zmień wzorzec adresu URL.
    1. Aby skonfigurować podgląd linku 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 Chat będzie wyświetlać podgląd linków do tej domeny.

    Aby aplikacja Chat wyświetlała podgląd linków do konkretnej subdomeny, np. subdomain.example.com, uwzględnij tę subdomenę.

    Aby aplikacja Chat wyświetlała podgląd linków do całej domeny, 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óra ma być dołączana 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 spraw hostowanych w lokalizacji support.example.com/cases/, wpisz cases/.

  8. Kliknij Gotowe.

  9. Kliknij Zapisz.

Teraz, gdy ktoś umieści w wiadomości w pokoju czatu, w którym znajduje się Twoja aplikacja Google Chat, link pasujący do wzorca adresu URL podglądu linku, Twoja aplikacja wyświetli podgląd tego linku.

Po skonfigurowaniu podglądu linku aplikacja Chat może rozpoznawać i wyświetlać podgląd linku, dodając do niego więcej informacji.

W pokojach czatu, które zawierają Twoją aplikację Google Chat, gdy wiadomość użytkownika zawiera link pasujący do wzorca adresu URL podglądu linku, Twoja aplikacja Google Chat otrzymuje obiekt zdarzenia z MessagePayload. W ładunku obiekt message.matchedUrl zawiera link, który użytkownik umieścił w wiadomości:

JSON

message: {
  matchedUrl: {
    url: "https://support.example.com/cases/case123"
  },
  ... // other message attributes redacted
}

Sprawdzając obecność pola matchedUrl w ładunku zdarzenia MESSAGE, aplikacja do obsługi czatu może dodawać informacje do wiadomości z linkiem podglądu. Aplikacja Google Chat może odpowiedzieć podstawową wiadomością tekstową lub załączyć kartę.

Odpowiadanie na SMS-y

W przypadku podstawowych odpowiedzi aplikacja do obsługi czatu może wyświetlić podgląd linku, odpowiadając na niego wiadomością tekstową. W tym przykładzie dołączana jest wiadomość, która powtarza adres URL linku pasujący do wzorca adresu URL podglądu linku.

Node.js

/**
 * Google Cloud Function that handles messages that have links whose
 * URLs match URL patterns configured for link previewing.
 *
 *
 * @param {Object} req Request sent from Google Chat space
 * @param {Object} res Response to send back
 */
exports.previewLinks = function previewLinks(req, res) {
  const chatEvent = req.body.chat;

  // Handle MESSAGE events
  if(chatEvent.messagePayload) {
    return res.send(handlePreviewLink(chatEvent.messagePayload.message));
  // Handle button clicks
  } else if(chatEvent.buttonClickedPayload) {
    return res.send(handleCardClick(chatEvent.buttonClickedPayload.message));
  }
};

/**
 * Respond to messages that have links whose URLs match URL patterns configured
 * for link previewing.
 *
 * @param {Object} chatMessage The chat message object from Google Workspace Add On event.
 * @return {Object} Response to send back depending on the matched URL.
 */
function handlePreviewLink(chatMessage) {
  // If the Chat app does not detect a link preview URL pattern, reply
  // with a text message that says so.
  if (!chatMessage.matchedUrl) {
    return { hostAppDataAction: { chatDataAction: { createMessageAction: { message: {
      text: 'No matchedUrl detected.'
    }}}}};
  }

  // Reply with a text message for URLs of the subdomain "text"
  if (chatMessage.matchedUrl.url.includes("text.example.com")) {
    return { hostAppDataAction: { chatDataAction: { createMessageAction: { message: {
      text: 'event.chat.messagePayload.message.matchedUrl.url: ' + chatMessage.matchedUrl.url
    }}}}};
  }
}

Google Apps Script

/**
 * Reply to messages that have links whose URLs match the pattern
 * "text.example.com" configured for link previewing.
 *
 * @param {Object} event The event object from Google Workspace add-on.
 *
 * @return {Object} The action response.
 */
function onMessage(event) {
  // Stores the Google Chat event as a variable.
  const chatMessage = event.chat.messagePayload.message;

  // If the Chat app doesn't detect a link preview URL pattern, reply
  // with a text message that says so.
  if (!chatMessage.matchedUrl) {
    return { hostAppDataAction: { chatDataAction: { createMessageAction: { message: {
      text: 'No matchedUrl detected.'
    }}}}};
  }

  // Reply with a text message for URLs of the subdomain "text".
  if (chatMessage.matchedUrl.url.includes("text.example.com")) {
    return { hostAppDataAction: { chatDataAction: { createMessageAction: { message: {
      text: 'event.chat.messagePayload.message.matchedUrl.url: ' + chatMessage.matchedUrl.url
    }}}}};
  }
}

Aby dołączyć kartę do linku z podglądu, zwróć działanie DataActions z obiektem ChatDataActionMarkup typu UpdateInlinePreviewAction.

W tym przykładzie aplikacja Google Chat dodaje kartę podglądu do wiadomości zawierających wzorzec adresu URL support.example.com.

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

Node.js

/**
 * Google Cloud Function that handles messages that have links whose
 * URLs match URL patterns configured for link previewing.
 *
 *
 * @param {Object} req Request sent from Google Chat space
 * @param {Object} res Response to send back
 */
exports.previewLinks = function previewLinks(req, res) {
  const chatEvent = req.body.chat;

  // Handle MESSAGE events
  if(chatEvent.messagePayload) {
    return res.send(handlePreviewLink(chatEvent.messagePayload.message));
  // Handle button clicks
  } else if(chatEvent.buttonClickedPayload) {
    return res.send(handleCardClick(chatEvent.buttonClickedPayload.message));
  }
};

/**
 * Respond to messages that have links whose URLs match URL patterns configured
 * for link previewing.
 *
 * @param {Object} chatMessage The chat message object from Google Workspace Add On event.
 * @return {Object} Response to send back depending on the matched URL.
 */
function handlePreviewLink(chatMessage) {
  // Attach a card to the message for URLs of the subdomain "support"
  if (chatMessage.matchedUrl.url.includes("support.example.com")) {
    // A hard-coded card is used in this example. In a real-life scenario,
    // the case information would be fetched and used to build the card.
    return { hostAppDataAction: { chatDataAction: { updateInlinePreviewAction: { cardsV2: [{
      cardId: 'attachCard',
      card: {
        header: {
          title: 'Example Customer Service Case',
          subtitle: 'Case basics',
        },
        sections: [{ widgets: [
        { decoratedText: { topLabel: 'Case ID', text: 'case123'}},
        { decoratedText: { topLabel: 'Assignee', text: 'Charlie'}},
        { decoratedText: { topLabel: 'Status', text: 'Open'}},
        { decoratedText: { topLabel: 'Subject', text: 'It won\'t turn on...' }},
        { buttonList: { buttons: [{
          text: 'OPEN CASE',
          onClick: { openLink: {
            url: 'https://support.example.com/orders/case123'
          }},
        }, {
          text: 'RESOLVE CASE',
          onClick: { openLink: {
            url: 'https://support.example.com/orders/case123?resolved=y',
          }},
        }, {
          text: 'ASSIGN TO ME',
          // Use runtime environment variable set with self URL
          onClick: { action: { function: process.env.BASE_URL }}
        }]}}
        ]}]
      }
    }]}}}};
  }
}

Google Apps Script

W tym przykładzie wysyłana jest wiadomość z kartą przez zwrócenie kodu JSON karty. Możesz też użyć usługi kart Apps Script. 

/**
 * Attach a card to messages that have links whose URLs match the pattern
 * "support.example.com" configured for link previewing.
 *
 * @param {Object} event The event object from Google Workspace add-on.
 *
 * @return {Object} The action response.
 */
function onMessage(event) {
  // Stores the Google Chat event as a variable.
  const chatMessage = event.chat.messagePayload.message;

  // Attach a card to the message for URLs of the subdomain "support".
  if (chatMessage.matchedUrl.url.includes("support.example.com")) {
    // A hard-coded card is used in this example. In a real-life scenario,
    // the case information would be fetched and used to build the card.
    return { hostAppDataAction: { chatDataAction: { updateInlinePreviewAction: { cardsV2: [{
      cardId: 'attachCard',
      card: {
        header: {
          title: 'Example Customer Service Case',
          subtitle: 'Case summary',
        },
        sections: [{ widgets: [
        { decoratedText: { topLabel: 'Case ID', text: 'case123'}},
        { decoratedText: { topLabel: 'Assignee', text: 'Charlie'}},
        { decoratedText: { topLabel: 'Status', text: 'Open'}},
        { decoratedText: { topLabel: 'Subject', text: 'It won\'t turn on...' }},
        { buttonList: { buttons: [{
          text: 'OPEN CASE',
          onClick: { openLink: {
            url: 'https://support.example.com/orders/case123'
          }},
        }, {
          text: 'RESOLVE CASE',
          onClick: { openLink: {
            url: 'https://support.example.com/orders/case123?resolved=y',
          }},
        }, {
          text: 'ASSIGN TO ME',
          // Clicking this button triggers the execution of the function
          // "assign" from the Apps Script project.
          onClick: { action: { function: 'assign'}}
        }]}}
        ]}]
      }
    }]}}}};
  }
}

Aplikacja Chat może aktualizować kartę podglądu linku, gdy użytkownicy wchodzą z nią w interakcję, np. klikają przycisk na karcie.

Aby zaktualizować kartę, aplikacja do obsługi Google Chat musi zwrócić działanie DataActions z jednym z tych obiektów ChatDataActionMarkup:

Aby określić, kto wysłał wiadomość, użyj ładunku zdarzenia (buttonClickedPayload), aby sprawdzić, czy nadawca (message.sender.type) ma wartość HUMAN (użytkownik) lub BOT (aplikacja na czacie).

Przykład poniżej pokazuje, jak aplikacja do obsługi czatu aktualizuje podgląd linku za każdym razem, gdy użytkownik kliknie przycisk Przypisz do mnie, aktualizując pole Osoba przypisana na karcie i wyłączając przycisk.

Komunikator wyświetla podgląd linku z aktualną wersją karty dołączonej do wiadomości

Node.js

/**
 * Google Cloud Function that handles messages that have links whose
 * URLs match URL patterns configured for link previewing.
 *
 *
 * @param {Object} req Request sent from Google Chat space
 * @param {Object} res Response to send back
 */
exports.previewLinks = function previewLinks(req, res) {
  const chatEvent = req.body.chat;

  // Handle MESSAGE events
  if(chatEvent.messagePayload) {
    return res.send(handlePreviewLink(chatEvent.messagePayload.message));
  // Handle button clicks
  } else if(chatEvent.buttonClickedPayload) {
    return res.send(handleCardClick(chatEvent.buttonClickedPayload.message));
  }
};

/**
 * Respond to clicks by assigning user and updating the card that was attached to a
 * message with a previewed link.
 *
 * @param {Object} chatMessage The chat message object from Google Workspace Add On event.
 * @return {Object} Action response depending on the original message.
 */
function handleCardClick(chatMessage) {
  // Creates the updated card that displays "You" for the assignee
  // and that disables the button.
  //
  // A hard-coded card is used in this example. In a real-life scenario,
  // an actual assign action would be performed before building the card.
  const message = { cardsV2: [{
    cardId: 'attachCard',
    card: {
      header: {
        title: 'Example Customer Service Case',
        subtitle: 'Case basics',
      },
      sections: [{ widgets: [
        { decoratedText: { topLabel: 'Case ID', text: 'case123'}},
        // The assignee is now "You"
        { decoratedText: { topLabel: 'Assignee', text: 'You'}},
        { decoratedText: { topLabel: 'Status', text: 'Open'}},
        { decoratedText: { topLabel: 'Subject', text: 'It won\'t turn on...' }},
        { buttonList: { buttons: [{
          text: 'OPEN CASE',
          onClick: { openLink: {
            url: 'https://support.example.com/orders/case123'
          }},
        }, {
          text: 'RESOLVE CASE',
          onClick: { openLink: {
            url: 'https://support.example.com/orders/case123?resolved=y',
          }},
        }, {
          text: 'ASSIGN TO ME',
          // The button is now disabled
          disabled: true,
          // Use runtime environment variable set with self URL
          onClick: { action: { function: process.env.BASE_URL }}
        }]}}
      ]}]
    }
  }]};

  // Checks whether the message event originated from a human or a Chat app
  // to return the adequate action response.
  if(chatMessage.sender.type === 'HUMAN') {
    return { hostAppDataAction: { chatDataAction: { updateInlinePreviewAction: message }}};
  } else {
    return { hostAppDataAction: { chatDataAction: { updateMessageAction: message }}};
  }
}

Google Apps Script

W tym przykładzie wysyłana jest wiadomość z kartą przez zwrócenie kodu JSON karty. Możesz też użyć usługi kart Apps Script. 

/**
 * Assigns and updates the card that's attached to a message with a
 * previewed link of the pattern "support.example.com".
 *
 * @param {Object} event The event object from the Google Workspace add-on.
 *
 * @return {Object} Action response depending on the message author.
 */
function assign(event) {
  // Creates the updated card that displays "You" for the assignee
  // and that disables the button.
  //
  // A hard-coded card is used in this example. In a real-life scenario,
  // an actual assign action would be performed before building the card.
  const message = { cardsV2: [{
    cardId: 'attachCard',
    card: {
      header: {
        title: 'Example Customer Service Case',
        subtitle: 'Case summary',
      },
      sections: [{ widgets: [
        { decoratedText: { topLabel: 'Case ID', text: 'case123'}},
        // The assignee is now "You"
        { decoratedText: { topLabel: 'Assignee', text: 'You'}},
        { decoratedText: { topLabel: 'Status', text: 'Open'}},
        { decoratedText: { topLabel: 'Subject', text: 'It won\'t turn on...' }},
        { buttonList: { buttons: [{
          text: 'OPEN CASE',
          onClick: { openLink: {
            url: 'https://support.example.com/orders/case123'
          }},
        }, {
          text: 'RESOLVE CASE',
          onClick: { openLink: {
            url: 'https://support.example.com/orders/case123?resolved=y',
          }},
        }, {
          text: 'ASSIGN TO ME',
          // The button is now disabled
          disabled: true,
          onClick: { action: { function: 'assign'}}
        }]}}
      ]}]
    }
  }]};

  // Use the adequate action response type. It depends on whether the message
  // the preview link card is attached to was created by a human or a Chat app.
  if(event.chat.buttonClickedPayload.message.sender.type === 'HUMAN') {
    return { hostAppDataAction: { chatDataAction: { updateInlinePreviewAction: message }}};
  } else {
    return { hostAppDataAction: { chatDataAction: { updateMessageAction: message }}};
  }
}

Limity i kwestie do rozważenia

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

  • Każda aplikacja do obsługi czatu obsługuje podgląd linków w przypadku maksymalnie 5 wzorców adresów URL.
  • Aplikacje do obsługi czatu wyświetlają podgląd jednego linku na wiadomość. Jeśli w jednej wiadomości znajduje się kilka linków z możliwością podglądu, podgląd jest wyświetlany tylko w przypadku pierwszego z nich.
  • Aplikacje do obsługi czatu wyświetlają podgląd tylko linków zaczynających 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, które są wysyłane do aplikacji Google Chat, np. polecenia po ukośniku, podglądy linków wysyłają do aplikacji Google Chat tylko adres URL linku.
  • Jeśli użytkownik opublikuje link, aplikacja Google Chat może zaktualizować kartę podglądu linku tylko wtedy, gdy użytkownicy wejdą z nią w interakcję, np. klikną przycisk. Nie możesz wywołać metody update() interfejsu Chat API na zasobie Message, aby asynchronicznie zaktualizować wiadomość użytkownika.
  • Aplikacje do obsługi czatu muszą wyświetlać podgląd linków wszystkim osobom w pokoju, więc wiadomość musi pomijać pole privateMessageViewer.

Podczas wdrażania podglądów linków może być konieczne debugowanie aplikacji do obsługi czatu przez odczytywanie jej logów. Aby odczytać logi, otwórz Eksplorator logów w konsoli Google Cloud.