ดูตัวอย่างลิงก์ในข้อความ Google Chat

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

ใน Google Chat ส่วนเสริมจะปรากฏต่อผู้ใช้เป็นแอป Google Chat ดูข้อมูลเพิ่มเติมได้ที่ภาพรวมการขยาย Google Chat

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

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

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

ชิปที่ระบุว่าแอป Chat อาจแสดงตัวอย่างลิงก์

หลังจากส่งข้อความแล้ว ระบบจะส่งลิงก์ไปยังแอปแชท จากนั้นแอปจะสร้างและแนบการ์ดไปกับข้อความของผู้ใช้

แอป Chat แสดงตัวอย่างลิงก์โดยการแนบการ์ดไปกับข้อความ

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

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

ข้อกำหนดเบื้องต้น

Node.js

ส่วนเสริมของ Google Workspace ที่ขยายความสามารถของ Google Chat หากต้องการสร้าง ให้ทำตามการเริ่มต้นใช้งาน HTTP ฉบับย่อ

Apps Script

ส่วนเสริมของ Google Workspace ที่ขยายความสามารถของ Google 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 ของคุณจะได้รับ ออบเจ็กต์เหตุการณ์ที่มี MessagePayload ในเพย์โหลด ออบเจ็กต์ message.matchedUrl จะมีลิงก์ที่ผู้ใช้ใส่ไว้ในข้อความ

JSON

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

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

ตอบกลับด้วย SMS

สําหรับคําตอบพื้นฐาน แอป Chat สามารถแสดงตัวอย่างลิงก์โดยตอบกลับลิงก์ด้วยข้อความ ตัวอย่างนี้แนบข้อความที่ซ้ำ URL ของลิงก์ซึ่งตรงกับรูปแบบ URL ของตัวอย่างลิงก์

Node.js

/**
 * Google Cloud Function that handles messages that have links whose
 * URLs match URL patterns configured for link previewing.
 *
 *
 * @param {Object} req Request sent from Google Chat space
 * @param {Object} res Response to send back
 */
exports.previewLinks = function previewLinks(req, res) {
  const chatEvent = req.body.chat;

  // Handle MESSAGE events
  if(chatEvent.messagePayload) {
    return res.send(handlePreviewLink(chatEvent.messagePayload.message));
  // Handle button clicks
  } else if(chatEvent.buttonClickedPayload) {
    return res.send(handleCardClick(chatEvent.buttonClickedPayload.message));
  }
};

/**
 * Respond to messages that have links whose URLs match URL patterns configured
 * for link previewing.
 *
 * @param {Object} chatMessage The chat message object from Google Workspace Add On event.
 * @return {Object} Response to send back depending on the matched URL.
 */
