Trang này được dịch bởi Cloud Translation API.

Xem trước đường liên kết

Để ngăn việc chuyển đổi ngữ cảnh khi người dùng chia sẻ đường liên kết trong Google Chat, ứng dụng Chat có thể xem trước đường liên kết bằng cách đính kèm một thẻ vào tin nhắn để cung cấp thêm thông tin và cho phép mọi người thực hiện hành động ngay trong Google Chat.

Ví dụ: hãy tưởng tượng một không gian Google Chat có tất cả nhân viên hỗ trợ dịch vụ khách hàng của công ty và một ứng dụng Chat có tên là Trường hợp-y. Nhân viên hỗ trợ thường xuyên chia sẻ đường liên kết đến các yêu cầu dịch vụ khách hàng trong phòng Chat và mỗi khi họ chia sẻ, đồng nghiệp phải mở đường liên kết đến yêu cầu để xem thông tin chi tiết như người được giao, trạng thái và chủ thể. Tương tự, nếu người dùng muốn có quyền sở hữu một trường hợp hoặc thay đổi trạng thái, thì họ cần phải mở đường liên kết.

Tính năng xem trước đường liên kết cho phép ứng dụng Chat cư trú trong không gian (Case-y) đính kèm một thẻ có thông tin về người được giao, trạng thái và tiêu đề mỗi khi có người chia sẻ đường liên kết đến yêu cầu hỗ trợ. Các nút trên thẻ cho phép nhân viên hỗ trợ quản lý trường hợp và thay đổi trạng thái ngay trong bảng trò chuyện.

Cách hoạt động của tính năng xem trước đường liên kết

Khi có người thêm đường liên kết vào tin nhắn của họ, một khối sẽ xuất hiện để cho họ biết rằng ứng dụng Chat có thể xem trước đường liên kết.

Khối cho biết rằng ứng dụng Chat có thể xem trước đường liên kết

Sau khi gửi tin nhắn, đường liên kết sẽ được gửi đến ứng dụng Chat. Ứng dụng này sẽ tạo và đính kèm thẻ vào tin nhắn của người dùng.

Ứng dụng Chat xem trước đường liên kết bằng cách đính kèm thẻ vào tin nhắn

Bên cạnh đường liên kết, thẻ này cung cấp thêm thông tin về đường liên kết, bao gồm cả các yếu tố tương tác như nút. Ứng dụng Chat có thể cập nhật thẻ đính kèm theo hoạt động tương tác của người dùng, chẳng hạn như lượt nhấp vào nút.

Nếu người dùng không muốn ứng dụng Chat xem trước đường liên kết của họ bằng cách đính kèm thẻ vào tin nhắn, thì họ có thể không cho phép xem trước bằng cách nhấp vào trên khối xem trước. Người dùng có thể xoá thẻ đính kèm bất cứ lúc nào bằng cách nhấp vào Xoá bản xem trước.

Định cấu hình bản xem trước đường liên kết

Đăng ký các đường liên kết cụ thể (chẳng hạn như example.com, support.example.com và support.example.com/cases/) dưới dạng mẫu URL trên trang cấu hình của ứng dụng Chat trong bảng điều khiển Google Cloud để ứng dụng Chat có thể xem trước các đường liên kết đó.

Trình đơn cấu hình xem trước đường liên kết

Mở bảng điều khiển Google Cloud.
Bên cạnh "Google Cloud", hãy nhấp vào biểu tượng Mũi tên xuống rồi mở dự án của ứng dụng Chat.
Trong trường tìm kiếm, hãy nhập Google Chat API rồi nhấp vào API Google Chat.
Nhấp vào Quản lý > Cấu hình.
Trong phần Xem trước đường liên kết, hãy thêm hoặc chỉnh sửa mẫu URL.
1. Để định cấu hình bản xem trước đường liên kết cho một mẫu URL mới, hãy nhấp vào Thêm mẫu URL.
2. Để chỉnh sửa cấu hình cho mẫu URL hiện có, hãy nhấp vào biểu tượng Mũi tên xuống .
Trong trường Mẫu máy chủ lưu trữ, hãy nhập miền của mẫu URL. Ứng dụng Chat sẽ xem trước các đường liên kết đến miền này.

Để cung cấp đường liên kết xem trước trong ứng dụng Chat cho một miền con cụ thể, chẳng hạn như subdomain.example.com, hãy thêm miền con đó.

Để đặt đường liên kết xem trước ứng dụng Chat cho toàn bộ miền, hãy chỉ định ký tự đại diện có dấu hoa thị (*) làm miền con. Ví dụ: *.example.com khớp với subdomain.example.com và any.number.of.subdomains.example.com.
Trong trường Tiền tố đường dẫn, hãy nhập một đường dẫn để thêm vào miền mẫu máy chủ lưu trữ.

Để so khớp tất cả URL trong miền mẫu máy chủ lưu trữ, hãy để trống Tiền tố đường dẫn.

Ví dụ: nếu Mẫu máy chủ lưu trữ là support.example.com, thì để khớp URL cho những trường hợp được lưu trữ tại support.example.com/cases/, hãy nhập cases/.
Nhấp vào Xong.
Nhấp vào Lưu.

