Önizleme bağlantıları

Kullanıcılar Google Chat'te bağlantı paylaştığında bağlamın değiştirilmesini önlemek için Chat uygulamanız, mesajlarına kart ekleyerek bağlantıyı önizleyebilir. Bu sayede kullanıcılar, daha fazla bilgi edinebilir ve doğrudan Google Chat'ten işlem yapabilir.

Örneğin, şirketin tüm müşteri hizmetleri temsilcilerini içeren bir Google Chat alanı ile Case-y adlı bir Chat uygulamasını düşünün. Temsilciler, Chat alanında sıklıkla müşteri hizmetleri destek kayıtlarının bağlantılarını paylaşır. İş arkadaşları, yaptıkları her işlemde atanan kişi, 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 durumunu değiştirmek isteyen bir kişi de bağlantıyı açmalıdır.

Bağlantı önizleme özelliği, alanda yerleşik Chat uygulaması olan Case-y'nin, destek kaydı bağlantısı paylaşıldığında atanan kişi, durum ve konuyu gösteren bir kart eklemesine olanak tanır. Karttaki düğmeler, temsilcilerin destek kaydının sahipliğini almasına ve durumu doğrudan sohbet akışından değiştirmesine olanak tanır.

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

Chat uygulamasının bir bağlantıyı önizleyebileceğini gösteren çip

Mesaj gönderildikten sonra bağlantı, Chat uygulamasına gönderilir. Ardından, kart oluşturulur ve kullanıcının mesajına eklenir.

Mesaja kart ekleyerek bağlantıyı önizleyen Chat uygulaması

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

Mesajları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, Önizlemeyi kaldır'ı tıklayarak ekli kartı istedikleri zaman kaldırabilir.

example.com, support.example.com ve support.example.com/cases/ gibi belirli bağlantıları Google Cloud Console'da Chat uygulamanızın yapılandırma sayfasında URL kalıpları olarak kaydedin. Böylece Chat uygulamanız bu bağlantıları önizleyebilir.

Bağlantı önizlemeleri yapılandırma menüsü

  1. Google Cloud Console'u açın.
  2. "Google Cloud"un yanındaki Aşağı oku tıklayın ve Chat uygulamanızın projesini açın.
  3. Arama alanına Google Chat API yazın ve Google Chat API'yi tıklayın.
  4. Yönet > Yapılandırma'yı 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ını girin. Chat uygulaması, bu alanın bağlantılarını önizleyecek.

    subdomain.example.com gibi belirli bir alt alan adı için Chat uygulaması önizleme bağlantılarını almak istiyorsanız alt alan adını ekleyin.

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

  7. Yol öneki 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 öneki'ni boş bırakın.

    Örneğin, Ana makine kalıbı support.example.com ise support.example.com/cases/ öğesinde barındırılan vakaların URL'lerini eşleştirmek için cases/ girin.

  8. Done'ı (Bitti) tıklayın.

  9. Kaydet'i tıklayın.

Artık kullanıcılar Chat uygulamanızı içeren bir Chat alanındaki mesaja, bağlantı önizleme URL kalıbıyla eşleşen bir bağlantı eklediklerinde, uygulamanız bağlantıyı önizler.

Belirli bir bağlantı için bağlantı önizlemeyi yapılandırdıktan sonra, Chat uygulamanız daha fazla bilgi ekleyerek bağlantıyı tanıyabilir ve önizleyebilir.

Chat uygulamanızı içeren Chat alanlarında, bir kullanıcının mesajı bağlantı önizleme URL'si kalıbıyla eşleşen bir bağlantı içerdiğinde Chat uygulamanız bir MESSAGE etkileşim etkinliği alır. Etkileşim etkinliğinin JSON 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

}

Chat uygulamanız, MESSAGE etkinlik yükünde matchedUrl alanının olup olmadığını kontrol ederek önizlenen bağlantıyla mesaja bilgi ekleyebilir. Chat uygulamanız basit bir kısa mesajla yanıt verebilir veya kart ekleyebilir.

Kısa mesajla yanıtla

Basit yanıtlar için Chat uygulamanız, basit bir kısa mesajla yanıt vererek ilgili bağlantıyı önizleyebilir. Bu örnekte, bağlantı önizleme URL'si kalıbıyla eşleşen bağlantı URL'sini tekrarlayan bir mesaj iliştirilmektedir.

Node.js

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

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

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

Apps Komut Dosyası

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

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

Kart ekle

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

Mesaja kart ekleyerek bağlantıyı önizleyen Chat uygulaması

Node.js

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

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

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

Apps Komut Dosyası

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

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

Kart güncelleme

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

Bağlantı önizleme, UPDATE_MESSAGE türünde bir ActionResponse döndürülmesini desteklemez. UPDATE_MESSAGE yalnızca kart yerine mesajın tamamını güncellediğinden, güncelleme yalnızca Chat uygulaması orijinal mesajı oluşturduysa çalışır. Bağlantı önizleme, kullanıcı tarafından oluşturulan mesaja bir kart ekler. Bu nedenle, Chat uygulamasının bu mesajı güncelleme izni olmaz.

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

  • İletiyi 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: Ekteki kartın onclick özelliğinin bir parçası olarak özel bir actionMethodName belirleyip kontrol etme (iletiyi kullanıcı tarafından oluşturulmuş olarak tanımlar) veya iletinin bir kullanıcı tarafından oluşturulup oluşturulmadığını kontrol etme.

