Wyświetl podgląd linków

Aby zapobiec przełączaniu kontekstu, gdy użytkownicy udostępniają link w Google Chat, Twoja aplikacja do Google Chat może wyświetlać podgląd linku, dołączając do wiadomości kartę z dodatkowymi informacjami i umożliwiającą użytkownikom podjęcie działania bezpośrednio w Google Chat.

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

Wyświetlanie podglądu linku umożliwia aplikacji do 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 na czacie.

Jak działa wyświetlanie podglądu linku

Gdy ktoś doda link do wiadomości, pojawi się chip informujący, że aplikacja do Google 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 wysyłany do aplikacji do Google Chat, która generuje kartę i dołącza ją 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 linku, w tym elementy interaktywne, takie jak przyciski. Aplikacja do 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 do Google Chat wyświetlała podgląd ich linku, dołączając do wiadomości kartę, 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

Node.js

Aplikacja do Google Chat, która odbiera zdarzenia interakcji i na nie odpowiada. Aby utworzyć interaktywną aplikację do Google Chat za pomocą usługi HTTP, wykonaj czynności opisane w tym krótkim wprowadzeniu.

Python

Java

Apps Script

Aplikacja do Google Chat, która odbiera zdarzenia interakcji i na nie odpowiada. Aby utworzyć interaktywną aplikację do Google Chat w Apps Script, wykonaj czynności opisane w tym krótkim wprowadzeniu.

Konfigurowanie podglądu 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 do Google Chat w konsoli Google Cloud, aby aplikacja do Google Chat mogła wyświetlać ich podgląd.

Menu konfiguracji podglądu linków

Otwórz konsolę Google Cloud.
Obok opcji "Google Cloud" kliknij strzałkę w dół i otwórz projekt aplikacji do Google Chat.
W polu wyszukiwania wpisz Google Chat API i kliknij Google Chat API.
Kliknij Zarządzaj > Konfiguracja.
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ół .
W polu Wzorzec hosta wpisz domenę wzorca adresu URL. Aplikacja do Google Chat będzie wyświetlać podgląd linków do tej domeny.

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

Aby aplikacja do 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.
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, a chcesz dopasować adresy URL zgłoszeń hostowanych w support.example.com/cases/, wpisz cases/.
Kliknij Gotowe.
Kliknij Zapisz.

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

Wyświetlanie podglądu linku

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

Gdy w pokoju w Google Chat, w którym jest Twoja aplikacja do Google Chat, wiadomość zawiera link pasujący do wzorca adresu URL podglądu linku, Twoja aplikacja do Google Chat otrzymuje zdarzenie interakcji MESSAGE. Ładunek JSON zdarzenia interakcji zawiera pole matchedUrl:

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 Google Chat może dodać informacje do wiadomości z podglądem linku. Aplikacja do Google Chat może odpowiedzieć zwykłą wiadomością tekstową lub dołączyć kartę.

Odpowiadanie wiadomością tekstową

W przypadku podstawowych odpowiedzi aplikacja do Google Chat może wyświetlić podgląd linku odpowiadając na link prostą 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/preview-link/index.js

Wyświetl w GitHubie

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

Python

python/preview-link/main.py

Wyświetl w GitHubie

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

Java

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

Wyświetl w GitHubie

// Reply with a text message for URLs of the subdomain "text"
if (event.at("/message/matchedUrl/url").asText().contains("text.example.com")) {
  return new Message().setText("event.message.matchedUrl.url: " +
    event.at("/message/matchedUrl/url").asText());
}

Apps Script

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

Wyświetl w GitHubie

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

Dołączanie karty z podglądem linku

Aby dołączyć kartę do podglądu linku, zwróć ActionResponse typu UPDATE_USER_MESSAGE_CARDS. Ten przykład dołącza podstawową kartę.

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

Node.js

node/preview-link/index.js

Wyświetl w GitHubie

// Attach a card to the message for URLs of the subdomain "support"
if (event.message.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 {
    actionResponse: { type: 'UPDATE_USER_MESSAGE_CARDS' },
    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: 'assign'}}
          }]}}
        ]}]
      }
    }]
  };
}

Python

python/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 event.get('message').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 {
    'actionResponse': { 'type': 'UPDATE_USER_MESSAGE_CARDS' },
    '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': 'assign'}}
          }]}}
        ]}]
      }
    }]
  }

Java

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

Wyświetl w GitHubie

// Attach a card to the message for URLs of the subdomain "support"
if (event.at("/message/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.
  return new Message()
    .setActionResponse(new ActionResponse()
      .setType("UPDATE_USER_MESSAGE_CARDS"))
    .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")),
          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("assign")))))))))))));
}

Apps Script

Ten przykład wysyła wiadomość z kartą, zwracając kod JSON karty. Możesz też użyć usługi kart Apps Script.

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

Wyświetl w GitHubie

// Attach a card to the message for URLs of the subdomain "support"
if (event.message.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 {
    actionResponse: { type: 'UPDATE_USER_MESSAGE_CARDS' },
    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: 'assign'}}
          }]}}
        ]}]
      }
    }]
  };
}

