लिंक की झलक देखें

जब उपयोगकर्ता Google Chat में लिंक शेयर करते हैं, तब संदर्भ स्विच होने से रोकने के लिए, आपके Chat ऐप्लिकेशन में लिंक की झलक देखने के लिए, मैसेज में एक कार्ड अटैच किया जा सकता है. इससे लोगों को ज़्यादा जानकारी मिलती है और लोग सीधे Google Chat से कार्रवाई कर पाते हैं.

उदाहरण के लिए, मान लें कि Google Chat स्पेस में कंपनी के सभी ग्राहक सेवा एजेंट और केस-y नाम का एक चैट ऐप्लिकेशन शामिल होता है. एजेंट अक्सर चैट स्पेस में ग्राहक सेवा के मामलों के लिंक शेयर करते हैं. साथ ही, जब भी वे अपने साथ काम करने वाले लोगों को टास्क असाइन करते हैं, तो उन्हें केस का लिंक खोलना होता है. इससे, उन्हें जिस काम के लिए असाइन किया गया है, उसकी स्थिति, और विषय जैसी जानकारी दिखती है. इसी तरह, अगर कोई व्यक्ति मामले का मालिकाना हक पाना चाहता है या स्थिति में बदलाव करना चाहता है, तो उसे लिंक खोलना होगा.

लिंक की झलक देखने की सुविधा के ज़रिए, इस स्पेस में रहने वाले Chat ऐप्लिकेशन, केस-y की मदद से एक कार्ड अटैच किया जा सकता है. इसमें, जिस व्यक्ति ने केस का लिंक शेयर किया है उसकी स्थिति, विषय, और असाइन किए गए व्यक्ति की जानकारी एक कार्ड को अटैच किया जा सकता है. कार्ड पर मौजूद बटन की मदद से, एजेंट केस का मालिकाना हक हासिल कर सकते हैं और सीधे चैट स्ट्रीम से स्टेटस बदल सकते हैं.

जब कोई व्यक्ति अपने मैसेज का लिंक जोड़ता है, तो एक चिप दिखता है. इससे उसे पता चलता है कि Chat ऐप्लिकेशन में इस लिंक की झलक देखी जा सकती है.

चिप से पता चलता है कि Chat ऐप्लिकेशन किसी लिंक की झलक दिखा सकता है

मैसेज भेजने के बाद, Chat ऐप्लिकेशन पर लिंक भेजा जाता है. इसके बाद, वह कार्ड को जनरेट करके, उपयोगकर्ता के मैसेज में अटैच कर देता है.

Chat ऐप्लिकेशन, मैसेज में कार्ड जोड़कर लिंक की झलक दिखाता है

लिंक के साथ, कार्ड बटन जैसे इंटरैक्टिव एलिमेंट सहित लिंक के बारे में ज़्यादा जानकारी भी देता है. आपका Chat ऐप्लिकेशन, उपयोगकर्ता के इंटरैक्शन, जैसे कि बटन पर होने वाले क्लिक के जवाब में अटैच किए गए कार्ड को अपडेट कर सकता है.

अगर कोई व्यक्ति अपने मैसेज में कार्ड अटैच करके, Chat ऐप्लिकेशन की झलक नहीं देखना चाहता, तो वह झलक दिखाने वाले चिप पर पर क्लिक करके, झलक देखने से रोक सकता है. झलक हटाएं पर क्लिक करके उपयोगकर्ता, अटैच किए गए कार्ड को किसी भी समय हटा सकते हैं.

example.com, support.example.com, और support.example.com/cases/ जैसे खास लिंक को Google Cloud Console में Chat ऐप्लिकेशन के कॉन्फ़िगरेशन पेज पर यूआरएल पैटर्न के तौर पर रजिस्टर करें, ताकि आपका Chat ऐप्लिकेशन उनकी झलक देख सके.

