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

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

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

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

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

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

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

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

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

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

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

Node.js

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

Python

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

Java

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

Apps Script

Google Chat ऐप्लिकेशन, जो इंटरैक्शन इवेंट को पाने और उनका जवाब देने का काम करता है. Apps Script में इंटरैक्टिव Chat ऐप्लिकेशन बनाने के लिए, यह क्विकस्टार्ट पूरा करें.

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 ऐप्लिकेशन, इस डोमेन के लिंक की झलक दिखाएगा.

    अगर आपको 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 ऐप्लिकेशन उस लिंक की झलक दिखाएगा.

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

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

JSON

message: {
  matchedUrl: {
    url: "https://support.example.com/cases/case123"
  },
  ... // other message attributes redacted
}

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

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

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

Node.js

node/preview-link/index.js
// Reply with a text message for URLs of the subdomain "text"
if (event.message.matchedUrl.url.includes("text.example.com")) {
  return {
    text: 'event.message.matchedUrl.url: ' + event.message.matchedUrl.url
  };
}

Python

python/preview-link/main.py
# Reply with a text message for URLs of the subdomain "text"
if 'text.example.com' in event.get('message').get('matchedUrl').get('url'):
  return {
    'text': 'event.message.matchedUrl.url: ' +
            event.get('message').get('matchedUrl').get('url')
  }

Java

java/preview-link/src/main/java/com/google/chat/preview/App.java
// Reply with a text message for URLs of the subdomain "text"
if (event.at("/message/matchedUrl/url").asText().contains("text.example.com")) {
  return new Message().setText("event.message.matchedUrl.url: " +
    event.at("/message/matchedUrl/url").asText());
}

Apps Script

apps-script/preview-link/preview-link.gs
// Reply with a text message for URLs of the subdomain "text"
if (event.message.matchedUrl.url.includes("text.example.com")) {
  return {
    text: 'event.message.matchedUrl.url: ' + event.message.matchedUrl.url
  };
}

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

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

Node.js

node/preview-link/index.js
// Attach a card to the message for URLs of the subdomain "support"
if (event.message.matchedUrl.url.includes("support.example.com")) {
  // A hard-coded card is used in this example. In a real-life scenario,
  // the case information would be fetched and used to build the card.
  return {
    actionResponse: { type: 'UPDATE_USER_MESSAGE_CARDS' },
    cardsV2: [{
      cardId: 'attachCard',
      card: {
        header: {
          title: 'Example Customer Service Case',
          subtitle: 'Case basics',
        },
        sections: [{ widgets: [
          { decoratedText: { topLabel: 'Case ID', text: 'case123'}},
          { decoratedText: { topLabel: 'Assignee', text: 'Charlie'}},
          { decoratedText: { topLabel: 'Status', text: 'Open'}},
          { decoratedText: { topLabel: 'Subject', text: 'It won\'t turn on...' }},
          { buttonList: { buttons: [{
            text: 'OPEN CASE',
            onClick: { openLink: {
              url: 'https://support.example.com/orders/case123'
            }},
          }, {
            text: 'RESOLVE CASE',
            onClick: { openLink: {
              url: 'https://support.example.com/orders/case123?resolved=y',
            }},
          }, {
            text: 'ASSIGN TO ME',
            onClick: { action: { function: 'assign'}}
          }]}}
        ]}]
      }
    }]
  };
}

Python

python/preview-link/main.py
# Attach a card to the message for URLs of the subdomain "support"
if 'support.example.com' in event.get('message').get('matchedUrl').get('url'):
  # A hard-coded card is used in this example. In a real-life scenario,
  # the case information would be fetched and used to build the card.
  return {
    'actionResponse': { 'type': 'UPDATE_USER_MESSAGE_CARDS' },
    'cardsV2': [{
      'cardId': 'attachCard',
      'card': {
        'header': {
          'title': 'Example Customer Service Case',
          'subtitle': 'Case basics',
        },
        'sections': [{ 'widgets': [
          { 'decoratedText': { 'topLabel': 'Case ID', 'text': 'case123'}},
          { 'decoratedText': { 'topLabel': 'Assignee', 'text': 'Charlie'}},
          { 'decoratedText': { 'topLabel': 'Status', 'text': 'Open'}},
          { 'decoratedText': { 'topLabel': 'Subject', 'text': 'It won\'t turn on...' }},
          { 'buttonList': { 'buttons': [{
            'text': 'OPEN CASE',
            'onClick': { 'openLink': {
              'url': 'https://support.example.com/orders/case123'
            }},
          }, {
            'text': 'RESOLVE CASE',
            'onClick': { 'openLink': {
              'url': 'https://support.example.com/orders/case123?resolved=y',
            }},
          }, {
            'text': 'ASSIGN TO ME',
            'onClick': { 'action': { 'function': 'assign'}}
          }]}}
        ]}]
      }
    }]
  }