function handlePreviewLink(chatMessage) {
  // If the Chat app does not detect a link preview URL pattern, reply
  // with a text message that says so.
  if (!chatMessage.matchedUrl) {
    return { hostAppDataAction: { chatDataAction: { createMessageAction: { message: {
      text: 'No matchedUrl detected.'
    }}}}};
  }

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

Apps Script

/**
 * Reply to messages that have links whose URLs match the pattern
 * "text.example.com" configured for link previewing.
 *
 * @param {Object} event The event object from Google Workspace Add-on.
 *
 * @return {Object} The action response.
 */
function onMessage(event) {
  // Stores the Google Chat event as a variable.
  const chatMessage = event.chat.messagePayload.message;

  // If the Chat app doesn't detect a link preview URL pattern, reply
  // with a text message that says so.
  if (!chatMessage.matchedUrl) {
    return { hostAppDataAction: { chatDataAction: { createMessageAction: { message: {
      text: 'No matchedUrl detected.'
    }}}}};
  }

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

หากต้องการแนบการ์ดกับลิงก์ที่แสดงตัวอย่าง ให้แสดงผลการดำเนินการ DataActions พร้อมออบเจ็กต์ ChatDataActionMarkup ประเภท UpdateInlinePreviewAction

ในตัวอย่างต่อไปนี้ แอป Chat จะเพิ่มการ์ดตัวอย่างลงในข้อความที่มีรูปแบบ URL support.example.com

แอป Chat แสดงตัวอย่างลิงก์โดยการแนบการ์ดไปกับข้อความ

Node.js

/**
 * Google Cloud Function that handles messages that have links whose
 * URLs match URL patterns configured for link previewing.
 *
 *
 * @param {Object} req Request sent from Google Chat space
 * @param {Object} res Response to send back
 */
exports.previewLinks = function previewLinks(req, res) {
  const chatEvent = req.body.chat;

  // Handle MESSAGE events
  if(chatEvent.messagePayload) {
    return res.send(handlePreviewLink(chatEvent.messagePayload.message));
  // Handle button clicks
  } else if(chatEvent.buttonClickedPayload) {
    return res.send(handleCardClick(chatEvent.buttonClickedPayload.message));
  }
};

/**
 * Respond to messages that have links whose URLs match URL patterns configured
 * for link previewing.
 *
 * @param {Object} chatMessage The chat message object from Google Workspace Add On event.
 * @return {Object} Response to send back depending on the matched URL.
 */
function handlePreviewLink(chatMessage) {
  // Attach a card to the message for URLs of the subdomain "support"
  if (chatMessage.matchedUrl.url.includes("support.example.com")) {
    // A hard-coded card is used in this example. In a real-life scenario,
    // the case information would be fetched and used to build the card.
    return { hostAppDataAction: { chatDataAction: { updateInlinePreviewAction: { cardsV2: [{
      cardId: 'attachCard',
      card: {
        header: {
          title: 'Example Customer Service Case',
          subtitle: 'Case basics',
        },
        sections: [{ widgets: [
        { decoratedText: { topLabel: 'Case ID', text: 'case123'}},
        { decoratedText: { topLabel: 'Assignee', text: 'Charlie'}},
        { decoratedText: { topLabel: 'Status', text: 'Open'}},
        { decoratedText: { topLabel: 'Subject', text: 'It won\'t turn on...' }},
        { buttonList: { buttons: [{
          text: 'OPEN CASE',
          onClick: { openLink: {
            url: 'https://support.example.com/orders/case123'
          }},
        }, {
          text: 'RESOLVE CASE',
          onClick: { openLink: {
            url: 'https://support.example.com/orders/case123?resolved=y',
          }},
        }, {
          text: 'ASSIGN TO ME',
          // Use runtime environment variable set with self URL
          onClick: { action: { function: process.env.BASE_URL }}
        }]}}
        ]}]
      }
    }]}}}};
  }
}

Apps Script

ตัวอย่างนี้จะส่งข้อความการ์ดโดยแสดงcard JSON นอกจากนี้ คุณยังใช้บริการการ์ด Apps Script ได้ด้วย 

/**
 * Attach a card to messages that have links whose URLs match the pattern
 * "support.example.com" configured for link previewing.
 *
 * @param {Object} event The event object from Google Workspace Add-on.
 *
 * @return {Object} The action response.
 */
function onMessage(event) {
  // Stores the Google Chat event as a variable.
  const chatMessage = event.chat.messagePayload.message;

  // Attach a card to the message for URLs of the subdomain "support".
  if (chatMessage.matchedUrl.url.includes("support.example.com")) {
    // A hard-coded card is used in this example. In a real-life scenario,
    // the case information would be fetched and used to build the card.
    return { hostAppDataAction: { chatDataAction: { updateInlinePreviewAction: { cardsV2: [{
      cardId: 'attachCard',
      card: {
        header: {
          title: 'Example Customer Service Case',
          subtitle: 'Case summary',
        },
        sections: [{ widgets: [
        { decoratedText: { topLabel: 'Case ID', text: 'case123'}},
        { decoratedText: { topLabel: 'Assignee', text: 'Charlie'}},
        { decoratedText: { topLabel: 'Status', text: 'Open'}},
        { decoratedText: { topLabel: 'Subject', text: 'It won\'t turn on...' }},
        { buttonList: { buttons: [{
          text: 'OPEN CASE',
          onClick: { openLink: {
            url: 'https://support.example.com/orders/case123'
          }},
        }, {
          text: 'RESOLVE CASE',
          onClick: { openLink: {
            url: 'https://support.example.com/orders/case123?resolved=y',
          }},
        }, {
          text: 'ASSIGN TO ME',
          // Clicking this button triggers the execution of the function
          // "assign" from the Apps Script project.
          onClick: { action: { function: 'assign'}}
        }]}}
        ]}]
      }
    }]}}}};
  }
}

แอป Chat สามารถอัปเดตการ์ดตัวอย่างลิงก์เมื่อผู้ใช้โต้ตอบกับการ์ด เช่น คลิกปุ่มบนการ์ด

หากต้องการอัปเดตการ์ด แอป Chat ของคุณต้องแสดงผลการดำเนินการ DataActions พร้อมออบเจ็กต์ ChatDataActionMarkup รายการใดรายการหนึ่งต่อไปนี้

  • หากผู้ใช้ส่งข้อความ ให้แสดงออบเจ็กต์ UpdateMessageAction
  • หากแอป Chat ส่งข้อความ ให้แสดงผลออบเจ็กต์ UpdateInlinePreviewAction

หากต้องการระบุว่าใครส่งข้อความ ให้ใช้เพย์โหลดเหตุการณ์ (buttonClickedPayload) เพื่อตรวจสอบว่ามีการกําหนดผู้ส่ง (message.sender.type) เป็น HUMAN (ผู้ใช้) หรือ BOT (แอป Chat)

ตัวอย่างต่อไปนี้แสดงวิธีที่แอป Chat อัปเดตตัวอย่างลิงก์ทุกครั้งที่ผู้ใช้คลิกปุ่มมอบหมายให้ฉันโดยการอัปเดตฟิลด์ผู้ได้รับมอบหมายของการ์ดและปิดใช้ปุ่ม

แอปแชทแสดงตัวอย่างลิงก์ที่มีการ์ดเวอร์ชันอัปเดตที่แนบมากับข้อความ

Node.js

/**
 * Google Cloud Function that handles messages that have links whose
 * URLs match URL patterns configured for link previewing.
 *
 *
 * @param {Object} req Request sent from Google Chat space
 * @param {Object} res Response to send back
 */
exports.previewLinks = function previewLinks(req, res) {
  const chatEvent = req.body.chat;

  // Handle MESSAGE events
  if(chatEvent.messagePayload) {
    return res.send(handlePreviewLink(chatEvent.messagePayload.message));
  // Handle button clicks
  } else if(chatEvent.buttonClickedPayload) {
    return res.send(handleCardClick(chatEvent.buttonClickedPayload.message));
  }
};

/**
 * Respond to clicks by assigning user and updating the card that was attached to a
 * message with a previewed link.
 *
 * @param {Object} chatMessage The chat message object from Google Workspace Add On event.
 * @return {Object} Action response depending on the original message.
 */
function handleCardClick(chatMessage) {
  // Creates the updated card that displays "You" for the assignee
  // and that disables the button.
  //
  // A hard-coded card is used in this example. In a real-life scenario,
  // an actual assign action would be performed before building the card.
  const message = { cardsV2: [{
    cardId: 'attachCard',
    card: {
      header: {
        title: 'Example Customer Service Case',
        subtitle: 'Case basics',
      },
      sections: [{ widgets: [
        { decoratedText: { topLabel: 'Case ID', text: 'case123'}},
        // The assignee is now "You"
        { decoratedText: { topLabel: 'Assignee', text: 'You'}},
        { decoratedText: { topLabel: 'Status', text: 'Open'}},
        { decoratedText: { topLabel: 'Subject', text: 'It won\'t turn on...' }},
        { buttonList: { buttons: [{
          text: 'OPEN CASE',
          onClick: { openLink: {
            url: 'https://support.example.com/orders/case123'
          }},
        }, {
          text: 'RESOLVE CASE',
          onClick: { openLink: {
            url: 'https://support.example.com/orders/case123?resolved=y',
          }},
        }, {
          text: 'ASSIGN TO ME',
          // The button is now disabled
          disabled: true,
          // Use runtime environment variable set with self URL
          onClick: { action: { function: process.env.BASE_URL }}
        }]}}
      ]}]
    }
  }]};

  // Checks whether the message event originated from a human or a Chat app
  // to return the adequate action response.
  if(chatMessage.sender.type === 'HUMAN') {
    return { hostAppDataAction: { chatDataAction: { updateInlinePreviewAction: message }}};
  } else {
    return { hostAppDataAction: { chatDataAction: { updateMessageAction: message }}};
  }
}

Apps Script

ตัวอย่างนี้จะส่งข้อความการ์ดโดยแสดงcard JSON นอกจากนี้ คุณยังใช้บริการการ์ด Apps Script ได้ด้วย 

/**
 * Assigns and updates the card that's attached to a message with a
 * previewed link of the pattern "support.example.com".
 *
 * @param {Object} event The event object from the Google Workspace Add-on.
 *
 * @return {Object} Action response depending on the message author.
 */
function assign(event) {
  // Creates the updated card that displays "You" for the assignee
  // and that disables the button.
  //
  // A hard-coded card is used in this example. In a real-life scenario,
  // an actual assign action would be performed before building the card.
  const message = { cardsV2: [{
    cardId: 'attachCard',
    card: {
      header: {
        title: 'Example Customer Service Case',
        subtitle: 'Case summary',
      },
      sections: [{ widgets: [
        { decoratedText: { topLabel: 'Case ID', text: 'case123'}},
        // The assignee is now "You"
        { decoratedText: { topLabel: 'Assignee', text: 'You'}},
        { decoratedText: { topLabel: 'Status', text: 'Open'}},
        { decoratedText: { topLabel: 'Subject', text: 'It won\'t turn on...' }},
        { buttonList: { buttons: [{
          text: 'OPEN CASE',
          onClick: { openLink: {
            url: 'https://support.example.com/orders/case123'
          }},
        }, {
          text: 'RESOLVE CASE',
          onClick: { openLink: {
            url: 'https://support.example.com/orders/case123?resolved=y',
          }},
        }, {
          text: 'ASSIGN TO ME',
          // The button is now disabled
          disabled: true,
          onClick: { action: { function: 'assign'}}
        }]}}
      ]}]
    }
  }]};

  // Use the adequate action response type. It depends on whether the message
  // the preview link card is attached to was created by a human or a Chat app.
  if(event.chat.buttonClickedPayload.message.sender.type === 'HUMAN') {
    return { hostAppDataAction: { chatDataAction: { updateInlinePreviewAction: message }}};
  } else {
    return { hostAppDataAction: { chatDataAction: { updateMessageAction: message }}};
  }
}

ข้อจำกัดและข้อควรพิจารณา

เมื่อกำหนดค่าตัวอย่างลิงก์สำหรับแอป Chat โปรดคำนึงถึงข้อจำกัดและข้อควรพิจารณาต่อไปนี้

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

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