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ẻ một đườ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 của họ để cung cấp thêm thông tin và giúp mọi người hành động ngay từ Google Chat.

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

Chế độ xem trước đường liên kết cho phép ứng dụng Chat thường trú của không gian, Case-y, đính kèm một thẻ hiển thị người được giao, trạng thái và chủ đề bất cứ khi nào có người chia sẻ đường liên kết đến trường hợp. Các nút trên thẻ cho phép nhân viên hỗ trợ tiếp nhận trường hợp và thay đổi trạng thái ngay từ luồ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, 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 ứ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 được gửi đến ứng dụng Chat. Sau đó, ứ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 nhắn tin xem trước đường liên kết bằng cách đính kèm một thẻ vào tin nhắn

Dọc theo liên kết, thẻ cung cấp thông tin bổ sung về liên kết, bao gồm 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 để phản hồi tương tác của người dùng, như lượt nhấp vào nút.

Nếu ai đó 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 một thẻ vào tin nhắn, họ có thể ngăn việc xem trước bằng cách nhấp vào trên khối xem trước. Người dùng có thể xóa thẻ đính kèm bất kỳ lúc nào bằng cách nhấp vào Xóa bản xem trước.

Định cấu hình xem trước liên kết

Đăng ký các đường liên kết cụ thể (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 Google Cloud Console để ứ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ở Google Cloud Console.
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 ứ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 Xem trước liên kết, hãy thêm hoặc chỉnh sửa mẫu URL.
1. Để định cấu hình xem trước liên kết cho 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 tại, hãy nhấp vào biểu tượng Mũi tên xuống .
Trong trường Mẫu máy chủ, 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.

Để liên kết bản xem trước ứ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 đó.

Để liên kết bản 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 phụ. 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 lưu trữ.

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

Ví dụ: nếu mẫu Máy chủ là support.example.com, để khớp với URL của các 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 ai đó có đường liên kết khớp với một mẫu URL xem trước đường liên kết đến một tin nhắn trong phòng Chat có ứng dụng Chat, thì ứ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 liên kết cho một liên kết đã cho, ứng dụng Trò chuyện của bạn có thể nhận dạng và xem trước liên kết bằng cách đính kèm thêm thông tin vào liên kết.

Trong các phòng Chat bao gồm ứng dụng Chat, khi tin nhắn của người nào đó chứa một đường liên kết khớp với một mẫu URL xem trước đường liên kết, đường liên kết đó sẽ được gửi đến ứng dụng Chat dưới dạng thuộc tính matchedUrl trên đối tượng message:

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 thuộc tính matchedUrl trên đối tượng message, ứng dụng Chat có thể thêm thông tin vào tin nhắn thông qua đường liên kết được xem trước. Ứng dụng Chat 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

Để phản hồ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 một tin nhắn văn bản đơn giản đến một đường liên kết. Ví dụ này đính kèm thông báo lặp lại URL liên kết khớp với mẫu URL xem trước 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) {
    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) {
    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.
  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 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 nhắn tin xem trước đường liên kết bằng cách đính kèm một 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) {
    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) {
    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.
  res.json({'text': 'No matchedUrl detected.'});
};

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ẻ đính kèm theo đường liên kết đã xem trước, hãy trả về ActionResponse thuộc loại UPDATE_USER_MESSAGE_CARDS. Các thẻ đính kèm với đường liên kết xem trước chỉ cập nhật theo các yêu cầu đồng bộ từ Sự kiện trò chuyện. Không hỗ trợ các yêu cầu không đồng bộ để cập nhật thẻ được đính kèm với đường dẫn liên kết đã xem trước qua API REST của Chat.

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ỉ gửi 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 một thẻ vào tin nhắn do người dùng tạo, vì vậy, ứ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 linh động đặt ActionResponse 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 ứ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 (xác định thông báo là do người dùng tạo) hoặc kiểm tra xem thông báo có do người dùng tạo hay không.

Tùy chọn 1: Kiểm tra `actionMethodName`

Để xử lý đúng cách các sự kiện đã nhấp vào thẻ trên thẻ xem trước actionMethodName, 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ề ActionResponse chính xác bằng cách kiểm tra xem có đúng actionMethodName hay không:

Node.js

nút/xem trước- liên kết/cập nhật-thẻ.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) {
    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') {
      res.json({
        'actionResponse': {

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

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

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, hãy đặ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

button/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) {
    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';

    res.json({
      'actionResponse': {

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

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

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 lại nhấp chuột vào nút. Gọi lại nút Gán cho tôi ở 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 sẽ 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 ứng dụng Chat dịch vụ khách hàng

Dưới đây là mã hoàn chỉnh cho Case-y, một ứng dụng nhắn tin có thể xem trước đường liên kết đến các trường hợp được chia sẻ trong phòng Chat mà nhân viên dịch vụ khách hàng cộng tác.

Node.js

nút/xem trước liên kết/xem trước liên kết.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) {
    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) {
    res.json(createMessage());
  }

  // 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') {
      res.json(createMessage(actionResponseType, 'You'));
    }
  }

  // If the Chat app doesn’t detect a link preview URL pattern, it says so.
  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

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 ý những giới hạn và điểm cần lưu ý sau:

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

Bản xem trước liên kết gỡ lỗi

Khi triển khai bản xem trước đường liên kết, bạn có thể cần 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 phần Trình khám phá nhật ký trên Google Cloud Console.

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 xem trước 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ẻ

Tùy chọn 1: Kiểm tra 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 ứng dụng Chat dịch vụ khách hàng

Node.js

Apps Script

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

Bản xem trước liên kết gỡ lỗi

Tùy chọn 1: Kiểm tra `actionMethodName`