Önizleme bağlantıları

Kullanıcılar Google Chat'te bir bağlantı paylaştığında bağlam değiştirmeyi önlemek için Chat uygulamanız, mesajlarına daha fazla bilgi veren ve kullanıcıların doğrudan Google Chat'ten işlem yapmasına olanak tanıyan bir kart ekleyerek bağlantıyı önizleyebilir.

Örneğin, bir şirketin müşteri hizmetleri temsilcilerinin tamamını içeren bir Google Chat alanı ile Case-y adlı bir Chat uygulaması düşünün. Temsilciler Chat alanında müşteri hizmetleri destek kayıtlarının bağlantılarını sık sık paylaşırlar. Temsilciler, oluşturdukları her seferde atanan, durum ve konu gibi ayrıntıları görmek için destek kaydı bağlantısını açmalıdır. Benzer şekilde, bir destek kaydının sahipliğini almak veya durumu değiştirmek isteyen bir kullanıcının bağlantıyı açması gerekir.

Bağlantı önizleme, alanın yerleşik Chat uygulamasında (Case-y) bir destek kaydı bağlantısı paylaşıldığında atanan kişiyi, durumu ve konuyu gösteren bir kart ekleyebilmesini sağlar. Karttaki düğmeler, temsilcilerin destek kaydının sahipliğini almasını ve durumu doğrudan sohbet akışından değiştirmesini sağlar.

Bağlantı önizlemenin işleyiş şekli

Bir kullanıcı, mesajına bağlantı eklediğinde, ilgili kullanıcının bu bağlantıyı bir Chat uygulamasında önizleyebileceğini belirten bir çip gösterilir.

Mesaj gönderildikten sonra bağlantı Chat uygulamasına gönderilir. Uygulama, kartı oluşturup kullanıcının mesajına ekler.

Kart, bağlantının yanında düğmeler gibi etkileşimli öğeler dahil olmak üzere bağlantı hakkında ek bilgiler sağlar. Chat uygulamanız, ekteki kartı düğme tıklamaları gibi kullanıcı etkileşimlerine yanıt olarak güncelleyebilir.

Mesajına kart ekleyerek Chat uygulamasının bağlantısını önizlemesini istemeyen kullanıcılar, önizleme çipindeki simgesini tıklayarak önizlemeyi engelleyebilir. Kullanıcılar, ekli kartı Önizlemeyi kaldır'ı tıklayarak istedikleri zaman kaldırabilir.

Ön koşullar

Not: Bu kılavuzdaki kod örnekleri, Node.js ve Python için Google Cloud Functions işlevi olarak kullanılabilir.

Node.js

Etkileşimli özellikler için etkinleştirilmiş bir Google Chat uygulaması. Bir HTTP hizmeti kullanarak etkileşimli Chat uygulaması için bu hızlı başlangıç kılavuzunu tamamlayın.

Apps Komut Dosyası

Etkileşimli özellikler için etkinleştirilmiş bir Google Chat uygulaması. Bir Apps Komut Dosyası'ndaki etkileşimli Chat uygulaması için bu hızlı başlangıç kılavuzunu tamamlayın.

Bağlantı önizlemelerini yapılandırma

example.com, support.example.com ve support.example.com/cases/ gibi belirli bağlantıları, Chat uygulamanızın önizleyebilmesi için Google Cloud Console'daki Chat uygulamanızın yapılandırma sayfasında URL kalıpları olarak kaydedin.

1. Google Cloud Console'u açın.
2. "Google Cloud"un yanında Aşağı oku tıklayın ve Chat uygulamanızın projesini açın.
3. Arama alanına Google Chat API yazıp Google Chat API'yi tıklayın.
4. > Yapılandırmayı Yönet'i tıklayın.
5. Bağlantı önizlemeleri altında bir URL kalıbı ekleyin veya düzenleyin.
   1. Yeni bir URL kalıbı için bağlantı önizlemelerini yapılandırmak üzere URL Kalıbı Ekle'yi tıklayın.
   2. Mevcut bir URL kalıbının yapılandırmasını düzenlemek için aşağı oku tıklayın.

6. Ana makine kalıbı alanına URL kalıbının alan adını girin. Chat uygulaması, bu alanın bağlantılarını önizleyecek.

   subdomain.example.com gibi belirli bir alt alan adına ait Chat uygulaması önizleme bağlantılarının alt alan adını ekleyin.

   Alanın tamamı için Chat uygulaması önizleme bağlantıları oluşturmak üzere alt alan adı olarak yıldız işareti (*) içeren bir joker karakter belirleyin. Örneğin, *.example.com, subdomain.example.com ve any.number.of.subdomains.example.com ile eşleşir.

7. Yol ön eki alanına, ana makine kalıbı alanına eklenecek bir yol girin.

   Ana makine kalıbı alanındaki tüm URL'leri eşleştirmek için Yol ön eki'ni boş bırakın.

   Örneğin, Ana makine kalıbı support.example.com ise support.example.com/cases/ bünyesinde barındırılan destek kayıtlarındaki URL'leri eşleştirmek için cases/ değerini girin.

