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 w Google Chat może wyświetlić podgląd linku, dołączając do wiadomości kartę z dodatkowymi informacjami, która umożliwia użytkownikom podjęcie działania bezpośrednio w Google Chat.

Uwaga: w Google Chat dodatki są widoczne dla użytkowników jako aplikacje Google Chat. Aplikację w Google Chat możesz też utworzyć za pomocą zdarzeń interakcji z interfejsem Google Chat API. Więcej informacji znajdziesz w artykule Rozszerzanie Google Chat.

Wyobraź sobie na przykład pokój w Google Chat, w którym są wszyscy agenci obsługi klienta firmy oraz aplikacja w Google Chat o nazwie Case-y. Agenci często udostępniają w pokoju linki do zgłoszeń obsługi klienta, 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ąć zgłoszenie lub zmienić jego stan, musi otworzyć link.

Wyświetlanie podglądu linków umożliwia aplikacji w Google Chat Case-y dołączanie karty z osobą przypisaną, stanem i tematem za każdym razem, 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.

Jak działa wyświetlanie podglądu linków

Gdy ktoś doda link do wiadomości, pojawi się chip z informacją, że aplikacja w Google Chat może wyświetlić podgląd linku.

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

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

Jeśli ktoś nie chce, aby aplikacja w Google Chat wyświetlała podgląd ich 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 każdej chwili usunąć dołą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 przewodniku Szybki start HTTP.

Uwaga: przykłady kodu w tym przewodniku są napisane tak, aby działały jako funkcja Google Cloud Run dla Node.js.

Apps Script

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

Konfigurowanie podglądów linków

Zarejestruj konkretne linki – np. example.com, support.example.com i support.example.com/cases/ – jako wzorce adresów URL na stronie konfiguracji aplikacji w Google Chat w konsoli Google Cloud, aby aplikacja w Google Chat mogła wyświetlać ich podgląd.

1. Otwórz konsolę Google Cloud.
2. Obok opcji "Google Cloud" kliknij strzałkę w dół i otwórz projekt aplikacji w Google Chat.
3. W polu wyszukiwania wpisz Google Chat API i kliknij Google Chat API.
4. Kliknij Zarządzaj > Konfiguracja.
5. W sekcji Podglądy linków dodaj lub edytuj wzorzec adresu URL.
   1. Aby skonfigurować podglądy 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 w Google Chat będzie wyświetlać podgląd linków do tej domeny.

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

   Aby aplikacja w Google Chat wyświetlała podgląd linków do całej domeny, określ symbol wieloznaczny z gwiazdką (*) jako subdomenę. 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łączona 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 zgłoszeń hostowanych w support.example.com/cases/, wpisz cases/.

8. Kliknij Gotowe.

9. Kliknij Zapisz.

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

Wyświetlanie podglądu linku

Po skonfigurowaniu wyświetlania podglądu linku dla danego linku aplikacja w Google Chat może rozpoznawać i wyświetlać podgląd linku, dołączając do niego dodatkowe informacje.

Gdy w pokoju w Google Chat, w którym jest Twoja aplikacja, wiadomość zawiera link pasujący do wzorca adresu URL podglądu linku, Twoja aplikacja w Google Chat otrzymuje obiekt zdarzenia z MessagePayload. W ładunku obiekt message.matchedUrl zawiera link, który użytkownik dodał do 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 w Google Chat może dodać informacje do wiadomości z wyświetlanym podglądem linku. Aplikacja w Google Chat może odpowiedzieć zwykłą wiadomością tekstową lub dołączyć kartę.

Odpowiadanie wiadomością tekstową

W przypadku podstawowych odpowiedzi aplikacja w Google Chat może wyświetlić podgląd linku, odpowiadając na niego wiadomością tekstową. Ten przykład dołącza wiadomość, która powtarza adres URL linku pasujący do wzorca adresu URL podglądu linku.

Node.js

node/chat/preview-link/index.js

Wyświetl w GitHubie

// 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
  }}}}};
}

Zastąp FUNCTION_URL punktem końcowym HTTP, który obsługuje kliknięcia przycisków.