Giờ đây, bất cứ khi nào có người thêm đường liên kết khớp với mẫu URL của bản xem trước đường liên kết với tin nhắn trong phòng Chat có chứa ứng dụng Chat, ứng dụng sẽ xem trước đường liên kết đó.

Xem trước đường liên kết

Sau khi bạn định cấu hình xem trước đường liên kết cho một đường liên kết nhất định, ứng dụng Chat có thể nhận ra và xem trước đường liên kết đó bằng cách đính kèm thêm thông tin vào đường liên kết đó.

Trong các phòng Chat có chứa ứng dụng Chat, khi tin nhắn của người nào đó chứa đường liên kết khớp với mẫu URL xem trước đường liên kết, ứng dụng Chat sẽ nhận được một sự kiện tương tác MESSAGE. Tải trọng JSON cho sự kiện tương tác chứa trường matchedUrl:

JSON

"message": {

  . . . // other message attributes redacted

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

  . . . // other message attributes redacted

}

Bằng cách kiểm tra sự hiện diện của trường matchedUrl trong tải trọng sự kiện MESSAGE, ứng dụng Chat có thể thêm thông tin vào tin nhắn bằng đường liên kết xem trước. Ứng dụng Chat của bạn có thể trả lời bằng một tin nhắn văn bản đơn giản hoặc đính kèm một thẻ.

Trả lời bằng tin nhắn văn bản

Đối với những câu trả lời đơn giản, ứng dụng Chat có thể xem trước đường liên kết bằng cách trả lời bằng một tin nhắn văn bản đơn giản cho đường liên kết. Ví dụ này đính kèm một thông báo lặp lại URL liên kết khớp với mẫu URL xem trước đường liên kết.

Node.js

node/preview-link/simple-text-message.js

Xem trên GitHub

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

Xem trên GitHub

