תצוגה מקדימה של הקישורים

כדי למנוע מעבר להקשר אחר כשמשתמשים משתפים קישור ב-Google Chat, אפליקציית Chat יכולה לצרף כרטיס להודעה שלהם כדי להציג תצוגה מקדימה של הקישור. הכרטיס הזה מכיל מידע נוסף ומאפשר לאנשים לבצע פעולות ישירות מ-Google Chat.

לדוגמה, נניח שיש מרחב משותף ב-Google Chat שכולל את כל נציגי שירות הלקוחות של חברה מסוימת, וגם אפליקציית Chat בשם Case-y. נציגי התמיכה משתפים לעיתים קרובות קישורים לבקשות תמיכה במרחב המשותף ב-Chat, וכל פעם שהם עושים זאת, הקולגות שלהם צריכים לפתוח את הקישור לבקשה כדי לראות פרטים כמו המשתמש שהוקצה, הסטטוס והנושא. כמו כן, אם מישהו רוצה לקבל בעלות על בקשת תמיכה או לשנות את הסטטוס שלה, הוא צריך לפתוח את הקישור.

התכונה 'תצוגה מקדימה של קישורים' מאפשרת לאפליקציית Chat במרחב המשותף, Case-y, לצרף כרטיס עם פרטי המשתמש שהוקצה לבקשת התמיכה, הסטטוס והנושא שלה בכל פעם שמישהו משתף קישור לבקשת תמיכה. לחצנים בכרטיס מאפשרים לנציגי התמיכה לקבל בעלות על הפנייה ולשנות את הסטטוס ישירות מתוך שיחת הצ'אט.

כשמישהו מוסיף קישור להודעה שלו, מופיע צ'יפ שמציין שיכול להיות שהקישור יוצג בתצוגה מקדימה באפליקציית Chat.

צ'יפ שמציין שאפליקציית Chat עשויה להציג תצוגה מקדימה של קישור

אחרי שליחת ההודעה, הקישור נשלח לאפליקציית Chat, שמפעילה את היצירה של הכרטיס ומצרפת אותו להודעה של המשתמש.

תצוגה מקדימה של קישור באפליקציית Chat באמצעות צירוף כרטיס להודעה

לצד הקישור, בכרטיס מוצג מידע נוסף על הקישור, כולל רכיבים אינטראקטיביים כמו לחצנים. אפליקציית Chat יכולה לעדכן את הכרטיס המצורף בתגובה לאינטראקציות של המשתמשים, כמו קליקים על לחצנים.

אם מישהו לא רוצה שמערכת Chat תציג תצוגה מקדימה של הקישור שלו על ידי צירוף כרטיס להודעה, הוא יכול למנוע את הצגת התצוגה המקדימה בלחיצה על בצ'יפ התצוגה המקדימה. המשתמשים יכולים להסיר את הכרטיס המצורף בכל שלב בלחיצה על הסרת התצוגה המקדימה.

דרישות מוקדמות

Node.js

אפליקציית Google Chat שמופעלות בה תכונות אינטראקטיביות. כדי ליצור אפליקציה אינטראקטיבית ל-Chat באמצעות שירות HTTP, תוכלו להיעזר במדריך למתחילים הזה.

Python

אפליקציית Google Chat שמופעלות בה תכונות אינטראקטיביות. כדי ליצור אפליקציה אינטראקטיבית ל-Chat באמצעות שירות HTTP, תוכלו להיעזר במדריך למתחילים הזה.

Java

אפליקציית Google Chat שמופעלות בה תכונות אינטראקטיביות. כדי ליצור אפליקציה אינטראקטיבית ל-Chat באמצעות שירות HTTP, תוכלו להיעזר במדריך למתחילים הזה.

Apps Script

אפליקציית Google Chat שמופעלות בה תכונות אינטראקטיביות. כדי ליצור אפליקציה אינטראקטיבית ל-Chat ב-Apps Script, תוכלו להיעזר במדריך למתחילים.

כדי שתוכלו לראות תצוגה מקדימה של קישורים ספציפיים – כמו example.com, ‏ support.example.com ו-support.example.com/cases/ – באפליקציית Chat, צריך לרשום אותם כתבניות של כתובות URL בדף ההגדרות של אפליקציית Chat במסוף Google Cloud.

