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

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

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

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

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

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

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

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

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

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

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

Node.js

แอป 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 จะแสดงตัวอย่างลิงก์ไปยังโดเมนนี้

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

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

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

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

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

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

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

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

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

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

JSON

"message": {

  . . . // other message attributes redacted

  "matchedUrl": {
     "url": "https://support.example.com/cases/case123"
   },

  . . . // other message attributes redacted

}

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

ตอบกลับด้วยข้อความ

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

Node.js

node/preview-link/simple-text-message.js
/**
 * Responds to messages that have links whose URLs match URL patterns
 * configured for link previewing.
 *
 * @param {Object} req Request sent from Google Chat.
 * @param {Object} res Response to send back.
 */
exports.onMessage = (req, res) => {
  if (req.method === 'GET' || !req.body.message) {
    return res.send(
      'Hello! This function is meant to be used in a Google Chat Space.');
  }

  // Checks for the presence of event.message.matchedUrl and responds with a
  // text message if present
  if (req.body.message.matchedUrl) {
    return res.json({
      'text': 'req.body.message.matchedUrl.url: ' +
        req.body.message.matchedUrl.url,
    });
  }

  // If the Chat app doesn’t detect a link preview URL pattern, it says so.
  return res.json({'text': 'No matchedUrl detected.'});
};

Apps Script

apps-script/preview-link/simple-text-message.gs
/**
 * Responds to messages that have links whose URLs match URL patterns
 * configured for link previewing.
 *
 * @param {Object} event The event object from Chat API.
 *
 * @return {Object} Response from the Chat app attached to the message with
 * the previewed link.
 */
function onMessage(event) {
  // Checks for the presence of event.message.matchedUrl and responds with a
  // text message if present
  if (event.message.matchedUrl) {
    return {
      'text': 'event.message.matchedUrl.url: ' + event.message.matchedUrl.url,
    };
  }

  // If the Chat app doesn’t detect a link preview URL pattern, it says so.
  return {'text': 'No matchedUrl detected.'};
}

แนบบัตร

วิธีแนบการ์ดกับลิงก์ที่แสดงตัวอย่าง ส่งคืน ActionResponse ประเภท UPDATE_USER_MESSAGE_CARDS ตัวอย่างนี้มีการแนบการ์ดแบบง่าย

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

Node.js

node/preview-link/attach-card.js
/**
 * Responds to messages that have links whose URLs match URL patterns
 * configured for link previewing.
 *
 * @param {Object} req Request sent from Google Chat.
 * @param {Object} res Response to send back.
 */
exports.onMessage = (req, res) => {
  if (req.method === 'GET' || !req.body.message) {
    return res.send(
      'Hello! This function is meant to be used in a Google Chat Space.');
  }

  // Checks for the presence of event.message.matchedUrl and attaches a card
  // if present
  if (req.body.message.matchedUrl) {
    return res.json({
      'actionResponse': {'type': 'UPDATE_USER_MESSAGE_CARDS'},
      'cardsV2': [
        {
          'cardId': 'attachCard',
          'card': {
            'header': {
              'title': 'Example Customer Service Case',
              'subtitle': 'Case basics',
            },
            'sections': [
              {
                'widgets': [
                  {'keyValue': {'topLabel': 'Case ID', 'content': 'case123'}},
                  {'keyValue': {'topLabel': 'Assignee', 'content': 'Charlie'}},
                  {'keyValue': {'topLabel': 'Status', 'content': 'Open'}},
                  {
                    'keyValue': {
                      'topLabel': 'Subject', 'content': 'It won"t turn on...',
                    }
                  },
                ],
              },
              {
                'widgets': [
                  {
                    'buttons': [
                      {
                        'textButton': {
                          'text': 'OPEN CASE',
                          'onClick': {
                            'openLink': {
                              'url': 'https://support.example.com/orders/case123',
                            },
                          },
                        },
                      },
                      {
                        'textButton': {
                          'text': 'RESOLVE CASE',
                          'onClick': {
                            'openLink': {
                              'url': 'https://support.example.com/orders/case123?resolved=y',
                            },
                          },
                        },
                      },
                      {
                        'textButton': {
                          'text': 'ASSIGN TO ME',
                          'onClick': {
                            'action': {
                              'actionMethodName': 'assign',
                            },
                          },
                        },
                      },
                    ],
                  },
                ],
              },
            ],
          },
        },
      ],
    });
  }

  // If the Chat app doesn’t detect a link preview URL pattern, it says so.
  return res.json({'text': 'No matchedUrl detected.'});
};