/**
 * 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.'};
}

Đính kèm thẻ

Để đính kèm một thẻ vào đường liên kết đã xem trước, hãy trả về một ActionResponse thuộc loại UPDATE_USER_MESSAGE_CARDS. Ví dụ này đính kèm một thẻ đơn giản.

Ứng dụng Chat xem trước đường liên kết bằng cách đính kèm thẻ vào tin nhắn

Node.js

node/preview-link/attach-card.js

Xem trên GitHub

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

Ví dụ này gửi tin nhắn thẻ bằng cách trả về tệp JSON của thẻ. Bạn cũng có thể sử dụng dịch vụ thẻ Apps Script.

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

Xem trên GitHub

/**
 * 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.'};
}

Cập nhật thẻ

Để cập nhật thẻ được đính kèm vào đường liên kết đã xem trước, hãy trả về một ActionResponse thuộc loại UPDATE_USER_MESSAGE_CARDS. Các ứng dụng nhắn tin chỉ có thể cập nhật những thẻ xem trước đường liên kết ở dạng phản hồi cho một sự kiện tương tác với ứng dụng Chat. Ứng dụng trong Chat không thể cập nhật các thẻ này bằng cách gọi API Chat không đồng bộ.

Tính năng xem trước đường liên kết không hỗ trợ trả về ActionResponse thuộc loại UPDATE_MESSAGE. Vì UPDATE_MESSAGE cập nhật toàn bộ tin nhắn thay vì chỉ thông tin thẻ, nên tính năng này chỉ hoạt động nếu ứng dụng Chat đã tạo tin nhắn gốc. Tính năng xem trước đường liên kết sẽ đính kèm thẻ vào tin nhắn do người dùng tạo, nên ứng dụng Chat không có quyền cập nhật thẻ đó.

Để đảm bảo một hàm cập nhật cả thẻ do người dùng tạo và ứng dụng tạo trong luồng Chat, hãy đặt ActionResponse theo cách linh động dựa trên việc ứng dụng Chat hay người dùng đã tạo tin nhắn.

Nếu người dùng đã tạo thông báo, hãy đặt ActionResponse thành UPDATE_USER_MESSAGE_CARDS.
Nếu một ứng dụng Chat tạo tin nhắn đó, hãy đặt ActionResponse thành UPDATE_MESSAGE.

Có hai cách để thực hiện việc này: chỉ định và kiểm tra actionMethodName tuỳ chỉnh trong thuộc tính onclick của thẻ đính kèm (giúp xác định thư là do người dùng tạo) hoặc kiểm tra xem có phải người dùng tạo thông báo hay không.

Cách 1: Kiểm tra để tìm `actionMethodName`

Để sử dụng actionMethodName nhằm xử lý đúng cách CARD_CLICKED sự kiện tương tác trên thẻ xem trước, hãy đặt actionMethodName tuỳ chỉnh trong thuộc tính onclick của thẻ đính kèm:

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

Với việc "actionMethodName": "assign" xác định nút này là một phần của bản xem trước đường liên kết, bạn có thể tự động trả về đúng ActionResponse bằng cách kiểm tra để tìm actionMethodName phù hợp:

Node.js

node/preview-link/update-card.js

Xem trên GitHub

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

Ví dụ này gửi tin nhắn thẻ bằng cách trả về tệp JSON của thẻ. Bạn cũng có thể sử dụng dịch vụ thẻ Apps Script.

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

Xem trên GitHub

/**
 * 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': [{}],
  };
}

Tùy chọn 2: Kiểm tra loại người gửi

Kiểm tra xem message.sender.type là HUMAN hay BOT. Nếu HUMAN, đặt ActionResponse thành UPDATE_USER_MESSAGE_CARDS, nếu không, hãy đặt ActionResponse thành UPDATE_MESSAGE. Cách làm như sau:

Node.js

node/preview-link/sender-type.js

Xem trên GitHub

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

Ví dụ này gửi tin nhắn thẻ bằng cách trả về tệp JSON của thẻ. Bạn cũng có thể sử dụng dịch vụ thẻ Apps Script.

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

Xem trên GitHub

/**
 * 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': [{}],
  };
}

Một lý do điển hình để cập nhật thẻ là để phản hồi một lượt nhấp vào nút. Nhớ nút Giao cho tôi trong phần trước, Đính kèm thẻ. Ví dụ hoàn chỉnh sau đây cập nhật thẻ để cho biết thẻ đã được chỉ định cho "Bạn" sau khi người dùng nhấp vào Giao cho tôi. Ví dụ này tự động đặt ActionResponse bằng cách kiểm tra loại người gửi.

Ví dụ hoàn chỉnh: Trường hợp điển hình là ứng dụng Chat dịch vụ khách hàng

Sau đây là mã hoàn chỉnh cho trường hợp y, một ứng dụng trong Chat giúp xem trước đường liên kết đến các yêu cầu được chia sẻ trong một phòng Chat nơi nhân viên dịch vụ khách hàng cộng tác.

Node.js

node/preview-link/preview-link.js

Xem trên GitHub

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

Ví dụ này gửi tin nhắn thẻ bằng cách trả về tệp JSON của thẻ. Bạn cũng có thể sử dụng dịch vụ thẻ Apps Script.

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

Xem trên GitHub

/**
 * 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'}},
                },
              },
            ],
          }],
        }],
      },
    }],
  };
}

Giới hạn và cân nhắc

Khi bạn định cấu hình bản xem trước đường liên kết cho ứng dụng Chat, hãy lưu ý các giới hạn và lưu ý sau:

Mỗi ứng dụng trong Chat hỗ trợ bản xem trước đường liên kết cho tối đa 5 mẫu URL.
Các ứng dụng nhắn tin xem trước một đường liên kết trên mỗi tin nhắn. Nếu có nhiều đường liên kết có thể xem trước trong một thông báo, thì chỉ có bản xem trước đầu tiên của đường liên kết có thể xem trước.
Các ứng dụng nhắn tin chỉ xem trước các đường liên kết bắt đầu bằng https://, vì vậy, https://support.example.com/cases/ có bản xem trước còn support.example.com/cases/ thì không.
Trừ phi tin nhắn có chứa thông tin khác được gửi đến ứng dụng Chat (chẳng hạn như lệnh dấu gạch chéo), thì chỉ có URL của đường liên kết mới được gửi đến ứng dụng Chat qua bản xem trước đường liên kết.
Các thẻ được đính kèm vào đường liên kết được xem trước chỉ hỗ trợ loại ActionResponse thuộc loại UPDATE_USER_MESSAGE_CARDS và chỉ để phản hồi một sự kiện tương tác với ứng dụng Chat. Bản xem trước đường liên kết không hỗ trợ UPDATE_MESSAGE hoặc các yêu cầu không đồng bộ nhằm cập nhật thẻ được đính kèm vào đường liên kết đã xem trước thông qua API Chat. Để tìm hiểu thêm, hãy xem phần Cập nhật thẻ.

Gỡ lỗi bản xem trước đường liên kết

Khi triển khai bản xem trước đường liên kết, bạn có thể phải gỡ lỗi ứng dụng Chat bằng cách đọc nhật ký của ứng dụng. Để đọc nhật ký, hãy truy cập vào Logs Explorer (Trình khám phá nhật ký) trên bảng điều khiển Google Cloud.

Xem trước đường liên kết

Cách hoạt động của tính năng xem trước đường liên kết

Định cấu hình bản xem trước đường liên kết

Xem trước đường liên kết

JSON

Trả lời bằng tin nhắn văn bản

Node.js

Apps Script

Đính kèm thẻ

Node.js

Apps Script

Cập nhật thẻ

Cách 1: Kiểm tra để tìm actionMethodName

JSON

Node.js

Apps Script

Tùy chọn 2: Kiểm tra loại người gửi

Node.js

Apps Script

Ví dụ hoàn chỉnh: Trường hợp điển hình là ứng dụng Chat dịch vụ khách hàng

Node.js

Apps Script

Giới hạn và cân nhắc

Gỡ lỗi bản xem trước đường liên kết

Cách 1: Kiểm tra để tìm `actionMethodName`