Python

python/chat/preview-link/main.py

Wyświetl w GitHubie

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

Zastąp FUNCTION_URL punktem końcowym HTTP, który obsługuje kliknięcia przycisków.

Java

java/chat/preview-link/src/main/java/com/google/chat/previewLink/App.java

Wyświetl w GitHubie

// Reply with a text message for URLs of the subdomain "text"
if (chatMessage.at("/matchedUrl/url").asText().contains("text.example.com")) {
  return new GenericJson() {{
    put("hostAppDataAction", new GenericJson() {{
      put("chatDataAction", new GenericJson() {{
        put("createMessageAction", new GenericJson() {{
          put("message", new Message()
            .setText("event.chat.messagePayload.message.matchedUrl.url: " + chatMessage.at("/matchedUrl/url").asText()));
        }});
      }});
    }});
  }};
}

Zastąp FUNCTION_URL punktem końcowym HTTP, który obsługuje kliknięcia przycisków.

Apps Script

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

Wyświetl w GitHubie

// 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
  }}}}};
}

Dołączanie karty z podglądem linku

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

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

Node.js

node/chat/preview-link/index.js

Wyświetl w GitHubie

// 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',
        onClick: { action: { function: FUNCTION_URL }}
      }]}}
      ]}]
    }
  }]}}}};
}

Zastąp FUNCTION_URL punktem końcowym HTTP, który obsługuje kliknięcia przycisków.

Python

python/chat/preview-link/main.py

Wyświetl w GitHubie

# Attach a card to the message for URLs of the subdomain "support"
if "support.example.com" in chatMessage.get('matchedUrl').get('url'):
  # 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',
        'onClick': { 'action': { 'function': FUNCTION_URL }}
      }]}}
      ]}]
    }
  }]}}}}

Zastąp FUNCTION_URL punktem końcowym HTTP, który obsługuje kliknięcia przycisków.

Java

java/chat/preview-link/src/main/java/com/google/chat/previewLink/App.java

Wyświetl w GitHubie