Apps Script

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

apps-script/preview-link/attach-card.gs
/**
 * Responds to messages that have links whose URLs match URL patterns
 * configured for link previewing.
 *
 * @param {Object} event The event object from Chat API.
 * @return {Object} Response from the Chat app attached to the message with
 * the previewed link.
 */
function onMessage(event) {
  // Checks for the presence of event.message.matchedUrl and attaches a card
  // if present
  if (event.message.matchedUrl) {
    return {
      'actionResponse': {
        'type': 'UPDATE_USER_MESSAGE_CARDS',
      },
      'cardsV2': [{
        'cardId': 'attachCard',
        'card': {
          'header': {
            'title': 'Example Customer Service Case',
            'subtitle': 'Case basics',
          },
          'sections': [{
            'widgets': [
              {'keyValue': {'topLabel': 'Case ID', 'content': 'case123'}},
              {'keyValue': {'topLabel': 'Assignee', 'content': 'Charlie'}},
              {'keyValue': {'topLabel': 'Status', 'content': 'Open'}},
              {
                'keyValue': {
                  'topLabel': 'Subject', 'content': 'It won\'t turn on...',
                },
              },
            ],
          },
          {
            'widgets': [{
              'buttons': [
                {
                  'textButton': {
                    'text': 'OPEN CASE',
                    'onClick': {
                      'openLink': {
                        'url': 'https://support.example.com/orders/case123',
                      },
                    },
                  },
                },
                {
                  'textButton': {
                    'text': 'RESOLVE CASE',
                    'onClick': {
                      'openLink': {
                        'url': 'https://support.example.com/orders/case123?resolved=y',
                      },
                    },
                  },
                },
                {
                  'textButton': {
                    'text': 'ASSIGN TO ME',
                    'onClick': {'action': {'actionMethodName': 'assign'}},
                  },
                },
              ],
            }],
          }],
        },
      }],
    };
  }

  // If the Chat app doesn’t detect a link preview URL pattern, it says so.
  return {'text': 'No matchedUrl detected.'};
}

อัปเดตบัตร

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

การแสดงตัวอย่างลิงก์ไม่รองรับการส่งคืน ActionResponse ประเภท UPDATE_MESSAGE เนื่องจาก UPDATE_MESSAGE จะอัปเดตทั้งข้อความแทนที่จะอัปเดตเฉพาะการ์ด จึงทำงานได้ก็ต่อเมื่อแอป Chat สร้างข้อความต้นฉบับไว้เท่านั้น การแสดงตัวอย่างลิงก์จะแนบการ์ดไปกับข้อความที่ผู้ใช้สร้างขึ้น แอป Chat จึงไม่มีสิทธิ์อัปเดตการ์ด

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

  • หากผู้ใช้สร้างข้อความ ให้ตั้งค่า ActionResponse เป็น UPDATE_USER_MESSAGE_CARDS
  • หากแอป Chat สร้างข้อความขึ้น ให้ตั้งค่า ActionResponse เป็น UPDATE_MESSAGE

ซึ่งทําได้ 2 วิธี ได้แก่ การระบุและตรวจสอบ actionMethodName ที่กําหนดเองในฐานะส่วนหนึ่งของพร็อพเพอร์ตี้ onclick ของการ์ดที่แนบมา (ซึ่งระบุข้อความเป็นที่ผู้ใช้สร้าง) หรือตรวจสอบว่าข้อความสร้างขึ้นโดยผู้ใช้หรือไม่

ตัวเลือกที่ 1: ตรวจหา actionMethodName

หากต้องการใช้ actionMethodName เพื่อจัดการเหตุการณ์การโต้ตอบ CARD_CLICKED รายการในการ์ดที่แสดงตัวอย่างอย่างเหมาะสม ให้ตั้งค่า actionMethodName ที่กำหนดเองเป็นส่วนหนึ่งของพร็อพเพอร์ตี้ onclick ของการ์ดที่แนบมา ดังนี้