लिंक की झलक का कॉन्फ़िगरेशन मेन्यू

  1. Google Cloud Console खोलें.
  2. "Google Cloud" के बगल में, डाउन ऐरो पर क्लिक करें. इसके बाद, Chat ऐप्लिकेशन का प्रोजेक्ट खोलें.
  3. खोज फ़ील्ड में, Google Chat API टाइप करें और Google Chat API पर क्लिक करें.
  4. मैनेज करें > कॉन्फ़िगरेशन पर क्लिक करें.
  5. लिंक की झलक में जाकर, यूआरएल पैटर्न जोड़ें या उसमें बदलाव करें.
    1. नए यूआरएल पैटर्न के लिए लिंक की झलक कॉन्फ़िगर करने के लिए, यूआरएल पैटर्न जोड़ें पर क्लिक करें.
    2. किसी मौजूदा यूआरएल पैटर्न के कॉन्फ़िगरेशन में बदलाव करने के लिए, डाउन ऐरो पर क्लिक करें.
  6. होस्ट पैटर्न फ़ील्ड में, यूआरएल पैटर्न का डोमेन डालें. Chat ऐप्लिकेशन इस डोमेन के लिंक की झलक दिखाएगा.

    subdomain.example.com जैसे किसी सबडोमेन से जुड़े Chat ऐप्लिकेशन की झलक के लिंक पाने के लिए, सबडोमेन शामिल करें.

    पूरे डोमेन के लिए, Chat ऐप्लिकेशन की झलक के लिंक बनाने के लिए, सबडोमेन के तौर पर कोई वाइल्डकार्ड वर्ण डालें, जिसके बीच तारे का निशान (*) हो. उदाहरण के लिए, *.example.com, subdomain.example.com और any.number.of.subdomains.example.com से मेल खाता है.

  7. पाथ प्रीफ़िक्स फ़ील्ड में, होस्ट पैटर्न के डोमेन में जोड़ने के लिए पाथ डालें.

    होस्ट पैटर्न के डोमेन में सभी यूआरएल से मिलान करने के लिए, पाथ प्रीफ़िक्स को खाली छोड़ दें.

    उदाहरण के लिए, अगर होस्ट पैटर्न support.example.com है, तो support.example.com/cases/ पर होस्ट किए गए केस के यूआरएल से मिलान करने के लिए, cases/ डालें.

  8. हो गया पर क्लिक करें.

  9. सेव करें पर क्लिक करें.

अब जब कोई व्यक्ति ऐसा लिंक शामिल करता है जो आपके Chat ऐप्लिकेशन के चैट स्पेस में, लिंक की झलक वाले यूआरएल पैटर्न से मिलता-जुलता लिंक शामिल करता है, तो आपका ऐप्लिकेशन उस लिंक की झलक दिखाता है.

किसी लिंक के लिए लिंक की झलक कॉन्फ़िगर करने के बाद, आपका Chat ऐप्लिकेशन ज़्यादा जानकारी अटैच करके, लिंक की पहचान कर सकता है और उसकी झलक देख सकता है.

ऐसे चैट स्पेस में जब किसी व्यक्ति के मैसेज में ऐसा लिंक होता है जो लिंक की झलक वाले यूआरएल पैटर्न से मेल खाता है, तो आपके Chat ऐप्लिकेशन को MESSAGE इंटरैक्शन इवेंट मिलता है. इंटरैक्शन इवेंट के लिए JSON पेलोड में matchedUrl फ़ील्ड शामिल है:

JSON

"message": {

  . . . // other message attributes redacted

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

  . . . // other message attributes redacted

}

MESSAGE इवेंट पेलोड में matchedUrl फ़ील्ड की मौजूदगी की जांच करने पर, आपका Chat ऐप्लिकेशन झलक में देखे गए लिंक के साथ मैसेज में जानकारी जोड़ सकता है. आपके Chat ऐप्लिकेशन से जवाब के तौर पर या तो आसान मैसेज भेजा जा सकता है या कार्ड अटैच किया जा सकता है.

