Pratinjau link

Untuk mencegah pengalihan konteks saat pengguna membagikan link di Google Chat, aplikasi Chat Anda dapat mempratinjau link dengan melampirkan kartu ke pesan mereka, yang memberikan lebih banyak informasi dan memungkinkan orang mengambil tindakan langsung dari Google Chat.

Misalnya, bayangkan ruang Google Chat yang mencakup semua agen layanan pelanggan perusahaan ditambah aplikasi Chat bernama Case-y. Agen sering membagikan link ke kasus layanan pelanggan di ruang Chat, dan setiap kali mereka melakukannya, rekan kerja mereka harus membuka link kasus untuk melihat detail seperti penerima tugas, status, dan subjek. Demikian pula, jika seseorang ingin mengambil kepemilikan kasus atau mengubah status, maka ia harus membuka linknya.

Pratinjau link memungkinkan aplikasi Chat penghuni ruang, Case-y, melampirkan kartu yang menunjukkan penerima tugas, status, dan subjek setiap kali seseorang membagikan link kasus. Tombol di kartu memungkinkan agen mengambil alih kepemilikan kasus dan mengubah status langsung dari streaming chat.

Cara kerja pratinjau link

Saat seseorang menambahkan link ke pesannya, chip akan muncul yang memberi tahu bahwa aplikasi Chat mungkin melihat pratinjau link tersebut.

Setelah mengirim pesan, link akan dikirim ke aplikasi Chat, yang kemudian akan membuat dan melampirkan kartu ke pesan pengguna.

Di samping link, kartu tersebut memberikan informasi tambahan tentang link tersebut, termasuk elemen interaktif seperti tombol. Aplikasi Chat Anda dapat mengupdate kartu yang dilampirkan sebagai respons terhadap interaksi pengguna, seperti klik tombol.

Jika seseorang tidak ingin aplikasi Chat melihat pratinjau link dengan melampirkan kartu ke pesannya, ia dapat mencegah pratinjau dengan mengklik di chip pratinjau. Pengguna dapat menghapus kartu terlampir kapan saja dengan mengklik Hapus pratinjau.

Prasyarat

Catatan: Untuk Node.js dan Python, contoh kode dalam panduan ini ditulis untuk dijalankan sebagai Google Cloud Function.

Node.js

Aplikasi Google Chat yang diaktifkan untuk fitur interaktif. Untuk membuat aplikasi Chat interaktif menggunakan layanan HTTP, selesaikan panduan memulai ini.

Apps Script

Aplikasi Google Chat yang diaktifkan untuk fitur interaktif. Untuk membuat aplikasi Chat interaktif di Apps Script, selesaikan panduan memulai ini.

Mengonfigurasi pratinjau link

Daftarkan link tertentu - seperti example.com, support.example.com, dan support.example.com/cases/ - sebagai pola URL di halaman konfigurasi aplikasi Chat Anda di Konsol Google Cloud, sehingga aplikasi Chat Anda dapat melihat pratinjaunya.

1. Buka Konsol Google Cloud.
2. Di samping "Google Cloud", klik Panah bawah , lalu buka project aplikasi Chat Anda.
3. Di kolom penelusuran, ketik Google Chat API lalu klik Google Chat API.
4. Klik Kelola > Konfigurasi.
5. Di bagian Pratinjau link, tambahkan atau edit pola URL.
   1. Untuk mengonfigurasi pratinjau link untuk pola URL baru, klik Tambahkan Pola URL.
   2. Untuk mengedit konfigurasi pola URL yang ada, klik Panah bawah .

6. Di kolom Host pola, masukkan domain pola URL. Aplikasi Chat akan melihat pratinjau link ke domain ini.

   Agar link pratinjau aplikasi Chat untuk subdomain tertentu, seperti subdomain.example.com, sertakan subdomain tersebut.

   Agar mendapatkan link pratinjau aplikasi Chat untuk seluruh domain, tentukan karakter pengganti dengan tanda bintang (*) sebagai subdomain. Misalnya, *.example.com cocok dengan subdomain.example.com dan any.number.of.subdomains.example.com.