JSON

. . . // Preview card details
{
  "textButton": {
    "text": "ASSIGN TO ME",
    "onClick": {

      // actionMethodName identifies the button to help determine the
      // appropriate ActionResponse.
      "action": {
        "actionMethodName": "assign",
      }
    }
  }
}
. . . // Preview card details

เมื่อ "actionMethodName": "assign" ระบุปุ่มเป็นส่วนหนึ่งของตัวอย่างลิงก์ คุณจะแสดง ActionResponse ที่ถูกต้องแบบไดนามิกได้โดยการตรวจสอบ actionMethodName ที่ตรงกัน ดังนี้

Node.js

node/preview-link/update-card.js
/**
 * Responds to messages that have links whose URLs match URL patterns
 * configured for link previewing.
 *
 * @param {Object} req Request sent from Google Chat.
 * @param {Object} res Response to send back.
 */
exports.onMessage = (req, res) => {
  if (req.method === 'GET' || !req.body.message) {
    return res.send(
      'Hello! This function is meant to be used in a Google Chat Space.');
  }

  // Respond to button clicks on attached cards
  if (req.body.type === 'CARD_CLICKED') {
    // Checks for the presence of "actionMethodName": "assign" and sets
    // actionResponse.type to "UPDATE_USER"MESSAGE_CARDS" if present or
    // "UPDATE_MESSAGE" if absent.
    const actionResponseType = req.body.action.actionMethodName === 'assign' ?
      'UPDATE_USER_MESSAGE_CARDS' :
      'UPDATE_MESSAGE';

    if (req.body.action.actionMethodName === 'assign') {
      return res.json({
        'actionResponse': {

          // Dynamically returns the correct actionResponse type.
          'type': actionResponseType,
        },

        // Preview card details
        'cardsV2': [{}],
      });
    }
  }
};

Apps Script

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

apps-script/preview-link/update-card.gs
/**
 * Updates a card that was attached to a message with a previewed link.
 *
 * @param {Object} event The event object from Chat API.
 * @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) {
  // Checks for the presence of "actionMethodName": "assign" and sets
  // actionResponse.type to "UPDATE_USER"MESSAGE_CARDS" if present or
  // "UPDATE_MESSAGE" if absent.
  const actionResponseType = event.action.actionMethodName === 'assign' ?
    'UPDATE_USER_MESSAGE_CARDS' :
    'UPDATE_MESSAGE';

  if (event.action.actionMethodName === 'assign') {
    return assignCase(actionResponseType);
  }
}

/**
 * Updates a card to say that "You" are the assignee after clicking the Assign
 * to Me button.
 *
 * @param {String} actionResponseType Which actionResponse the Chat app should
 * use to update the attached card based on who created the message.
 * @return {Object} Response from the Chat app. Updates the card attached to
 * the message with the previewed link.
 */
function assignCase(actionResponseType) {
  return {
    'actionResponse': {

      // Dynamically returns the correct actionResponse type.
      'type': actionResponseType,
    },
    // Preview card details
    'cardsV2': [{}],
  };
}

ตัวเลือกที่ 2: ตรวจสอบประเภทผู้ส่ง

ตรวจสอบว่าmessage.sender.typeคือHUMANหรือBOT หากเป็น HUMAN ให้ตั้งค่า ActionResponse เป็น UPDATE_USER_MESSAGE_CARDS หรือตั้งค่า ActionResponse เป็น UPDATE_MESSAGE โดยทำดังนี้

Node.js

node/preview-link/sender-type.js
/**
 * Responds to messages that have links whose URLs match URL patterns
 * configured for link previewing.
 *
 * @param {Object} req Request sent from Google Chat.
 * @param {Object} res Response to send back.
 */
exports.onMessage = (req, res) => {
  if (req.method === 'GET' || !req.body.message) {
    return res.send(
      'Hello! This function is meant to be used in a Google Chat Space.');
  }

  // Respond to button clicks on attached cards
  if (req.body.type === 'CARD_CLICKED') {
    // 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 = req.body.action.actionMethodName === 'HUMAN' ?
      'UPDATE_USER_MESSAGE_CARDS' :
      'UPDATE_MESSAGE';

    return res.json({
      'actionResponse': {

        // Dynamically returns the correct actionResponse type.
        'type': actionResponseType,
      },

      // Preview card details
      'cardsV2': [{}],
    });
  }
};