मैसेज से जवाब दें

आसान जवाब के लिए, आपका Chat ऐप्लिकेशन आसान मैसेज से लिंक की झलक देख सकता है. इस उदाहरण में एक मैसेज अटैच किया गया है जिसमें लिंक यूआरएल को दोहराया गया है. यह यूआरएल, लिंक की झलक वाले यूआरएल पैटर्न से मेल खाता है.

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 Script

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

कार्ड अटैच करें

झलक में देखे गए लिंक में कार्ड अटैच करने के लिए, UPDATE_USER_MESSAGE_CARDS टाइप का ActionResponse दिखाएं. इस उदाहरण में एक सामान्य कार्ड अटैच किया गया है.

Chat ऐप्लिकेशन, मैसेज में कार्ड जोड़कर लिंक की झलक दिखाता है

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 Script

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

कार्ड अपडेट करें

झलक में देखे गए लिंक के साथ अटैच किए गए कार्ड को अपडेट करने के लिए, ActionResponse UPDATE_USER_MESSAGE_CARDS टाइप दिखाएं. चैट ऐप्लिकेशन सिर्फ़ उन कार्ड को अपडेट कर सकते हैं जिनमें Chat ऐप्लिकेशन इंटरैक्शन इवेंट के जवाब के तौर पर, लिंक की झलक दिखती है. चैट ऐप्लिकेशन, Chat API को एसिंक्रोनस रूप से कॉल करके इन कार्ड को अपडेट नहीं कर सकते.

लिंक की झलक देखने की सुविधा के साथ, ActionResponse टाइप UPDATE_MESSAGE नहीं दिखाया जा सकता. UPDATE_MESSAGE सिर्फ़ कार्ड के बजाय पूरे मैसेज को अपडेट करता है. यह सिर्फ़ तब काम करता है, जब Chat ऐप्लिकेशन ने मूल मैसेज बनाया हो. लिंक की झलक देखने की सुविधा, उपयोगकर्ता के बनाए गए मैसेज में एक कार्ड जोड़ती है. इसलिए, Chat ऐप्लिकेशन के पास इसे अपडेट करने की अनुमति नहीं होती.

यह पक्का करने के लिए कि कोई फ़ंक्शन, चैट स्ट्रीम में उपयोगकर्ता के बनाए गए और ऐप्लिकेशन में बनाए जाने वाले कार्ड, दोनों को अपडेट करे, इसके लिए डाइनैमिक तरीके से ActionResponse सेट करें. यह इस हिसाब से तय किया जाता है कि मैसेज, Chat ऐप्लिकेशन ने बनाया है या किसी उपयोगकर्ता ने.

  • अगर किसी उपयोगकर्ता ने मैसेज बनाया है, तो ActionResponse को UPDATE_USER_MESSAGE_CARDS पर सेट करें.
  • अगर Chat ऐप्लिकेशन ने मैसेज बनाया है, तो ActionResponse को UPDATE_MESSAGE पर सेट करें.

ऐसा करने के दो तरीके हैं: अटैच किए गए कार्ड की onclick प्रॉपर्टी (जिससे मैसेज को उपयोगकर्ता के बनाए गए के तौर पर पहचाना जाता है) की हिस्से के रूप में कस्टम actionMethodName तय करना और उसकी जांच करना या यह देखना कि मैसेज किसी उपयोगकर्ता ने बनाया है या नहीं.

पहला विकल्प: actionMethodName देखें

झलक वाले कार्ड पर CARD_CLICKED इंटरैक्शन इवेंट को ठीक से मैनेज करने के लिए, actionMethodName का इस्तेमाल करने के लिए, अटैच किए गए कार्ड की onclick प्रॉपर्टी के हिस्से के तौर पर पसंद के मुताबिक actionMethodName सेट करें:

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" से, लिंक की झलक के हिस्से के तौर पर बटन की पहचान की जाती है. इसलिए, डाइनैमिक तौर पर सही ActionResponse दिखाया जा सकता है. इसके लिए, उससे मेल खाने वाले actionMethodName की जांच करें:

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 Script

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