8. Bitti'yi tıklayın.

9. Kaydet'i tıklayın.

Artık kullanıcılar Chat uygulamanızı içeren bir Chat alanındaki mesajlara bağlantı önizleme URL'si kalıbıyla eşleşen bir bağlantı eklediğinde uygulamanız bağlantıyı önizler.

Bağlantıları önizleme

Belirli bir bağlantı için bağlantı önizlemeyi yapılandırdıktan sonra, Chat uygulaması şu yöntemi kullanarak bağlantıyı tanıyıp önizleyebilir: daha fazla bilgi ekleyebilirsiniz.

Şunu içeren Chat alanlarında: Chat uygulaması: Bir kullanıcının mesajında bir bağlantı önizleme URL'si kalıbıyla eşleşirse, Chat uygulamanız CANNOT TRANSLATE MESSAGE etkileşim etkinliği. JSON etkileşim etkinliğinin yükü matchedUrl alanını içerir:

JSON

"message": {

  . . . // other message attributes redacted

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

  . . . // other message attributes redacted

}

MESSAGE etkinliğinde matchedUrl alanının olup olmadığını kontrol ederek yardımcı olacaksa, Chat uygulamanız mesajı görebilirsiniz. Chat uygulamanız şunları yapabilir: basit bir kısa mesajla yanıt verebilir veya kart ekleyebilirsiniz.

Kısa mesajla yanıtla

Basit yanıtlar için Chat uygulamanız bir bağlantıyı önizleyebilir basit bir kısa mesajla yanıt vererek bir bağlantı ekler. Bu örnekte, Google Etiket Yöneticisi'nden gelen bir bağlantı önizleme URL'si kalıbıyla eşleşir.

Node.js

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

GitHub'da göster

/**
 * 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 Komut Dosyası

apps-script/preview-link/simple-text-message.gs

GitHub'da göster

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

Kart ekleyin

Önizlenen bir bağlantıya kart eklemek için: şunu döndür: ActionResponse UPDATE_USER_MESSAGE_CARDS türünde. Bu örnekte basit bir kart ekli.

Node.js

node/preview-link/attach-card.js

GitHub'da göster

/**
 * 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 Komut Dosyası

Bu örnekte, kart JSON'a ekleyin. Ayrıca şunu da kullanabilirsiniz: Apps Komut Dosyası kart hizmeti.

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

GitHub'da göster

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

Kart güncelleme

Önizlenen bir bağlantıya ekli kartı güncellemek için ActionResponse UPDATE_USER_MESSAGE_CARDS türünde. Chat uygulamaları yalnızca güncellenebilir. bir yanıt olarak bağlantıları önizleyen Chat uygulaması ile etkileşim etkinliği. Chat uygulamaları, Chat API'yi çağırarak bu kartları güncelleyemez eşzamansız olarak ayarlayabilirsiniz.

Bağlantı önizleme, UPDATE_MESSAGE türünde ActionResponse döndürmeyi desteklemez. UPDATE_MESSAGE, yalnızca kartı değil, mesajın tamamını güncellediğinden bu işlem yalnızca orijinal mesajı Chat uygulaması tarafından oluşturulmuştur. Bağlantı önizleme, kullanıcı tarafından oluşturulan bir mesaja kart ekler. Bu nedenle, Chat uygulamasının bu mesajı güncelleme izni yoktur.

Bir işlevin Chat akışındaki hem kullanıcı tarafından hem de uygulama tarafından oluşturulan kartları güncellediğinden emin olmak için ActionResponse öğesini, Chat uygulamasının mı yoksa bir kullanıcının mı oluşturduğuna bağlı olarak dinamik olarak ayarlayın.

• Mesajı bir kullanıcı oluşturduysa ActionResponse değerini UPDATE_USER_MESSAGE_CARDS olarak ayarlayın.
• Mesajı bir Chat uygulaması oluşturduysa ActionResponse değerini UPDATE_MESSAGE olarak ayarlayın.

Bunu yapmanın iki yolu vardır: Ekli kartın onclick özelliğinin bir parçası olarak özel bir actionMethodName belirtmek ve kontrol etmek (iletiyi kullanıcı tarafından oluşturulmuş olarak tanımlar) veya iletinin bir kullanıcı tarafından oluşturulup oluşturulmadığını kontrol etmek.

1. seçenek: actionMethodName'i kontrol edin

Önizlenen kartlarda CARD_CLICKED etkileşim etkinliğini düzgün bir şekilde işlemek üzere actionMethodName özelliğini kullanmak için ekli kartın onclick mülkü olarak özel bir actionMethodName ayarlayın:

JSON

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

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

"actionMethodName": "assign", düğmeyi bağlantı önizlemesinin parçası olarak tanımlarken, eşleşen bir actionMethodName olup olmadığını kontrol ederek doğru ActionResponse değerini dinamik olarak döndürmek mümkündür:

Node.js

node/preview-link/update-card.js

GitHub'da göster

/**
 * 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 Komut Dosyası

Bu örnekte, kart JSON'a ekleyin. Ayrıca şunu da kullanabilirsiniz: Apps Komut Dosyası kart hizmeti.

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

GitHub'da göster

/**
 * Updates a card that was attached to a message with a previewed link.
 *
 * @param {Object} event The event object from Chat API.
 * @return {Object} Response from the Chat app. Either a new card attached to
 * the message with the previewed link, or an update to an existing card.
 */
