แสดงตัวอย่างลิงก์

หากไม่ต้องการให้ผู้ใช้เปลี่ยนบริบทเมื่อแชร์ลิงก์ใน Google Chat แอป Chat จะแสดงตัวอย่างลิงก์ได้โดยแนบการ์ดไปกับข้อความ ซึ่งจะให้ข้อมูลเพิ่มเติมและช่วยให้ผู้ใช้ดำเนินการต่างๆ ได้โดยตรงจาก Google Chat

ตัวอย่างเช่น สมมติว่าพื้นที่ทำงาน Google Chat มีตัวแทนฝ่ายบริการลูกค้าทั้งหมดของบริษัท รวมถึงแอป Chat ที่ชื่อ Case-y ตัวแทนมักจะแชร์ลิงก์ไปยังเคสบริการลูกค้าในพื้นที่ทำงานของ 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/ เป็นรูปแบบ URL ในหน้าการกําหนดค่าของแอป Chat ในคอนโซล Google Cloud เพื่อให้แอป Chat แสดงตัวอย่างลิงก์เหล่านั้นได้

1. เปิดคอนโซล Google Cloud
2. คลิกลูกศรลง ข้าง "Google Cloud" แล้วเปิดโปรเจ็กต์ของแอป Chat
3. ในช่องค้นหา ให้พิมพ์ Google Chat API แล้วคลิก Google Chat API
4. คลิกจัดการ > การกําหนดค่า
5. ในส่วนตัวอย่างลิงก์ ให้เพิ่มหรือแก้ไขรูปแบบ URL
   1. หากต้องการกําหนดค่าตัวอย่างลิงก์สําหรับรูปแบบ URL ใหม่ ให้คลิกเพิ่มรูปแบบ URL
   2. หากต้องการแก้ไขการกําหนดค่าสําหรับรูปแบบ URL ที่มีอยู่ ให้คลิกลูกศรลง

6. ในช่องรูปแบบโฮสต์ ให้ป้อนโดเมนของรูปแบบ URL แอป Chat จะแสดงตัวอย่างลิงก์ไปยังโดเมนนี้

   หากต้องการให้แอปแชทแสดงตัวอย่างลิงก์สำหรับโดเมนย่อยที่เฉพาะเจาะจง เช่น subdomain.example.com ให้ใส่โดเมนย่อยนั้น

   หากต้องการให้แอปแชทแสดงตัวอย่างลิงก์สำหรับทั้งโดเมน ให้ระบุอักขระไวลด์การ์ดที่มีเครื่องหมายดอกจัน (*) เป็นโดเมนย่อย เช่น *.example.com ตรงกับ subdomain.example.com และ any.number.of.subdomains.example.com

7. ในช่องคำนำหน้าเส้นทาง ให้ป้อนเส้นทางที่ต้องการเพิ่มต่อท้ายโดเมนสำหรับรูปแบบโฮสต์

   หากต้องการจับคู่ URL ทั้งหมดในโดเมนรูปแบบโฮสต์ ให้ปล่อยคำนำหน้าเส้นทางว่างไว้

   เช่น หากรูปแบบโฮสต์คือ support.example.com ให้ป้อน cases/ เพื่อจับคู่ URL สำหรับเคสที่โฮสต์ที่ support.example.com/cases/

8. คลิกเสร็จสิ้น

9. คลิกบันทึก

จากนั้นเมื่อมีผู้ใส่ลิงก์ที่ตรงกับรูปแบบ URL ตัวอย่างลิงก์ในข้อความในพื้นที่ใน Chat ที่มีแอป Chat ของคุณ แอปจะแสดงตัวอย่างลิงก์นั้น

ดูตัวอย่างลิงก์

หลังจากกำหนดค่าการแสดงตัวอย่างลิงก์สำหรับลิงก์หนึ่งๆ แล้ว แอปแชทจะจดจำและแสดงตัวอย่างลิงก์ได้โดยแนบข้อมูลเพิ่มเติมไปกับลิงก์

ภายในพื้นที่ใน Chat ที่มีแอป Chat เมื่อข้อความของผู้อื่นมีลิงก์ที่ตรงกับรูปแบบ URL ตัวอย่างลิงก์ แอป Chat จะได้รับเหตุการณ์การโต้ตอบ MESSAGE พูลข้อมูล JSON สำหรับเหตุการณ์การโต้ตอบมีช่อง matchedUrl ดังนี้

JSON

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

การตรวจสอบว่ามีช่อง matchedUrl ในเพย์โหลดเหตุการณ์ MESSAGE หรือไม่จะช่วยให้แอปแชทเพิ่มข้อมูลลงในข้อความที่มีลิงก์ตัวอย่างได้ แอป 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

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

ตัวอย่างนี้จะส่งข้อความการ์ดโดยแสดงcard 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 แต่ละแอปรองรับการแสดงตัวอย่างลิงก์สำหรับรูปแบบ URL ได้สูงสุด 5 รูปแบบ
• แอป Chat จะแสดงตัวอย่างลิงก์ 1 รายการต่อข้อความ หากมีลิงก์ที่แสดงตัวอย่างได้หลายรายการในข้อความเดียว ระบบจะแสดงตัวอย่างเฉพาะลิงก์แรกที่แสดงตัวอย่างได้
• แอปรับส่งข้อความจะแสดงตัวอย่างเฉพาะลิงก์ที่ขึ้นต้นด้วย https:// ดังนั้น https://support.example.com/cases/ จึงแสดงตัวอย่าง แต่ support.example.com/cases/ จะไม่แสดง
• เว้นแต่ข้อความจะมีข้อมูลอื่นๆ ที่ส่งไปยังแอป Chat เช่น คำสั่งเครื่องหมายทับ ระบบจะส่งเฉพาะ URL ของลิงก์ไปยังแอป Chat ผ่านตัวอย่างลิงก์
• หากผู้ใช้โพสต์ลิงก์ แอป Chat จะอัปเดตการ์ดตัวอย่างลิงก์ได้ก็ต่อเมื่อผู้ใช้โต้ตอบกับการ์ด เช่น คลิกปุ่ม คุณจะเรียกใช้เมธอด update() ของ Chat API ในแหล่งข้อมูล Message เพื่ออัปเดตข้อความของผู้ใช้แบบไม่พร้อมกันไม่ได้
• แอป Chat ต้องแสดงตัวอย่างลิงก์สำหรับทุกคนในพื้นที่ทำงาน ข้อความจึงจะไม่ต้องใส่ช่อง privateMessageViewer

แก้ไขข้อบกพร่องของตัวอย่างลิงก์

เมื่อใช้การแสดงตัวอย่างลิงก์ คุณอาจต้องแก้ไขข้อบกพร่องของแอป Chat โดยการอ่านบันทึกของแอป หากต้องการอ่านบันทึก ให้ไปที่ Logs Explorer ในคอนโซล Google Cloud