7. Di kolom Awalan jalur, masukkan jalur yang akan ditambahkan ke domain pola host.

   Untuk mencocokkan semua URL di domain pola host, kosongkan Awalan jalur.

   Misalnya, jika pola Host adalah support.example.com, agar cocok dengan URL untuk kasus yang dihosting di support.example.com/cases/, masukkan cases/.

8. Klik Selesai.

9. Klik Simpan.

Sekarang, setiap kali seseorang menyertakan link yang cocok dengan pola URL pratinjau link dengan pesan di ruang Chat yang menyertakan aplikasi Chat Anda, aplikasi Anda akan melihat pratinjau link tersebut.

Melihat pratinjau link

Setelah Anda mengonfigurasi pratinjau link untuk link tertentu, Aplikasi Chat dapat mengenali dan melihat pratinjau link dengan melampirkan informasi lebih banyak darinya.

Di dalam ruang Chat yang menyertakan Aplikasi Chat, saat pesan seseorang berisi link yang cocok dengan pola URL pratinjau link, yaitu aplikasi Chat Anda menerima Peristiwa interaksi MESSAGE. JSON payload untuk peristiwa interaksi berisi kolom matchedUrl:

JSON

"message": {

  . . . // other message attributes redacted

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

  . . . // other message attributes redacted

}

Dengan memeriksa keberadaan kolom matchedUrl di peristiwa MESSAGE payload, aplikasi Chat Anda dapat menambahkan informasi ke dengan tautan yang dipratinjau. Aplikasi Chat Anda dapat membalas dengan pesan teks sederhana atau melampirkan kartu.

Balas dengan pesan teks

Untuk respons sederhana, aplikasi Chat Anda dapat melihat pratinjau link dengan membalas melalui pesan teks sederhana ke sebuah tautan. Contoh ini melampirkan pesan yang mengulangi URL tautan yang cocok dengan pola URL pratinjau link.

Node.js

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

Lihat di 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

Lihat di 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.'};
}

Lampirkan kartu

Untuk melampirkan kartu ke link yang dipratinjau, kembalikan ActionResponse dari jenis UPDATE_USER_MESSAGE_CARDS. Contoh ini melampirkan kartu sederhana.

Node.js

node/preview-link/attach-card.js

Lihat di 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

Contoh ini mengirimkan pesan kartu dengan mengembalikan JSON kartu. Anda juga dapat menggunakan Layanan kartu Apps Script.

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

Lihat di 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.'};
}

Memperbarui kartu

Untuk memperbarui kartu yang dilampirkan ke link yang dipratinjau, tampilkan ActionResponse dari jenis UPDATE_USER_MESSAGE_CARDS. Aplikasi Chat hanya dapat diupdate kartu yang melihat pratinjau link sebagai respons terhadap Peristiwa interaksi aplikasi Chat. Aplikasi Chat tidak dapat memperbarui kartu ini dengan memanggil Chat API secara asinkron.

Pratinjau link tidak mendukung ditampilkannya ActionResponse jenis UPDATE_MESSAGE. Karena UPDATE_MESSAGE memperbarui seluruh pesan, bukan hanya kartu, fungsi ini hanya berfungsi jika aplikasi Chat membuat pesan asli. Pratinjau link melampirkan kartu ke pesan yang dibuat pengguna, sehingga aplikasi Chat tidak memiliki izin untuk mengupdatenya.

Untuk memastikan fungsi memperbarui kartu yang dibuat pengguna dan dibuat aplikasi di aliran Chat, tetapkan ActionResponse secara dinamis berdasarkan apakah pesan yang dibuat oleh aplikasi Chat atau pengguna.

• Jika pengguna yang membuat pesan, setel ActionResponse ke UPDATE_USER_MESSAGE_CARDS.
• Jika aplikasi Chat membuat pesan, tetapkan ActionResponse ke UPDATE_MESSAGE.

Ada dua cara untuk melakukannya: menentukan dan memeriksa actionMethodName kustom sebagai bagian dari properti onclick kartu terlampir (yang mengidentifikasi pesan sebagai buatan pengguna) atau memeriksa apakah pesan tersebut dibuat oleh pengguna.