1. Seçenek: actionMethodName olup olmadığını kontrol edin

Önizlenen kartlarda CARD_CLICKED etkileşim etkinliklerini düzgün şekilde işlemek üzere actionMethodName kullanmak için ekli kartın onclick özelliğinin bir parçası 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" tarafından düğme bir bağlantı önizlemesinin parçası olarak tanımlandığında, eşleşen bir actionMethodName olup olmadığını kontrol ederek doğru ActionResponse değerinin dinamik olarak döndürülmesi mümkündür:

Node.js

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

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

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

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

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

Apps Komut Dosyası

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

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

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

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

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

message.sender.type değerinin HUMAN veya BOT olup olmadığını kontrol edin. HUMAN değeri geçerliyse ActionResponse değerini UPDATE_USER_MESSAGE_CARDS olarak ayarlayın; ActionResponse değerini ise UPDATE_MESSAGE olarak ayarlayın. Bunun için uygulamanız gereken adımlar:

Node.js

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

  // Respond to button clicks on attached cards
  if (req.body.type === 'CARD_CLICKED') {
    // Checks whether the message event originated from a human or a Chat app
    // and sets actionResponse.type to "UPDATE_USER_MESSAGE_CARDS if human or
    // "UPDATE_MESSAGE" if Chat app.
    const actionResponseType = req.body.action.actionMethodName === 'HUMAN' ?
      'UPDATE_USER_MESSAGE_CARDS' :
      'UPDATE_MESSAGE';

    return res.json({
      'actionResponse': {

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

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

Apps Komut Dosyası

apps-script/preview-link/sender-type.gs
/**
 * Updates a card that was attached to a message with a previewed link.
 *
 * @param {Object} event The event object from Chat API.
 * @return {Object} Response from the Chat app. Either a new card attached to
 * the message with the previewed link, or an update to an existing card.
 */
function onCardClick(event) {
  // Checks whether the message event originated from a human or a Chat app
  // and sets actionResponse.type to "UPDATE_USER_MESSAGE_CARDS if human or
  // "UPDATE_MESSAGE" if Chat app.
  const actionResponseType = event.message.sender.type === 'HUMAN' ?
    'UPDATE_USER_MESSAGE_CARDS' :
    'UPDATE_MESSAGE';

  return assignCase(actionResponseType);
}

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

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

Kart güncellemenin tipik bir nedeni, düğmenin tıklanmasıdır. Bir önceki Kart ekle bölümünde yer alan Bana Ata düğmesine geri dönün. Aşağıdaki eksiksiz örnekte kart, bir kullanıcı Bana Ata'yı tıkladıktan sonra "Siz"e atandığını gösterecek şekilde güncellenir. Bu örnekte, gönderen türü kontrol edilerek ActionResponse dinamik bir şekilde ayarlanır.

Tam örnek: Müşteri hizmetleri Chat uygulaması için destek kaydı oluşturun

Müşteri hizmetleri temsilcilerinin ortak çalıştığı bir Chat alanında paylaşılan destek kayıtlarının bağlantılarını önizleyen Chat uygulaması Case-y için kodun tamamını aşağıda bulabilirsiniz.

Node.js

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

  // Respond to button clicks on attached cards
  if (req.body.type === 'CARD_CLICKED') {
    // Checks whether the message event originated from a human or a Chat app
    // and sets actionResponse.type to "UPDATE_USER_MESSAGE_CARDS if human or
    // "UPDATE_MESSAGE" if Chat app.
    const actionResponseType = req.body.action.actionMethodName === 'HUMAN' ?
      'UPDATE_USER_MESSAGE_CARDS' :
      'UPDATE_MESSAGE';

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

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

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

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

Apps Komut Dosyası

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

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

/**
 * Updates a card that was attached to a message with a previewed link.
 *
 * @param {Object} event The event object from Chat API.
 * @return {Object} Response from the Chat app. Either a new card attached to
 * the message with the previewed link, or an update to an existing card.
 */
function onCardClick(event) {
  // Checks whether the message event originated from a human or a Chat app
  // and sets actionResponse to "UPDATE_USER_MESSAGE_CARDS if human or
  // "UPDATE_MESSAGE" if Chat app.
  const actionResponseType = event.message.sender.type === 'HUMAN' ?
    'UPDATE_USER_MESSAGE_CARDS' :
    'UPDATE_MESSAGE';

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

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

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

Sınırlar 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.
  • Chat uygulamalarında her mesaj için bir bağlantı önizlenebilir. Tek bir iletide birden fazla önizlenebilir bağlantı varsa yalnızca ilk önizlenebilir bağlantı önizlenebilir.
  • Sohbet uygulamaları yalnızca https:// ile başlayan bağlantıları önizler. Bu nedenle https://support.example.com/cases/ önizlemesine support.example.com/cases/ ile başlamaz.
  • Mesaj, Chat uygulamasına gönderilen eğik çizgi komutu gibi başka bilgiler içermediği sürece, 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 ActionResponseları destekler ve yalnızca Chat uygulaması etkileşim etkinliğine yanıt verir. Bağlantı önizlemeleri, önizlenen bir bağlantıya Chat API üzerinden eklenmiş kartların güncellenmesi için UPDATE_MESSAGE veya eşzamansız istekleri desteklemez. Daha fazla bilgi edinmek için Kart güncelleme başlıklı makaleyi inceleyin.

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