תפריט ההגדרות של תצוגות מקדימות של קישורים

  1. פותחים את מסוף Google Cloud.
  2. לצד 'Google Cloud', לוחצים על החץ למטה ופותחים את הפרויקט של אפליקציית Chat.
  3. בשדה החיפוש, מקלידים Google Chat API ולוחצים על Google Chat API.
  4. לוחצים על ניהול > הגדרה.
  5. בקטע 'תצוגה מקדימה של קישורים', מוסיפים או עורכים תבנית של כתובת URL.
    1. כדי להגדיר תצוגות מקדימות של קישורים לתבנית חדשה של כתובת URL, לוחצים על הוספת תבנית של כתובת URL.
    2. כדי לערוך את ההגדרה של תבנית כתובת URL קיימת, לוחצים על החץ למטה .
  6. בשדה Host pattern (תבנית מארח), מזינים את הדומיין של תבנית ה-URL. אפליקציית Chat תציג תצוגה מקדימה של קישורים לדומיין הזה.

    כדי שאפשר יהיה לראות תצוגה מקדימה של קישורים בתת-דומיין ספציפי באפליקציית Chat, כמו subdomain.example.com, צריך לכלול את תת-הדומיין.

    כדי שאפשר יהיה לראות תצוגה מקדימה של קישורים לדומיין כולו באפליקציית Chat, צריך לציין תו כללי לחיפוש עם כוכב (*) בתור תת-הדומיין. לדוגמה, הערך *.example.com תואם ל-subdomain.example.com ול-any.number.of.subdomains.example.com.

  7. בשדה Path prefix, מזינים נתיב להוספה לדומיין של תבנית המארח.

    כדי להתאים לכל כתובות ה-URL בדומיין של תבנית המארח, משאירים את השדה Path prefix (תחילית הנתיב) ריק.

    לדוגמה, אם דפוס המארח הוא support.example.com, כדי להתאים כתובות URL לבקשות תמיכה שמתארחות ב-support.example.com/cases/, מזינים cases/.

  8. לוחצים על סיום.

  9. לוחצים על שמירה.

מעכשיו, בכל פעם שמישהו יכלול בהודעה במרחב משותף ב-Chat קישור שתואם לדפוס של כתובת URL לתצוגה מקדימה של קישור, האפליקציה שלכם תציג תצוגה מקדימה של הקישור.

אחרי שמגדירים תצוגה מקדימה של קישור מסוים, אפליקציית Chat יכולה לזהות את הקישור ולהציג תצוגה מקדימה שלו על ידי צירוף מידע נוסף אליו.

במרחבים משותפים ב-Chat שכוללים את אפליקציית Chat, כשהודעה של משתמש מכילה קישור שתואם לדפוס של כתובת URL של תצוגה מקדימה של קישור, אפליקציית Chat מקבלת אירוע אינטראקציה מסוג MESSAGE. עומס העבודה (payload) של ה-JSON באירוע האינטראקציה מכיל את השדה matchedUrl:

JSON

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

על ידי בדיקה של נוכחות השדה matchedUrl בתוכן של האירוע MESSAGE, אפליקציית Chat יכולה להוסיף מידע להודעה עם הקישור שמוצג בתצוגה המקדימה. אפליקציית Chat יכולה לענות בהודעת טקסט בסיסית או לצרף כרטיס.

מענה בהודעת טקסט

בתשובות בסיסיות, אפשר להציג תצוגה מקדימה של קישור באפליקציית Chat על ידי שליחת הודעת טקסט פשוטה אל הקישור. בדוגמה הזו מצורפת הודעה שמציגה שוב את כתובת ה-URL של הקישור שתואמת לתבנית של כתובת URL של תצוגה מקדימה של קישור.

Node.js

node/preview-link/index.js
// 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
# 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
// 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
// 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
  };
}

כדי לצרף כרטיס לקישור שמוצג בתצוגה מקדימה, צריך להחזיר ActionResponse מסוג UPDATE_USER_MESSAGE_CARDS. בדוגמה הזו מצורף כרטיס בסיסי.

תצוגה מקדימה של קישור באפליקציית Chat באמצעות צירוף כרטיס להודעה