Apps Script

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

apps-script/preview-link/sender-type.gs
/**
 * Updates a card that was attached to a message with a previewed link.
 *
 * @param {Object} event The event object from Chat API.
 * @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) {
  // 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';

  return assignCase(actionResponseType);
}

/**
 * Updates a card to say that "You" are the assignee after clicking the Assign
 * to Me button.
 *
 * @param {String} actionResponseType Which actionResponse the Chat app should
 * use to update the attached card based on who created the message.
 * @return {Object} Response from the Chat app. Updates the card attached to
 * the message with the previewed link.
 */
function assignCase(actionResponseType) {
  return {
    'actionResponse': {

      // Dynamically returns the correct actionResponse type.
      'type': actionResponseType,
    },
    // Preview card details
    'cardsV2': [{}],
  };
}

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

ตัวอย่างที่สมบูรณ์: กรณี y แอป Chat สำหรับการบริการลูกค้า

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

Node.js

node/preview-link/preview-link.js
/**
 * Responds to messages that have links whose URLs match URL patterns
 * configured for link previewing.
 *
 * @param {Object} req Request sent from Google Chat.
 * @param {Object} res Response to send back.
 */
exports.onMessage = (req, res) => {
  if (req.method === 'GET' || !req.body.message) {
    return res.send(
      'Hello! This function is meant to be used in a Google Chat Space.');
  }

  // Respond to button clicks on attached cards
  if (req.body.type === 'CARD_CLICKED') {
    // 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 = req.body.action.actionMethodName === 'HUMAN' ?
      'UPDATE_USER_MESSAGE_CARDS' :
      'UPDATE_MESSAGE';

    if (req.body.action.actionMethodName === 'assign') {
      return res.json(createMessage(actionResponseType, 'You'));
    }
  }

  // Checks for the presence of event.message.matchedUrl and attaches a card
  // if present
  if (req.body.message.matchedUrl) {
    return res.json(createMessage());
  }

  // If the Chat app doesn’t detect a link preview URL pattern, it says so.
  return res.json({'text': 'No matchedUrl detected.'});
};

/**
 * Message to create a card with the correct response type and assignee.
 *
 * @param {string} actionResponseType
 * @param {string} assignee
 * @return {Object} a card with URL preview
 */
function createMessage(
  actionResponseType = 'UPDATE_USER_MESSAGE_CARDS',
  assignee = 'Charlie'
) {
  return {
    'actionResponse': {'type': actionResponseType},
    'cardsV2': [
      {
        'cardId': 'previewLink',
        'card': {
          'header': {
            'title': 'Example Customer Service Case',
            'subtitle': 'Case basics',
          },
          'sections': [
            {
              'widgets': [
                {'keyValue': {'topLabel': 'Case ID', 'content': 'case123'}},
                {'keyValue': {'topLabel': 'Assignee', 'content': assignee}},
                {'keyValue': {'topLabel': 'Status', 'content': 'Open'}},
                {
                  'keyValue': {
                    'topLabel': 'Subject', 'content': 'It won"t turn on...',
                  },
                },
              ],
            },
            {
              'widgets': [
                {
                  'buttons': [
                    {
                      'textButton': {
                        'text': 'OPEN CASE',
                        'onClick': {
                          'openLink': {
                            'url': 'https://support.example.com/orders/case123',
                          },
                        },
                      },
                    },
                    {
                      'textButton': {
                        'text': 'RESOLVE CASE',
                        'onClick': {
                          'openLink': {
                            'url': 'https://support.example.com/orders/case123?resolved=y',
                          },
                        },
                      },
                    },
                    {
                      'textButton': {
                        'text': 'ASSIGN TO ME',
                        'onClick': {
                          'action': {
                            'actionMethodName': 'assign',
                          },
                        },
                      },
                    },
                  ],
                },
              ],
            },
          ],
        }
      },
    ],
  };
}

Apps Script

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