Opsi 1: Periksa actionMethodName

Agar dapat menggunakan actionMethodName untuk menangani peristiwa interaksi CARD_CLICKED dengan benar pada kartu yang dipratinjau, tetapkan actionMethodName kustom sebagai bagian dari properti onclick dari kartu terlampir:

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

Dengan "actionMethodName": "assign" yang mengidentifikasi tombol sebagai bagian dari pratinjau link, Anda dapat menampilkan ActionResponse yang benar secara dinamis dengan memeriksa actionMethodName yang cocok:

Node.js

node/preview-link/update-card.js

Lihat di 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

Contoh ini mengirimkan pesan kartu dengan mengembalikan JSON kartu. Anda juga dapat menggunakan Layanan kartu Apps Script.

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

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

Opsi 2: Periksa jenis pengirim

Periksa apakah message.sender.type adalah HUMAN atau BOT. Jika HUMAN, tetapkan ActionResponse ke UPDATE_USER_MESSAGE_CARDS, atau tetapkan ActionResponse ke UPDATE_MESSAGE. Berikut caranya:

Node.js

node/preview-link/sender-type.js

Lihat di 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

Contoh ini mengirimkan pesan kartu dengan mengembalikan JSON kartu. Anda juga dapat menggunakan Layanan kartu Apps Script.

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

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

Alasan umum untuk memperbarui kartu adalah sebagai respons terhadap klik tombol. Ingat kembali tombol Tugaskan kepada Saya dari bagian sebelumnya, Lampirkan kartu. Contoh lengkap berikut memperbarui kartu sehingga dinyatakan bahwa kartu tersebut telah ditetapkan ke "Anda" setelah pengguna mengklik Tugaskan kepada Saya. Contoh ini secara dinamis menetapkan ActionResponse dengan memeriksa jenis pengirim.

Contoh lengkap: Kasus-y untuk aplikasi Chat layanan pelanggan

Berikut adalah kode lengkap untuk Case-y, aplikasi Chat yang melihat pratinjau link ke kasus yang dibagikan di ruang Chat tempat agen layanan pelanggan berkolaborasi.

Node.js

node/preview-link/preview-link.js

Lihat di 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

Contoh ini mengirimkan pesan kartu dengan mengembalikan JSON kartu. Anda juga dapat menggunakan Layanan kartu Apps Script.

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

Lihat di 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'}},
                },
              },
            ],
          }],
        }],
      },
    }],
  };
}

Batas dan pertimbangan

Saat mengonfigurasi pratinjau link untuk aplikasi Chat, perhatikan batasan dan pertimbangan berikut:

• Setiap aplikasi Chat mendukung pratinjau link untuk maksimum 5 pola URL.
• Aplikasi Chat menampilkan pratinjau satu link per pesan. Jika beberapa link yang dapat dipratinjau muncul dalam satu pesan, hanya link pertama yang dapat dipratinjau.
• Aplikasi Chat hanya melihat pratinjau link yang dimulai dengan https://, jadi https://support.example.com/cases/ melihat pratinjau, tetapi support.example.com/cases/ tidak.
• Kecuali jika pesan menyertakan informasi lain yang dikirim ke aplikasi Chat, seperti perintah garis miring, hanya URL link yang dikirim ke aplikasi Chat melalui pratinjau link.
• Kartu yang dilampirkan ke link yang dipratinjau hanya mendukung ActionResponse jenis UPDATE_USER_MESSAGE_CARDS, dan hanya sebagai respons terhadap peristiwa interaksi aplikasi Chat. Pratinjau link tidak mendukung UPDATE_MESSAGE atau permintaan asinkron untuk memperbarui kartu yang dilampirkan ke link yang dipratinjau melalui Chat API. Untuk mempelajari lebih lanjut, lihat Memperbarui kartu.

Melakukan debug pratinjau link

Saat menerapkan pratinjau link, Anda mungkin perlu men-debug aplikasi Chat dengan membaca log aplikasi. Untuk membaca log, buka Logs Explorer di konsol Google Cloud.