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

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

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

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

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

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

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

मैसेज में कार्ड अटैच करके, लिंक की झलक दिखाने वाला Chat ऐप्लिकेशन

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

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

ज़रूरी शर्तें

Node.js

Google Chat ऐप्लिकेशन, जिसमें इंटरैक्टिव सुविधाएं चालू हैं. बनाने के लिए इंटरैक्टिव चैट ऐप्लिकेशन के लिए एचटीटीपी सेवा का इस्तेमाल करें. इस क्विकस्टार्ट को पूरा करें.

Apps Script

Google Chat ऐप्लिकेशन, जिसमें इंटरैक्टिव सुविधाएं चालू हैं. बनाने के लिए Apps Script में इंटरैक्टिव चैट ऐप्लिकेशन के साथ, इस क्विकस्टार्ट की प्रोसेस को पूरा करें.

Google Cloud Console में अपने Chat ऐप्लिकेशन के कॉन्फ़िगरेशन पेज पर, यूआरएल पैटर्न के तौर पर example.com, support.example.com, और support.example.com/cases/ जैसे कुछ लिंक रजिस्टर करें, ताकि 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 ऐप्लिकेशन की झलक देखने के लिंक का इस्तेमाल करने के लिए, सबडोमेन शामिल करें.

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

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

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

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

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

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

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

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

वे चैट स्पेस जिनमें आपकी 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.'};
}

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

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

मैसेज में कार्ड अटैच करके, लिंक की झलक दिखाने वाला 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

यह उदाहरण वापस लौटकर एक कार्ड संदेश भेजता है card JSON. Google आपके यूआरएल पैरामीटर को कैसे इस्तेमाल करेगा, यह तय करने के लिए 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 को कॉल करके, चैट ऐप्लिकेशन इन कार्ड को अपडेट नहीं कर सकते एसिंक्रोनस रूप से.

लिंक की झलक देखने की सुविधा, UPDATE_MESSAGE टाइप के ActionResponse को दिखाने की सुविधा नहीं देती. 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

यह उदाहरण वापस लौटकर एक कार्ड संदेश भेजता है card JSON. Google आपके यूआरएल पैरामीटर को कैसे इस्तेमाल करेगा, यह तय करने के लिए 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

यह उदाहरण वापस लौटकर एक कार्ड संदेश भेजता है card JSON. Google आपके यूआरएल पैरामीटर को कैसे इस्तेमाल करेगा, यह तय करने के लिए 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 को डाइनैमिक तरीके से सेट किया गया है.

उदाहरण के लिए: ग्राहक सेवा के लिए चैट ऐप्लिकेशन का केस-y

यह रहा Chat ऐप्लिकेशन का पूरा कोड. यह 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

यह उदाहरण वापस लौटकर एक कार्ड संदेश भेजता है card JSON. Google आपके यूआरएल पैरामीटर को कैसे इस्तेमाल करेगा, यह तय करने के लिए 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 कंसोल पर लॉग एक्सप्लोरर पर जाएं.