Java

java/preview-link/src/main/java/com/google/chat/preview/App.java
// Attach a card to the message for URLs of the subdomain "support"
if (event.at("/message/matchedUrl/url").asText().contains("support.example.com")) {
  // A hard-coded card is used in this example. In a real-life scenario,
  // the case information would be fetched and used to build the card.
  return new Message()
    .setActionResponse(new ActionResponse()
      .setType("UPDATE_USER_MESSAGE_CARDS"))
    .setCardsV2(List.of(new CardWithId()
      .setCardId("attachCard")
      .setCard(new GoogleAppsCardV1Card()
        .setHeader(new GoogleAppsCardV1CardHeader()
          .setTitle("Example Customer Service Case")
          .setSubtitle("Case basics"))
        .setSections(List.of(new GoogleAppsCardV1Section().setWidgets(List.of(
          new GoogleAppsCardV1Widget().setDecoratedText(new GoogleAppsCardV1DecoratedText()
            .setTopLabel("Case ID")
            .setText("case123")),
          new GoogleAppsCardV1Widget().setDecoratedText(new GoogleAppsCardV1DecoratedText()
            .setTopLabel("Assignee")
            .setText("Charlie")),
          new GoogleAppsCardV1Widget().setDecoratedText(new GoogleAppsCardV1DecoratedText()
            .setTopLabel("Status")
            .setText("Open")),
          new GoogleAppsCardV1Widget().setDecoratedText(new GoogleAppsCardV1DecoratedText()
            .setTopLabel("Subject")
            .setText("It won't turn on...")),
          new GoogleAppsCardV1Widget()
            .setButtonList(new GoogleAppsCardV1ButtonList().setButtons(List.of(
              new GoogleAppsCardV1Button()
                .setText("OPEN CASE")
                .setOnClick(new GoogleAppsCardV1OnClick()
                  .setOpenLink(new GoogleAppsCardV1OpenLink()
                    .setUrl("https://support.example.com/orders/case123"))),
              new GoogleAppsCardV1Button()
                .setText("RESOLVE CASE")
                .setOnClick(new GoogleAppsCardV1OnClick()
                  .setOpenLink(new GoogleAppsCardV1OpenLink()
                    .setUrl("https://support.example.com/orders/case123?resolved=y"))),
              new GoogleAppsCardV1Button()
                .setText("ASSIGN TO ME")
                .setOnClick(new GoogleAppsCardV1OnClick()
                  .setAction(new GoogleAppsCardV1Action().setFunction("assign")))))))))))));
}

Apps Script

इस उदाहरण में, कार्ड JSON को वापस भेजकर कार्ड मैसेज भेजा जाता है. Apps Script कार्ड सेवा का भी इस्तेमाल किया जा सकता है.

apps-script/preview-link/preview-link.gs
// Attach a card to the message for URLs of the subdomain "support"
if (event.message.matchedUrl.url.includes("support.example.com")) {
  // A hard-coded card is used in this example. In a real-life scenario,
  // the case information would be fetched and used to build the card.
  return {
    actionResponse: { type: 'UPDATE_USER_MESSAGE_CARDS' },
    cardsV2: [{
      cardId: 'attachCard',
      card: {
        header: {
          title: 'Example Customer Service Case',
          subtitle: 'Case basics',
        },
        sections: [{ widgets: [
          { decoratedText: { topLabel: 'Case ID', text: 'case123'}},
          { decoratedText: { topLabel: 'Assignee', text: 'Charlie'}},
          { decoratedText: { topLabel: 'Status', text: 'Open'}},
          { decoratedText: { topLabel: 'Subject', text: 'It won\'t turn on...' }},
          { buttonList: { buttons: [{
            text: 'OPEN CASE',
            onClick: { openLink: {
              url: 'https://support.example.com/orders/case123'
            }},
          }, {
            text: 'RESOLVE CASE',
            onClick: { openLink: {
              url: 'https://support.example.com/orders/case123?resolved=y',
            }},
          }, {
            text: 'ASSIGN TO ME',
            onClick: { action: { function: 'assign'}}
          }]}}
        ]}]
      }
    }]
  };
}

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

