Ö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 daha fazla bilgi sağlayan ve kullanıcıların doğrudan Google Chat'ten işlem yapmalarına olanak tanıyan bir kart ekleyerek bağlantının önizlemesini sağlayabilir.

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

Bağlantı önizleme, alanda bulunan Chat uygulaması Case-y'nin, destek kaydı bağlantısı paylaştığında atanan kişi, durum ve konuyu gösteren bir kart eklemesine olanak tanır. Karttaki düğmeler sayesinde temsilciler, destek kaydının sahipliğini üstlenebilir ve durumu doğrudan sohbet akışından değiştirebilir.

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

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

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

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

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.

Bir kullanıcı, mesajına kart ekleyerek Chat uygulamasının kendi bağlantısını önizlemesini istemiyorsa önizleme çipindeki simgesini tıklayarak önizlemeyi engelleyebilir. Kullanıcılar, ekli kartı istedikleri zaman Önizlemeyi kaldır'ı tıklayarak 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 kaydederek Chat uygulamanızın bunları önizleyebilmesini sağlayın.

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 adını girin. Chat uygulaması, bu alana giden bağlantıları önizleyecek.

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

    Alanın tamamında Chat uygulaması önizleme bağlantılarının olması için alt alan 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 ön eki alanına ana makine kalıbı alanına eklenecek bir yolu girin.

    Ana makine kalıbı alanındaki tüm URL'lerle 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/ adresinde barındırılan durumları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ı eklediğinde uygulamanız bağlantıyı önizler.

Belirli bir bağlantı için bağlantı önizlemesini 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 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ıtlama

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

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) {
    res.send(
      'Hello! This function is meant to be used in a Google Chat Space.');
  }

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

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

Apps 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 ekleyin

Ö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 eklenmektedir.

Mesaja kart ekleyerek bir 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) {
    res.send(
      'Hello! This function is meant to be used in a Google Chat Space.');
  }

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

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

Apps 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 bir bağlantıya ekli kartı güncellemek için UPDATE_USER_MESSAGE_CARDS türünde bir ActionResponse döndürün. Sohbet uygulamaları, yalnızca 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, bu güncelleme yalnızca orijinal mesajı Chat uygulaması oluşturduysa çalışır. Bağlantı önizleme, kullanıcı tarafından oluşturulan mesaja bir kart ekler. Bu nedenle, Chat uygulamasının bu kartı güncelleme izni yoktur.

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ı mesajı 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: Ekteki kartın onclick özelliği kapsamında özel bir actionMethodName belirleyip kontrol etme (iletiyi kullanıcı tarafından oluşturulmuş olarak tanımlar) veya mesajın bir kullanıcı tarafından oluşturulup oluşturulmadığını kontrol etme.

1. Seçenek: actionMethodName'i kontrol edin

Önizlenen kartlarda CARD_CLICKED etkileşim etkinliklerini düzgün şekilde işlemek üzere actionMethodName kullanmak amacıyla ekli kartın onclick özelliği kapsamında ö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ımladığında, 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
/**
 * Responds to messages that have links whose URLs match URL patterns
 * configured for link previewing.
 *
 * @param {Object} req Request sent from Google Chat.
 * @param {Object} res Response to send back.
 */
exports.onMessage = (req, res) => {
  if (req.method === 'GET' || !req.body.message) {
    res.send(
      'Hello! This function is meant to be used in a Google Chat Space.');
  }

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

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

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

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

Apps 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 edin

message.sender.type öğesinin HUMAN mi yoksa BOT mi olduğunu kontrol edin. HUMAN değeri için ActionResponse değerini UPDATE_USER_MESSAGE_CARDS, 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
/**
 * Responds to messages that have links whose URLs match URL patterns
 * configured for link previewing.
 *
 * @param {Object} req Request sent from Google Chat.
 * @param {Object} res Response to send back.
 */
exports.onMessage = (req, res) => {
  if (req.method === 'GET' || !req.body.message) {
    res.send(
      'Hello! This function is meant to be used in a Google Chat Space.');
  }

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

    res.json({
      'actionResponse': {

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

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

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

Kartların güncellenmesinin tipik bir nedeni düğmenin tıklanmasıdır. Bir önceki Kart ekle bölümündeki Bana Ata düğmesini kullanıyor olabilirsiniz. Aşağıdaki eksiksiz örnek, bir kullanıcı Bana Ata'yı tıkladıktan sonra kartın "Siz"e atandığını gösterecek şekilde kartı günceller. Ö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'nin tam kodunu 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) {
    res.send(
      'Hello! This function is meant to be used in a Google Chat Space.');
  }

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

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

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

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

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

Apps 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ırlamaları ve dikkate alınması 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 mesajda birden fazla önizlenebilir bağlantı varsa yalnızca ilk önizlenebilir bağlantı önizlenebilir.
  • Sohbet uygulamalarında yalnızca https:// ile başlayan bağlantılar önizlenmektedir. Bu nedenle https://support.example.com/cases/, önizleme yapar ancak support.example.com/cases/ önizlemesi yapmaz.
  • Mesaj, Chat uygulamasına gönderilen başka bilgiler (ör. eğik çizgi komutu) içermediği sürece Chat uygulamasına bağlantı önizlemeleri ile yalnızca bağlantı URL'si gönderilir.
  • Önizlenen bağlantılara eklenen kartlar yalnızca UPDATE_USER_MESSAGE_CARDS türündeki ActionResponse öğelerini destekler ve yalnızca Chat uygulaması etkileşim etkinliğine yanıt olarak desteklenir. Bağlantı önizlemeleri, UPDATE_MESSAGE uygulamasını veya Chat API üzerinden önizlenen bir bağlantıya eklenmiş kartların güncellenmesi için 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.