दूसरा विकल्प: यह देखना कि ईमेल भेजने वाले का टाइप क्या है

देखें कि message.sender.type, HUMAN है या BOT. अगर HUMAN, तो ActionResponse को UPDATE_USER_MESSAGE_CARDS पर सेट करें, नहीं तो ActionResponse को UPDATE_MESSAGE पर सेट करें. इसके लिए यह तरीका अपनाएं:

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 Script

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

कार्ड को अपडेट करने की आम वजह, बटन पर क्लिक करना है. पिछले सेक्शन से मुझे असाइन करें बटन को वापस लाएं और कार्ड अटैच करें. नीचे दिया गया पूरा उदाहरण कार्ड को अपडेट करता है, ताकि यह बताया जा सके कि इसे किसी उपयोगकर्ता के मुझे असाइन करें पर क्लिक किए जाने के बाद "आप" को असाइन किया गया है. उदाहरण, भेजने वाले के टाइप की जांच करके ActionResponse को डाइनैमिक तौर पर सेट करता है.

सभी उदाहरण: ग्राहक सेवा के लिए Chat ऐप्लिकेशन का केस-y लिखें

यहां केस-y के लिए पूरा कोड दिया गया है. यह एक Chat ऐप्लिकेशन है, जिसमें ग्राहक सेवा एजेंट के साथ मिलकर काम करने वाले चैट स्पेस में शेयर किए गए केस के लिंक की झलक देखी जा सकती है.

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 Script

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

सीमाएं और ध्यान देने वाली बातें

अपने Chat ऐप्लिकेशन के लिए लिंक की झलक कॉन्फ़िगर करते समय, इन सीमाओं और बातों का ध्यान रखें:

  • हर Chat ऐप्लिकेशन में, ज़्यादा से ज़्यादा पांच यूआरएल पैटर्न के लिए, लिंक की झलक देखी जा सकती है.
  • चैट ऐप्लिकेशन हर मैसेज के लिए एक लिंक की झलक दिखाते हैं. अगर किसी एक मैसेज में झलक देखने के लायक कई लिंक मौजूद हैं, तो झलक में दिखने वाले लिंक की सिर्फ़ पहली झलक दिखेगी.
  • चैट ऐप्लिकेशन सिर्फ़ उन लिंक की झलक दिखाते हैं जो https:// से शुरू होते हैं. इसलिए, https://support.example.com/cases/ में झलक दिखती है, लेकिन support.example.com/cases/ नहीं.
  • अगर मैसेज में Chat ऐप्लिकेशन को भेजी जाने वाली अन्य जानकारी (जैसे, स्लैश कमांड) शामिल नहीं है, तो लिंक की झलक से Chat ऐप्लिकेशन को सिर्फ़ लिंक का यूआरएल भेजा जाता है.
  • झलक वाले लिंक के साथ अटैच किए गए कार्ड, सिर्फ़ ActionResponse टाइप के UPDATE_USER_MESSAGE_CARDS के साथ काम करते हैं. ये कार्ड, Chat ऐप्लिकेशन से इंटरैक्शन के इवेंट के जवाब में ही काम करते हैं. लिंक की झलक में, Chat API की मदद से झलक वाले लिंक के साथ अटैच किए गए कार्ड को अपडेट करने के UPDATE_MESSAGE या एसिंक्रोनस अनुरोध नहीं किए जा सकते. ज़्यादा जानने के लिए, कार्ड अपडेट करें देखें.

लिंक की झलक लागू करने के बाद, आपको ऐप्लिकेशन के लॉग पढ़कर Chat ऐप्लिकेशन को डीबग करना पड़ सकता है. लॉग पढ़ने के लिए, Google Cloud Console में लॉग एक्सप्लोरर पर जाएं.