Önizleme bağlantıları

Kullanıcılar Google Chat'te bağlantı paylaştığında içerik geçişinin önüne geçmek için Chat uygulamanız, mesajlarına daha fazla bilgi sağlayan 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, şirketin tüm müşteri hizmetleri temsilcilerini içeren bir Google Chat alanı ve Case-y adlı bir Chat uygulaması düşünün. Temsilciler, Chat alanında genellikle müşteri hizmetleri destek kayıtlarının bağlantılarını paylaşır ve iş 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 durumu değiştirmek isteyen kullanıcılar da bağlantıyı açmalıdır.

Bağlantı önizleme, bir kullanıcı destek kaydı bağlantısı paylaştığında alanda bulunan Chat uygulaması Case-y'nin atanan kişiyi, durumu ve konuyu gösteren bir kart eklemesini sağlar. 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.

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

Bir kullanıcı mesajına bağlantı eklediğinde Chat uygulamasının bu bağlantıyı önizleyebileceğini bildiren 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.

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

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

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ı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 verilen bağlantıları önizleyecek.

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

   Chat uygulamasının tüm alan için önizleme bağlantılarını bulundurmak 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 ö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 öneki'ni boş bırakın.

   Örneğin, Ana makine kalıbı support.example.com ise support.example.com/cases/ tarafından 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.

Bağlantıyı önizleme

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ıyı kullanarak 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 bir 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

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) {
    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

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 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 iliştirilmiştir.

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) {
    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

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 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. Sohbet 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 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'u Chat uygulamasının mı yoksa bir kullanıcının mı mesajı oluşturduğuna bağlı olarak dinamik bir şekilde 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ğ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 olup olmadığını kontrol edin

Önizlenen kartlardaki CARD_CLICKED etkileşim etkinliklerini düzgün şekilde işlemek üzere actionMethodName kullanmak için ekteki 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", düğmeyi bağlantı önizlemesinin bir 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

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) {
    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

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önderenin türünü kontrol etme

message.sender.type öğesinin HUMAN veya BOT olup olmadığını kontrol edin. HUMAN değeri kullanılıyorsa ActionResponse değerini UPDATE_USER_MESSAGE_CARDS, 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

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) {
    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

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

Bir kartın güncellenmesinin tipik bir nedeni, bir düğmenin tıklanmasıdır. Bir önceki Kart ekle bölümünde yer alan Bana Ata düğmesini kullanmaya devam edin. Aşağıdaki eksiksiz örnekte, kart bir kullanıcı Bana Ata'yı tıkladıktan sonra "Siz"e atandığını belirtecek şekilde günceller. Örnekte, gönderen türü kontrol edilerek ActionResponse dinamik bir şekilde ayarlanır.

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

Müşteri hizmetleri temsilcilerinin ortak çalıştığı bir Chat alanında paylaşılan destek kayıtlarının bağlantılarını önizleyen bir Chat uygulaması olan Case-y'nin eksiksiz kodunu aşağıda bulabilirsiniz.

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) {
    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

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ı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 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 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. Bu nedenle https://support.example.com/cases/ önizlemesinde önizleme yapılabilir, ancak support.example.com/cases/ tarafından önizleme yapılmaz.
• 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ı ve yalnızca Chat uygulaması etkileşim etkinliklerine yanıt olarak desteklenir. Bağlantı önizlemeleri, Chat API üzerinden önizlenen bir bağlantıya eklenmiş kartları güncellemek 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ı önizlemelerinde hata ayıklama

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.