function onCardClick(event) {
  // Checks for the presence of "actionMethodName": "assign" and sets
  // actionResponse.type to "UPDATE_USER"MESSAGE_CARDS" if present or
  // "UPDATE_MESSAGE" if absent.
  const actionResponseType = event.action.actionMethodName === 'assign' ?
    'UPDATE_USER_MESSAGE_CARDS' :
    'UPDATE_MESSAGE';

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

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

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

2. Seçenek: Gönderen türünü kontrol etme

message.sender.type adlı değerin HUMAN mü yoksa BOT mi olduğunu kontrol edin. HUMAN değeri için ActionResponse değerini UPDATE_USER_MESSAGE_CARDS olarak ayarlayın. Aksi takdirde ActionResponse değerini UPDATE_MESSAGE olarak ayarlayın. Bunun için uygulamanız gereken adımlar:

Node.js

node/preview-link/sender-type.js

GitHub'da göster

/**
 * 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 Komut Dosyası

Bu örnekte, kart JSON'a ekleyin. Ayrıca şunu da kullanabilirsiniz: Apps Komut Dosyası kart hizmeti.

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

GitHub'da göster

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

Kart güncellemenin tipik bir nedeni düğmenin tıklanmasıdır. Bir önceki bölüm olan Kart ekle bölümündeki Bana Ata düğmesini tekrar kullanın. Aşağıdaki tam örnekte, kart "Size" atandığı şekilde güncellenir kullanıcı Bana Ata'yı tıkladıktan sonra. Örnek, gönderen türünü kontrol ederek ActionResponse öğesini dinamik olarak ayarlar.

Eksiksiz örnek: Case-y müşteri hizmetleri Chat uygulaması

Aşağıda, müşteri hizmetleri temsilcilerinin ortak çalıştığı, Chat alanında paylaşılan destek kayıtlarının bağlantılarını önizleyen bir Chat uygulaması olan Case-y uygulamasının tam kodunu görebilirsiniz.

Node.js

node/preview-link/preview-link.js

GitHub'da göster

/**
 * 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 Komut Dosyası

Bu örnekte, kart JSON'a ekleyin. Ayrıca şunu da kullanabilirsiniz: Apps Komut Dosyası kart hizmeti.

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

GitHub'da göster

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

Sınırlamalar ve dikkat edilmesi gereken noktalar

Chat uygulamanız için bağlantı önizlemelerini yapılandırırken aşağıdaki sınırları ve dikkat edilmesi gereken noktaları göz önünde bulundurun:

• Her Chat uygulaması en fazla 5 URL kalıbı için bağlantı önizlemelerini destekler.
• Sohbet uygulamaları, mesaj başına bir bağlantıyı önizler. Tek bir mesajda birden fazla önizlenebilir bağlantı varsa yalnızca ilk önizlenebilir bağlantı önizlenir.
• Sohbet uygulamaları yalnızca https:// ile başlayan bağlantıları önizler. Dolayısıyla https://support.example.com/cases/ önizleme yapar, ancak support.example.com/cases/ önizleme yapmaz.
• Mesaj, eğik çizgi komutu gibi Chat uygulamasına gönderilen başka bilgileri içermiyorsa bağlantı önizlemeleri aracılığıyla Chat uygulamasına yalnızca bağlantı URL'si gönderilir.
• Önizlenen bağlantılara eklenen kartlar yalnızca UPDATE_USER_MESSAGE_CARDS türündeki ActionResponse türlerini ve sadece Chat uygulaması etkileşim etkinliklerine yanıt olarak destekler. Bağlantı önizlemeleri, Chat API üzerinden önizlenen bir bağlantıya eklenmiş kartların güncellenmesine yönelik eşzamansız istekleri veya UPDATE_MESSAGE isteklerini desteklemez. Daha fazla bilgi edinmek için Kart güncelleme başlıklı makaleyi inceleyin.
• Chat uygulamaları, bağlantıları alandaki herkes için önizlemelidir. Bu nedenle Mesajda privateMessageViewer etiketi atlanmalıdır girin.

Bağlantı önizlemelerinde hata ayıklama

Bağlantı önizlemelerini uygularken, uygulamanın günlüklerini okuyarak Chat uygulamanızda hata ayıklamanız gerekebilir. Günlükleri okumak için Google Cloud Console'da Günlük Gezgini'ni ziyaret edin.