apps-script/preview-link/preview-link.gs
/**
 * Responds to messages that have links whose URLs match URL patterns
 * configured for link previews.
 *
 * @param {Object} event The event object from Chat API.
 * @return {Object} Response from the Chat app attached to the message with
 * the previewed link.
 */
function onMessage(event) {
  // Checks for the presence of event.message.matchedUrl and attaches a card
  // if present
  if (event.message.matchedUrl) {
    return {
      'actionResponse': {
        'type': 'UPDATE_USER_MESSAGE_CARDS',
      },
      'cardsV2': [{
        'cardId': 'previewLink',
        'card': {
          'header': {
            'title': 'Example Customer Service Case',
            'subtitle': 'Case basics',
          },
          'sections': [{
            'widgets': [
              {'keyValue': {'topLabel': 'Case ID', 'content': 'case123'}},
              {'keyValue': {'topLabel': 'Assignee', 'content': 'Charlie'}},
              {'keyValue': {'topLabel': 'Status', 'content': 'Open'}},
              {
                'keyValue': {
                  'topLabel': 'Subject', 'content': 'It won\'t turn on...',
                }
              },
            ],
          },
          {
            'widgets': [{
              'buttons': [
                {
                  'textButton': {
                    'text': 'OPEN CASE',
                    'onClick': {
                      'openLink': {
                        'url': 'https://support.example.com/orders/case123',
                      },
                    },
                  },
                },
                {
                  'textButton': {
                    'text': 'RESOLVE CASE',
                    'onClick': {
                      'openLink': {
                        'url': 'https://support.example.com/orders/case123?resolved=y',
                      },
                    },
                  },
                },
                {
                  'textButton': {
                    'text': 'ASSIGN TO ME',
                    'onClick': {'action': {'actionMethodName': 'assign'}}
                  },
                },
              ],
            }],
          }],
        },
      }],
    };
  }

  // If the Chat app doesn’t detect a link preview URL pattern, it says so.
  return {'text': 'No matchedUrl detected.'};
}

/**
 * Updates a card that was attached to a message with a previewed link.
 *
 * @param {Object} event The event object from Chat API.
 * @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) {
  // Checks whether the message event originated from a human or a Chat app
  // and sets actionResponse 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';

  // To respond to the correct button, checks the button's actionMethodName.
  if (event.action.actionMethodName === 'assign') {
    return assignCase(actionResponseType);
  }
}

/**
 * Updates a card to say that "You" are the assignee after clicking the Assign
 * to Me button.
 *
 * @param {String} actionResponseType Which actionResponse the Chat app should
 * use to update the attached card based on who created the message.
 * @return {Object} Response from the Chat app. Updates the card attached to
 * the message with the previewed link.
 */
function assignCase(actionResponseType) {
  return {
    'actionResponse': {

      // Dynamically returns the correct actionResponse type.
      'type': actionResponseType,
    },
    'cardsV2': [{
      'cardId': 'assignCase',
      'card': {
        'header': {
          'title': 'Example Customer Service Case',
          'subtitle': 'Case basics',
        },
        'sections': [{
          'widgets': [
            {'keyValue': {'topLabel': 'Case ID', 'content': 'case123'}},
            {'keyValue': {'topLabel': 'Assignee', 'content': 'You'}},
            {'keyValue': {'topLabel': 'Status', 'content': 'Open'}},
            {
              'keyValue': {
                'topLabel': 'Subject', 'content': 'It won\'t turn on...',
              }
            },
          ],
        },
        {
          'widgets': [{
            'buttons': [
              {
                'textButton': {
                  'text': 'OPEN CASE',
                  'onClick': {
                    'openLink': {
                      'url': 'https://support.example.com/orders/case123',
                    },
                  },
                },
              },
              {
                'textButton': {
                  'text': 'RESOLVE CASE',
                  'onClick': {
                    'openLink': {
                      'url': 'https://support.example.com/orders/case123?resolved=y',
                    },
                  },
                },
              },
              {
                'textButton': {
                  'text': 'ASSIGN TO ME',
                  'onClick': {'action': {'actionMethodName': 'assign'}},
                },
              },
            ],
          }],
        }],
      },
    }],
  };
}

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

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

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

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