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

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

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

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

איך פועלת התצוגה המקדימה של הקישורים

כשמישהו מוסיף קישור להודעה שלו, מופיע צ'יפ שמציין שיכול להיות שאפליקציית 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 template (דפוס המארח), מזינים את הדומיין של תבנית ה-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 במטען הייעודי (Payload) של האירוע MESSAGE תאפשר לאפליקציית Chat להוסיף מידע להודעה באמצעות הקישור שמופיע בתצוגה המקדימה. אפליקציית Chat יכולה לענות באמצעות הודעת טקסט בסיסית או לצרף כרטיס.

שליחת תשובה בהודעת טקסט

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

Node.js

node/preview-link/index.js

הצגת הקוד ב-GitHub

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

הצגת הקוד ב-GitHub

# 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

הצגת הקוד ב-GitHub

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

הצגת הקוד ב-GitHub

// 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. בדוגמה הזו מצורף כרטיס בסיסי.

Node.js

צומת/preview-link/index.js

הצגת הקוד ב-GitHub

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

הצגת הקוד ב-GitHub

# 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

הצגת הקוד ב-GitHub

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

הצגת הקוד ב-GitHub

// 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 מעדכנת את התצוגה המקדימה של הקישור בכל פעם שמשתמש לוחץ על הלחצן הקצאה אליי, על ידי עדכון השדה הקצאה בכרטיס והשבתה של הלחצן.

Node.js

node/preview-link/index.js

הצגת הקוד ב-GitHub

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

הצגת הקוד ב-GitHub

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

הצגת הקוד ב-GitHub

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

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

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

הצגת הקוד ב-GitHub

/**
 * 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 יכולה לעדכן את כרטיס התצוגה המקדימה של הקישור רק אם המשתמשים מבצעים אינטראקציה עם הכרטיס, למשל בלחיצה על לחצן. אי אפשר לקרוא ל-method update() של Chat API במשאב Message כדי לעדכן הודעה של משתמש באופן אסינכרוני.
• אפליקציות צ'אט צריכות להציג תצוגה מקדימה של קישורים לכל המשתתפים במרחב המשותף, ולכן אסור לכלול את השדה privateMessageViewer בהודעה.

ניפוי באגים בתצוגות מקדימות של קישורים

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