Node.js

node/preview-link/index.js
// 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
# 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
// 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

בדוגמה הזו, ההודעה על הכרטיס נשלחת על ידי החזרת card JSON. אפשר גם להשתמש בשירות הכרטיסים של Apps Script.

apps-script/preview-link/preview-link.gs
// 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'}}
          }]}}
        ]}]
      }
    }]
  };
}

אפליקציית Chat יכולה לעדכן כרטיס של תצוגה מקדימה של קישור כשמשתמשים יוצרים איתו אינטראקציה, למשל לוחצים על לחצן בכרטיס.

כדי לעדכן את הכרטיס, אפליקציית Chat צריכה לטפל באירוע האינטראקציה CARD_CLICKED ולהחזיר את הערך actionResponse בהתאם למי ששלח את ההודעה שמכילה את התצוגה המקדימה של הקישור:

  • אם משתמש שלח את ההודעה, מגדירים את הערך של actionResponse.type ל-UPDATE_USER_MESSAGE_CARDS.
  • אם ההודעה נשלחה מאפליקציית Chat, מגדירים את הערך של actionResponse.type בתור UPDATE_MESSAGE.

כדי לקבוע מי שלח את ההודעה, אפשר להשתמש בשדה message.sender.type של אירוע האינטראקציה כדי לראות אם השולח היה משתמש HUMAN או BOT.

בדוגמה הבאה מוסבר איך אפליקציית Chat מעדכנת את התצוגה המקדימה של הקישור בכל פעם שמשתמש לוחץ על הלחצן הקצאה אליי, על ידי עדכון השדה הקצאה בכרטיס והשבתה של הלחצן.

תצוגה מקדימה של קישור עם גרסה מעודכנת של כרטיס שמצורף להודעה באפליקציית Chat

Node.js

node/preview-link/index.js
/**
 * 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
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
// 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

בדוגמה הזו, ההודעה על הכרטיס נשלחת על ידי החזרת card JSON. אפשר גם להשתמש בשירות הכרטיסים של Apps Script.

apps-script/preview-link/preview-link.gs
/**
 * 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'}}
            }]}}
          ]}]
        }
      }]
    };
  }
}

מגבלות ושיקולים

כשמגדירים תצוגות מקדימות של קישורים באפליקציית Chat, חשוב לשים לב למגבלות ולשיקולים הבאים:

  • בכל אפליקציית Chat יש תמיכה בתצוגות מקדימות של קישורים עד 5 דפוסי כתובות URL.
  • באפליקציות Chat מוצגת תצוגה מקדימה של קישור אחד בכל הודעה. אם יש כמה קישורים שאפשר להציג תצוגה מקדימה שלהם בהודעה אחת, רק הקישור הראשון שאפשר להציג תצוגה מקדימה שלו יוצג.
  • אפליקציות צ'אט מציגות תצוגה מקדימה רק של קישורים שמתחילים ב-https://, כך ש-https://support.example.com/cases/ מציגה תצוגה מקדימה אבל support.example.com/cases/ לא.
  • אלא אם ההודעה כוללת מידע נוסף שנשלח לאפליקציית Chat, כמו פקודת קו נטוי, רק כתובת ה-URL של הקישור נשלחת לאפליקציית Chat באמצעות תצוגות מקדימות של קישורים.
  • אם משתמש מפרסם את הקישור, אפליקציית Chat יכולה לעדכן את הכרטיס עם התצוגה המקדימה של הקישור רק אם המשתמשים יוצרים אינטראקציה עם הכרטיס, למשל לוחצים על לחצן. אי אפשר להפעיל את השיטה update() של Chat API במשאב Message כדי לעדכן הודעה של משתמש באופן אסינכרוני.
  • אפליקציות צ'אט צריכות להציג תצוגה מקדימה של קישורים לכל המשתתפים במרחב המשותף, ולכן אסור לכלול את השדה privateMessageViewer בהודעה.

כשאתם מטמיעים תצוגה מקדימה של קישורים, יכול להיות שתצטרכו לנפות באגים באפליקציית Chat על ידי קריאת היומנים של האפליקציה. כדי לקרוא את היומנים, אפשר להיכנס לדף Logs Explorer במסוף Google Cloud.