कार्ड को अपडेट करने के लिए, आपके Chat ऐप्लिकेशन को CARD_CLICKED इंटरैक्शन इवेंट को हैंडल करना होगा. साथ ही, लिंक की झलक दिखाने वाला मैसेज भेजने वाले व्यक्ति के आधार पर, actionResponse को वापस भेजना होगा:

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

मैसेज भेजने वाले व्यक्ति की पहचान करने के लिए, इंटरैक्शन इवेंट के message.sender.type फ़ील्ड का इस्तेमाल करें. इससे आपको यह पता चलेगा कि मैसेज भेजने वाला व्यक्ति HUMAN का उपयोगकर्ता था या BOT.

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

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

Node.js

node/preview-link/index.js
/**
 * Updates a card that was attached to a message with a previewed link.
 *
 * @param {Object} event The event object from Chat.
 *
 * @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) {
  // To respond to the correct button, checks the button's actionMethodName.
  if (event.action.actionMethodName === 'assign') {
    // A hard-coded card is used in this example. In a real-life scenario,
    // an actual assign action would be performed before building the card.

    // 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';

    // Returns the updated card that displays "You" for the assignee
    // and that disables the button.
    return {
      actionResponse: { type: actionResponseType },
      cardsV2: [{
        cardId: 'attachCard',
        card: {
          header: {
            title: 'Example Customer Service Case',
            subtitle: 'Case basics',
          },
          sections: [{ widgets: [
            { decoratedText: { topLabel: 'Case ID', text: 'case123'}},
            // The assignee is now "You"
            { decoratedText: { topLabel: 'Assignee', text: 'You'}},
            { decoratedText: { topLabel: 'Status', text: 'Open'}},
            { decoratedText: { topLabel: 'Subject', text: 'It won\'t turn on...' }},
            { buttonList: { buttons: [{
              text: 'OPEN CASE',
              onClick: { openLink: {
                url: 'https://support.example.com/orders/case123'
              }},
            }, {
              text: 'RESOLVE CASE',
              onClick: { openLink: {
                url: 'https://support.example.com/orders/case123?resolved=y',
              }},
            }, {
              text: 'ASSIGN TO ME',
              // The button is now disabled
              disabled: true,
              onClick: { action: { function: 'assign'}}
            }]}}
          ]}]
        }
      }]
    };
  }
}

Python

python/preview-link/main.py
def on_card_click(event: dict) -> dict:
  """Updates a card that was attached to a message with a previewed link."""
  # To respond to the correct button, checks the button's actionMethodName.
  if 'assign' == event.get('action').get('actionMethodName'):
    # A hard-coded card is used in this example. In a real-life scenario,
    # an actual assign action would be performed before building the card.

    # 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.
    actionResponseType = 'UPDATE_USER_MESSAGE_CARDS' if \
      event.get('message').get('sender').get('type') == 'HUMAN' else \
      'UPDATE_MESSAGE'

    # Returns the updated card that displays "You" for the assignee
    # and that disables the button.
    return {
      'actionResponse': { 'type': actionResponseType },
      'cardsV2': [{
        'cardId': 'attachCard',
        'card': {
          'header': {
            'title': 'Example Customer Service Case',
            'subtitle': 'Case basics',
          },
          'sections': [{ 'widgets': [
            { 'decoratedText': { 'topLabel': 'Case ID', 'text': 'case123'}},
            # The assignee is now "You"
            { 'decoratedText': { 'topLabel': 'Assignee', 'text': 'You'}},
            { 'decoratedText': { 'topLabel': 'Status', 'text': 'Open'}},
            { 'decoratedText': { 'topLabel': 'Subject', 'text': 'It won\'t turn on...' }},
            { 'buttonList': { 'buttons': [{
              'text': 'OPEN CASE',
              'onClick': { 'openLink': {
                'url': 'https://support.example.com/orders/case123'
              }},
            }, {
              'text': 'RESOLVE CASE',
              'onClick': { 'openLink': {
                'url': 'https://support.example.com/orders/case123?resolved=y',
              }},
            }, {
              'text': 'ASSIGN TO ME',
              # The button is now disabled
              'disabled': True,
              'onClick': { 'action': { 'function': 'assign'}}
            }]}}
          ]}]
        }
      }]
    }

Java

java/preview-link/src/main/java/com/google/chat/preview/App.java
// Updates a card that was attached to a message with a previewed link.
Message onCardClick(JsonNode event) {
  // To respond to the correct button, checks the button's actionMethodName.
  if (event.at("/action/actionMethodName").asText().equals("assign")) {
    // A hard-coded card is used in this example. In a real-life scenario,
    // an actual assign action would be performed before building the card.

    // 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.
    String actionResponseType =
      event.at("/message/sender/type").asText().equals("HUMAN")
      ? "UPDATE_USER_MESSAGE_CARDS" : "UPDATE_MESSAGE";

    // Returns the updated card that displays "You" for the assignee
    // and that disables the button.
    return new Message()
    .setActionResponse(new ActionResponse()
      .setType(actionResponseType))
    .setCardsV2(List.of(new CardWithId()
      .setCardId("attachCard")
      .setCard(new GoogleAppsCardV1Card()
        .setHeader(new GoogleAppsCardV1CardHeader()
          .setTitle("Example Customer Service Case")
          .setSubtitle("Case basics"))
        .setSections(List.of(new GoogleAppsCardV1Section().setWidgets(List.of(
          new GoogleAppsCardV1Widget().setDecoratedText(new GoogleAppsCardV1DecoratedText()
            .setTopLabel("Case ID")
            .setText("case123")),
          new GoogleAppsCardV1Widget().setDecoratedText(new GoogleAppsCardV1DecoratedText()
            .setTopLabel("Assignee")
            // The assignee is now "You"
            .setText("You")),
          new GoogleAppsCardV1Widget().setDecoratedText(new GoogleAppsCardV1DecoratedText()
            .setTopLabel("Status")
            .setText("Open")),
          new GoogleAppsCardV1Widget().setDecoratedText(new GoogleAppsCardV1DecoratedText()
            .setTopLabel("Subject")
            .setText("It won't turn on...")),
          new GoogleAppsCardV1Widget()
            .setButtonList(new GoogleAppsCardV1ButtonList().setButtons(List.of(
              new GoogleAppsCardV1Button()
                .setText("OPEN CASE")
                .setOnClick(new GoogleAppsCardV1OnClick()
                  .setOpenLink(new GoogleAppsCardV1OpenLink()
                    .setUrl("https://support.example.com/orders/case123"))),
              new GoogleAppsCardV1Button()
                .setText("RESOLVE CASE")
                .setOnClick(new GoogleAppsCardV1OnClick()
                  .setOpenLink(new GoogleAppsCardV1OpenLink()
                    .setUrl("https://support.example.com/orders/case123?resolved=y"))),
              new GoogleAppsCardV1Button()
                .setText("ASSIGN TO ME")
                // The button is now disabled
                .setDisabled(true)
                .setOnClick(new GoogleAppsCardV1OnClick()
                  .setAction(new GoogleAppsCardV1Action().setFunction("assign")))))))))))));
  }
  return null;
}

Apps Script

इस उदाहरण में, कार्ड JSON को वापस भेजकर कार्ड मैसेज भेजा जाता है. Apps Script कार्ड सेवा का भी इस्तेमाल किया जा सकता है.

apps-script/preview-link/preview-link.gs
/**
 * Updates a card that was attached to a message with a previewed link.
 *
 * @param {Object} event The event object from Chat.
 *
 * @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) {
  // To respond to the correct button, checks the button's actionMethodName.
  if (event.action.actionMethodName === 'assign') {
    // A hard-coded card is used in this example. In a real-life scenario,
    // an actual assign action would be performed before building the card.

    // 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';

    // Returns the updated card that displays "You" for the assignee
    // and that disables the button.
    return {
      actionResponse: { type: actionResponseType },
      cardsV2: [{
        cardId: 'attachCard',
        card: {
          header: {
            title: 'Example Customer Service Case',
            subtitle: 'Case basics',
          },
          sections: [{ widgets: [
            { decoratedText: { topLabel: 'Case ID', text: 'case123'}},
            // The assignee is now "You"
            { decoratedText: { topLabel: 'Assignee', text: 'You'}},
            { decoratedText: { topLabel: 'Status', text: 'Open'}},
            { decoratedText: { topLabel: 'Subject', text: 'It won\'t turn on...' }},
            { buttonList: { buttons: [{
              text: 'OPEN CASE',
              onClick: { openLink: {
                url: 'https://support.example.com/orders/case123'
              }},
            }, {
              text: 'RESOLVE CASE',
              onClick: { openLink: {
                url: 'https://support.example.com/orders/case123?resolved=y',
              }},
            }, {
              text: 'ASSIGN TO ME',
              // The button is now disabled
              disabled: true,
              onClick: { action: { function: 'assign'}}
            }]}}
          ]}]
        }
      }]
    };
  }
}

सीमाएं और ज़रूरी बातें

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

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

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