Aktualizowanie karty podglądu linku

Aplikacja do 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 do Google Chat musi obsługiwać zdarzenie interakcji CARD_CLICKED i zwracać actionResponse na podstawie tego, kto wysłał wiadomość zawierającą podgląd linku:

Jeśli wiadomość wysłał użytkownik, ustaw actionResponse.type na UPDATE_USER_MESSAGE_CARDS.
Jeśli wiadomość wysłała aplikacja do Google Chat, ustaw actionResponse.type na UPDATE_MESSAGE.

Aby określić, kto wysłał wiadomość, możesz użyć pola message.sender.type zdarzenia interakcji, aby sprawdzić, czy nadawca był użytkownikiem HUMAN czy BOT.

Poniższy przykład pokazuje, jak aplikacja do 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.

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

Node.js

node/preview-link/index.js

Wyświetl w GitHubie

/**
 * Updates a card that was attached to a message with a previewed link.
 *
 * @param {Object} event The event object from Chat.
 *
 * @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) {
  // To respond to the correct button, checks the button's actionMethodName.
  if (event.action.actionMethodName === 'assign') {
    // 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.

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

    // Returns the updated card that displays "You" for the assignee
    // and that disables the button.
    return {
      actionResponse: { type: actionResponseType },
      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: 'assign'}}
            }]}}
          ]}]
        }
      }]
    };
  }
}

Python

python/preview-link/main.py

Wyświetl w GitHubie

def on_card_click(event: dict) -> dict:
  """Updates a card that was attached to a message with a previewed link."""
  # To respond to the correct button, checks the button's actionMethodName.
  if 'assign' == event.get('action').get('actionMethodName'):
    # 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.

    # 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.
    actionResponseType = 'UPDATE_USER_MESSAGE_CARDS' if \
      event.get('message').get('sender').get('type') == 'HUMAN' else \
      'UPDATE_MESSAGE'

    # Returns the updated card that displays "You" for the assignee
    # and that disables the button.
    return {
      'actionResponse': { 'type': actionResponseType },
      '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': 'assign'}}
            }]}}
          ]}]
        }
      }]
    }

Java

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

Wyświetl w GitHubie

// Updates a card that was attached to a message with a previewed link.
Message onCardClick(JsonNode event) {
  // To respond to the correct button, checks the button's actionMethodName.
  if (event.at("/action/actionMethodName").asText().equals("assign")) {
    // 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.

    // 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.
    String actionResponseType =
      event.at("/message/sender/type").asText().equals("HUMAN")
      ? "UPDATE_USER_MESSAGE_CARDS" : "UPDATE_MESSAGE";

    // Returns the updated card that displays "You" for the assignee
    // and that disables the button.
    return new Message()
    .setActionResponse(new ActionResponse()
      .setType(actionResponseType))
    .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")),
          new GoogleAppsCardV1Widget().setDecoratedText(new GoogleAppsCardV1DecoratedText()
            .setTopLabel("Assignee")
            // The assignee is now "You"
            .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("assign")))))))))))));
  }
  return null;
}

Apps Script

Ten przykład wysyła wiadomość z kartą, zwracając kod JSON karty. Możesz też użyć usługi kart Apps Script.

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

Wyświetl w GitHubie

/**
 * Updates a card that was attached to a message with a previewed link.
 *
 * @param {Object} event The event object from Chat.
 *
 * @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) {
  // To respond to the correct button, checks the button's actionMethodName.
  if (event.action.actionMethodName === 'assign') {
    // 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.

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

    // Returns the updated card that displays "You" for the assignee
    // and that disables the button.
    return {
      actionResponse: { type: actionResponseType },
      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: 'assign'}}
            }]}}
          ]}]
        }
      }]
    };
  }
}

Ograniczenia i kwestie do rozważenia

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

Każda aplikacja do Google Chat obsługuje podgląd linków dla maksymalnie 5 wzorców adresów URL.
Aplikacje do 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 do Google Chat wyświetlają podgląd tylko linków, 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, które są wysyłane do aplikacji do Google Chat, np. polecenia po ukośniku, podgląd linku wysyła do aplikacji do Google Chat tylko adres URL linku.
Jeśli użytkownik opublikuje link, aplikacja do 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 do Google Chat muszą wyświetlać podgląd linków dla wszystkich osób w pokoju, dlatego wiadomość musi pomijać pole privateMessageViewer.

Debugowanie podglądu linków

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

Wyświetl podgląd linków Zadbaj o dobrą organizację dzięki kolekcji Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.

Jak działa wyświetlanie podglądu linku

Wymagania wstępne

Node.js

Python

Java

Apps Script

Konfigurowanie podglądu linków

Wyświetlanie podglądu linku

JSON

Odpowiadanie wiadomością tekstową

Node.js

Python

Java

Apps Script

Dołączanie karty z podglądem linku

Node.js

Python

Java

Apps Script

Aktualizowanie karty podglądu linku

Node.js

Python

Java

Apps Script

Ograniczenia i kwestie do rozważenia

Debugowanie podglądu linków

Wyświetl podgląd linków