// Attach a card to the message for URLs of the subdomain "support"
if (chatMessage.at("/matchedUrl/url").asText().contains("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.
  CardWithId cardV2 = new CardWithId()
    .setCardId("attachCard")
    .setCard(new GoogleAppsCardV1Card()
      .setHeader(new GoogleAppsCardV1CardHeader()
        .setTitle("Example Customer Service Case")
        .setSubtitle("Case basics"))
      .setSections(List.of(new GoogleAppsCardV1Section().setWidgets(List.of(
        new GoogleAppsCardV1Widget().setDecoratedText(new GoogleAppsCardV1DecoratedText()
          .setTopLabel("Case ID")
          .setText("case123")),
        new GoogleAppsCardV1Widget().setDecoratedText(new GoogleAppsCardV1DecoratedText()
          .setTopLabel("Assignee")
          .setText("Charlie")),
        new GoogleAppsCardV1Widget().setDecoratedText(new GoogleAppsCardV1DecoratedText()
          .setTopLabel("Status")
          .setText("Open")),
        new GoogleAppsCardV1Widget().setDecoratedText(new GoogleAppsCardV1DecoratedText()
          .setTopLabel("Subject")
          .setText("It won't turn on...")),
        new GoogleAppsCardV1Widget().setButtonList(new GoogleAppsCardV1ButtonList()
          .setButtons(List.of(
            new GoogleAppsCardV1Button()
              .setText("OPEN CASE")
            .setOnClick(new GoogleAppsCardV1OnClick()
                .setOpenLink(new GoogleAppsCardV1OpenLink()
                  .setUrl("https://support.example.com/orders/case123"))),
            new GoogleAppsCardV1Button()
              .setText("RESOLVE CASE")
            .setOnClick(new GoogleAppsCardV1OnClick()
                .setOpenLink(new GoogleAppsCardV1OpenLink()
                  .setUrl("https://support.example.com/orders/case123?resolved=y"))),
            new GoogleAppsCardV1Button()
              .setText("ASSIGN TO ME")
              .setOnClick(new GoogleAppsCardV1OnClick()
                .setAction(new GoogleAppsCardV1Action().setFunction(FUNCTION_URL)))
          ))
        )
      ))))
    );

  return new GenericJson() {{
    put("hostAppDataAction", new GenericJson() {{
      put("chatDataAction", new GenericJson() {{
        put("updateInlinePreviewAction", new GenericJson() {{
          put("cardsV2", List.of(cardV2));
        }});
      }});
    }});
  }};
}

Zastąp FUNCTION_URL punktem końcowym HTTP, który obsługuje kliknięcia przycisków.

Apps Script

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

Wyświetl w GitHubie

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

Aktualizowanie karty podglądu linku

Aplikacja w Google 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 w Google Chat musi zwrócić działanie DataActions z jednym z tych obiektów ChatDataActionMarkup:

• Jeśli wiadomość została wysłana przez użytkownika, zwróć UpdateMessageAction obiekt.
• Jeśli wiadomość została wysłana przez aplikację w Google Chat, zwróć UpdateInlinePreviewAction obiekt.

Aby określić, kto wysłał wiadomość, użyj ładunku zdarzenia (buttonClickedPayload) aby sprawdzić, czy nadawca (message.sender.type) jest ustawiony na HUMAN (użytkownik) czy BOT (aplikacja w Google Chat).

Poniższy przykład pokazuje, jak aplikacja w Google Chat aktualizuje podgląd linku, gdy użytkownik kliknie przycisk Przypisz do mnie, aktualizując pole Osoba przypisana na karcie i wyłączając przycisk.

Node.js

node/chat/preview-link/index.js

Wyświetl w GitHubie

/**
 * Respond to clicks by assigning and updating the card that's attached to a
 * message previewed link of the pattern "support.example.com".
 *
 * @param {Object} chatMessage The chat message object from Google Workspace Add On event.
 * @return {Object} Action response depending on the message author.
 */
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,
          onClick: { action: { function: FUNCTION_URL }}
        }]}}
      ]}]
    }
  }]};

  // 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(chatMessage.sender.type === 'HUMAN') {
    return { hostAppDataAction: { chatDataAction: { updateInlinePreviewAction: message }}};
  } else {
    return { hostAppDataAction: { chatDataAction: { updateMessageAction: message }}};
  }
}

Zastąp FUNCTION_URL punktem końcowym HTTP, który obsługuje kliknięcia przycisków.

Python

python/chat/preview-link/main.py

Wyświetl w GitHubie

def handle_card_click(chatMessage: dict) -> dict:
  """Respond to clicks by assigning and updating the card that's attached to a
  message previewed link of the pattern "support.example.com".

  - Reply with text messages that echo "text.example.com" link URLs in messages.
  - Attach cards to messages with "support.example.com" link URLs.

  Args:
      chatMessage (Mapping[str, Any]): The chat message object from Google Workspace Add On event.

  Returns:
      Mapping[str, Any]: Action response depending on the message author.
  """
  # 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.
  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,
        'onClick': { 'action': { 'function': FUNCTION_URL }}
      }]}}
      ]}]
    }
  }]}

  # 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 chatMessage.get('sender').get('type') == 'HUMAN':
    return { 'hostAppDataAction': { 'chatDataAction': { 'updateInlinePreviewAction': message }}}
  else:
    return { 'hostAppDataAction': { 'chatDataAction': { 'updateMessageAction': message }}}

Zastąp FUNCTION_URL punktem końcowym HTTP, który obsługuje kliknięcia przycisków.

Java

java/chat/preview-link/src/main/java/com/google/chat/previewLink/App.java

Wyświetl w GitHubie

/**
 * Respond to clicks by assigning and updating the card that's attached to a
 * message previewed link of the pattern "support.example.com".
 *
 * @param chatMessage The chat message object from Google Workspace Add On event.
 * @return Action response depending on the message author.
 */
GenericJson handleCardClick(JsonNode 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.
  Message message = new Message().setCardsV2(List.of(new CardWithId()
    .setCardId("attachCard")
    .setCard(new GoogleAppsCardV1Card()
      .setHeader(new GoogleAppsCardV1CardHeader()
        .setTitle("Example Customer Service Case")
        .setSubtitle("Case basics"))
      .setSections(List.of(new GoogleAppsCardV1Section().setWidgets(List.of(
        new GoogleAppsCardV1Widget().setDecoratedText(new GoogleAppsCardV1DecoratedText()
          .setTopLabel("Case ID")
          .setText("case123")),
        // The assignee is now "You"
        new GoogleAppsCardV1Widget().setDecoratedText(new GoogleAppsCardV1DecoratedText()
          .setTopLabel("Assignee")
          .setText("You")),
        new GoogleAppsCardV1Widget().setDecoratedText(new GoogleAppsCardV1DecoratedText()
          .setTopLabel("Status")
          .setText("Open")),
        new GoogleAppsCardV1Widget().setDecoratedText(new GoogleAppsCardV1DecoratedText()
          .setTopLabel("Subject")
          .setText("It won't turn on...")),
        new GoogleAppsCardV1Widget().setButtonList(new GoogleAppsCardV1ButtonList()
          .setButtons(List.of(
            new GoogleAppsCardV1Button()
              .setText("OPEN CASE")
              .setOnClick(new GoogleAppsCardV1OnClick()
                .setOpenLink(new GoogleAppsCardV1OpenLink()
                  .setUrl("https://support.example.com/orders/case123"))),
            new GoogleAppsCardV1Button()
              .setText("RESOLVE CASE")
              .setOnClick(new GoogleAppsCardV1OnClick()
                .setOpenLink(new GoogleAppsCardV1OpenLink()
                  .setUrl("https://support.example.com/orders/case123?resolved=y"))),
            new GoogleAppsCardV1Button()
              .setText("ASSIGN TO ME")
              // The button is now disabled
              .setDisabled(true)
              .setOnClick(new GoogleAppsCardV1OnClick()
                .setAction(new GoogleAppsCardV1Action().setFunction(FUNCTION_URL)))
          ))
        )
      ))))
    )
  ));

  // 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("HUMAN".equals(chatMessage.at("/sender/type").asText())) {
    return new GenericJson() {{
      put("hostAppDataAction", new GenericJson() {{
        put("chatDataAction", new GenericJson() {{
          put("updateInlinePreviewAction", message);
        }});
      }});
    }};
  } else {
    return new GenericJson() {{
      put("hostAppDataAction", new GenericJson() {{
        put("chatDataAction", new GenericJson() {{
          put("updateMessageAction", message);
        }});
      }});
    }};
  }
}

Zastąp FUNCTION_URL punktem końcowym HTTP, który obsługuje kliknięcia przycisków.

Apps Script

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

Wyświetl w GitHubie

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

Ograniczenia i kwestie do rozważenia

Podczas konfigurowania podglądów linków w aplikacji w Google Chat zwróć uwagę na te ograniczenia i kwestie do rozważenia:

• Każda aplikacja w Google Chat obsługuje podglądy linków dla maksymalnie 5 wzorców adresów URL.
• Aplikacje w Google Chat wyświetlają podgląd jednego linku na wiadomość. Jeśli w jednej wiadomości znajduje się kilka linków, których podgląd można wyświetlić, podgląd będzie wyświetlany tylko dla pierwszego z nich.
• Aplikacje w Google Chat 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 w Google Chat, np. polecenia ze znakiem ukośnika, do aplikacji w Google Chat są wysyłane tylko adresy URL linków.
• Jeśli użytkownik opublikuje link, aplikacja w Google Chat może zaktualizować kartę podglądu linku tylko wtedy, gdy użytkownicy wejdą w interakcję z kartą, np. klikną przycisk. Nie możesz wywołać metody update() interfejsu Chat API w zasobie Message, aby asynchronicznie zaktualizować wiadomość użytkownika.
• Aplikacje w Google Chat muszą wyświetlać podgląd linków dla wszystkich użytkowników w pokoju, dlatego wiadomość musi pomijać pole privateMessageViewer.

Debugowanie podglądów linków

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