Google চ্যাট বার্তাগুলিতে লিঙ্কগুলির পূর্বরূপ দেখুন

গুগল চ্যাটে ব্যবহারকারীরা যখন কোনো লিঙ্ক শেয়ার করেন, তখন যাতে বার্তার বিষয়বস্তু বারবার বদলে না যায়, সেজন্য আপনার চ্যাট অ্যাপটি তাদের বার্তার সাথে একটি কার্ড সংযুক্ত করে লিঙ্কটির প্রিভিউ দেখাতে পারে। এই কার্ডটি আরও তথ্য দেয় এবং ব্যবহারকারীদের সরাসরি গুগল চ্যাট থেকেই ব্যবস্থা নেওয়ার সুযোগ করে দেয়।

দ্রষ্টব্য: গুগল চ্যাটে, অ্যাড-অনগুলি ব্যবহারকারীদের কাছে গুগল চ্যাট অ্যাপ হিসেবে প্রদর্শিত হয়। আপনি গুগল চ্যাট এপিআই ইন্টারঅ্যাকশন ইভেন্ট ব্যবহার করেও আপনার চ্যাট অ্যাপ তৈরি করতে পারেন। আরও জানতে, ‘ এক্সটেন্ড গুগল চ্যাট ওভারভিউ’ দেখুন।

উদাহরণস্বরূপ, একটি গুগল চ্যাট স্পেসের কথা ভাবুন যেখানে একটি কোম্পানির সমস্ত কাস্টমার সার্ভিস এজেন্ট এবং Case-y নামের একটি চ্যাট অ্যাপ রয়েছে। এজেন্টরা প্রায়শই চ্যাট স্পেসে কাস্টমার সার্ভিস কেসের লিঙ্ক শেয়ার করেন, এবং প্রতিবার এমনটা করার পর তাদের সহকর্মীদেরকে অ্যাসাইনি, স্ট্যাটাস এবং সাবজেক্টের মতো বিবরণ দেখার জন্য কেসের লিঙ্কটি খুলতে হয়। একইভাবে, যদি কেউ কোনো কেসের দায়িত্ব নিতে বা স্ট্যাটাস পরিবর্তন করতে চায়, তাহলে তাদের লিঙ্কটি খুলতে হয়।

লিঙ্ক প্রিভিউ করার সুবিধার ফলে, যখনই কেউ কোনো কেস লিঙ্ক শেয়ার করে, স্পেসটির নিজস্ব চ্যাট অ্যাপ ‘কেস-ওয়াই’ (Case-y) একটি কার্ড সংযুক্ত করতে পারে, যেখানে অ্যাসাইনি, স্ট্যাটাস এবং সাবজেক্ট দেখানো হয়। কার্ডের বাটনগুলো এজেন্টদেরকে কেসটির দায়িত্ব নিতে এবং সরাসরি চ্যাট স্ট্রিম থেকেই স্ট্যাটাস পরিবর্তন করতে দেয়।

লিঙ্ক প্রিভিউ কীভাবে কাজ করে

যখন কেউ তাদের বার্তায় কোনো লিঙ্ক যোগ করে, তখন একটি চিপ দেখা যায় যা তাদের জানিয়ে দেয় যে কোনো চ্যাট অ্যাপ লিঙ্কটির প্রিভিউ দেখতে পারে।

মেসেজ পাঠানোর পর লিঙ্কটি চ্যাট অ্যাপে চলে যায়, যা কার্ডটি তৈরি করে ব্যবহারকারীর মেসেজের সাথে যুক্ত করে দেয়।

লিঙ্কের পাশাপাশি, কার্ডটি লিঙ্কটি সম্পর্কে অতিরিক্ত তথ্য প্রদান করে, যার মধ্যে বাটনের মতো ইন্টারেক্টিভ উপাদানও থাকে। আপনার চ্যাট অ্যাপ ব্যবহারকারীর কার্যকলাপ, যেমন বাটন ক্লিকের প্রতিক্রিয়ায়, সংযুক্ত কার্ডটি আপডেট করতে পারে।

যদি কেউ না চান যে চ্যাট অ্যাপ তাদের মেসেজে কার্ড সংযুক্ত করে লিঙ্কের প্রিভিউ দেখাক, তাহলে তারা প্রিভিউ চিপের উপর থাকা ' ' বোতামে ক্লিক করে প্রিভিউ দেখা বন্ধ করতে পারেন। ব্যবহারকারীরা যেকোনো সময় 'রিমুভ প্রিভিউ' বোতামে ক্লিক করে সংযুক্ত কার্ডটি সরিয়ে ফেলতে পারেন।

পূর্বশর্ত

HTTP

একটি গুগল ওয়ার্কস্পেস অ্যাড-অন যা গুগল চ্যাটের কার্যকারিতা বৃদ্ধি করে। এটি তৈরি করতে, HTTP কুইকস্টার্টটি সম্পূর্ণ করুন।

দ্রষ্টব্য: এই নির্দেশিকার কোড নমুনাগুলি Node.js-এর জন্য Google Cloud Run ফাংশন হিসেবে চালানোর জন্য লেখা হয়েছে।

অ্যাপস স্ক্রিপ্ট

একটি গুগল ওয়ার্কস্পেস অ্যাড-অন যা গুগল চ্যাটের কার্যকারিতা বৃদ্ধি করে। এটি তৈরি করতে, অ্যাপস স্ক্রিপ্ট কুইকস্টার্টটি সম্পূর্ণ করুন।

লিঙ্ক প্রিভিউ কনফিগার করুন

আপনার চ্যাট অ্যাপ যাতে লিঙ্কগুলো প্রিভিউ করতে পারে, সেজন্য Google Cloud কনসোলে আপনার চ্যাট অ্যাপের কনফিগারেশন পেজে example.com , support.example.com , এবং support.example.com/cases/ এর মতো নির্দিষ্ট লিঙ্কগুলোকে URL প্যাটার্ন হিসেবে রেজিস্টার করুন।

1. গুগল ক্লাউড কনসোলটি খুলুন।
2. 'Google Cloud'-এর পাশে থাকা নিচের ক্লিক করে আপনার চ্যাট অ্যাপের প্রজেক্টটি খুলুন।
3. সার্চ ফিল্ডে Google Chat API টাইপ করুন এবং Google Chat API-তে ক্লিক করুন।
4. ম্যানেজ > কনফিগারেশন-এ ক্লিক করুন।
5. লিঙ্ক প্রিভিউ-এর অধীনে, একটি ইউআরএল প্যাটার্ন যোগ বা সম্পাদনা করুন।
   1. নতুন ইউআরএল প্যাটার্নের জন্য লিঙ্ক প্রিভিউ কনফিগার করতে, 'অ্যাড ইউআরএল প্যাটার্ন'-এ ক্লিক করুন।
   2. বিদ্যমান URL প্যাটার্নের কনফিগারেশন সম্পাদনা করতে, নিচের ক্লিক করুন।

6. হোস্ট প্যাটার্ন ফিল্ডে ইউআরএল প্যাটার্নের ডোমেইনটি লিখুন। চ্যাট অ্যাপটি এই ডোমেইনের লিঙ্কগুলো প্রিভিউ করবে।

   চ্যাট অ্যাপের প্রিভিউ লিঙ্কে subdomain.example.com এর মতো কোনো নির্দিষ্ট সাবডোমেন পেতে হলে, সাবডোমেনটি অন্তর্ভুক্ত করুন।

   সম্পূর্ণ ডোমেইনের জন্য চ্যাট অ্যাপের প্রিভিউ লিঙ্কগুলো পেতে, সাবডোমেইন হিসেবে অ্যাস্টারিস্ক (*) সহ একটি ওয়াইল্ডকার্ড ক্যারেক্টার উল্লেখ করুন। উদাহরণস্বরূপ, *.example.com subdomain.example.com এবং any.number.of.subdomains.example.com সাথে মিলে যায়।

7. পাথ প্রিফিক্স ফিল্ডে, হোস্ট প্যাটার্ন ডোমেইনের সাথে যুক্ত করার জন্য একটি পাথ লিখুন।

   হোস্ট প্যাটার্ন ডোমেইনের সমস্ত URL মেলানোর জন্য, পাথ প্রিফিক্স খালি রাখুন।

   উদাহরণস্বরূপ, যদি হোস্ট প্যাটার্নটি support.example.com হয়, তাহলে support.example.com/cases/ -এ হোস্ট করা কেসগুলির URL মেলানোর জন্য cases/ লিখুন।

8. সম্পন্ন ক্লিক করুন।

9. সংরক্ষণ করুন- এ ক্লিক করুন।

এখন, যখনই কেউ আপনার চ্যাট অ্যাপ অন্তর্ভুক্ত থাকা কোনো চ্যাট স্পেসের মেসেজে লিঙ্ক প্রিভিউ ইউআরএল প্যাটার্নের সাথে মেলে এমন কোনো লিঙ্ক যুক্ত করবে, তখন আপনার অ্যাপটি লিঙ্কটির প্রিভিউ দেখাবে।

একটি লিঙ্কের পূর্বরূপ দেখুন

কোনো নির্দিষ্ট লিঙ্কের জন্য লিঙ্ক প্রিভিউ কনফিগার করার পর, আপনার চ্যাট অ্যাপ সেটিতে আরও তথ্য সংযুক্ত করে লিঙ্কটি শনাক্ত ও প্রিভিউ করতে পারবে।

যেসব চ্যাট স্পেসে আপনার চ্যাট অ্যাপ অন্তর্ভুক্ত আছে, সেখানে যখন কারও মেসেজে কোনো লিঙ্ক থাকে যা একটি লিঙ্ক প্রিভিউ ইউআরএল প্যাটার্নের সাথে মেলে, তখন আপনার চ্যাট অ্যাপ একটি MessagePayload সহ একটি ইভেন্ট অবজেক্ট পায়। পেলোডের মধ্যে, message.matchedUrl অবজেক্টটিতে সেই লিঙ্কটি থাকে যা ব্যবহারকারী মেসেজে অন্তর্ভুক্ত করেছেন:

JSON

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

MESSAGE ইভেন্ট পেলোডে matchedUrl ফিল্ডটির উপস্থিতি যাচাই করার মাধ্যমে, আপনার চ্যাট অ্যাপ প্রিভিউ করা লিঙ্কসহ মেসেজে তথ্য যোগ করতে পারে। আপনার চ্যাট অ্যাপ একটি সাধারণ টেক্সট মেসেজ দিয়ে উত্তর দিতে পারে অথবা একটি কার্ড সংযুক্ত করতে পারে।

টেক্সট মেসেজ দিয়ে উত্তর দিন

সাধারণ উত্তরের জন্য, আপনার চ্যাট অ্যাপ কোনো লিঙ্কে টেক্সট মেসেজ পাঠিয়ে তার প্রিভিউ দেখতে পারে। এই উদাহরণটিতে এমন একটি মেসেজ সংযুক্ত করা হয়েছে, যা একটি লিঙ্ক প্রিভিউ ইউআরএল প্যাটার্নের সাথে মিলে যাওয়া লিঙ্ক ইউআরএল-টিকেই পুনরাবৃত্তি করে।

নোড.জেএস

node/chat/preview-link/index.js

গিটহাবে দেখুন

// Reply with a text message for URLs of the subdomain "text"
if (chatMessage.matchedUrl.url.includes("text.example.com")) {
  return { hostAppDataAction: { chatDataAction: { createMessageAction: { message: {
    text: 'event.chat.messagePayload.message.matchedUrl.url: ' + chatMessage.matchedUrl.url
  }}}}};
}

FUNCTION_URL পরিবর্তে সেই HTTP এন্ডপয়েন্টটি ব্যবহার করুন যা বাটন ক্লিকের কাজটি করে।

পাইথন

python/chat/preview-link/main.py

গিটহাবে দেখুন

# Reply with a text message for URLs of the subdomain "text"
if "text.example.com" in chatMessage.get('matchedUrl').get('url'):
  return { 'hostAppDataAction': { 'chatDataAction': { 'createMessageAction': { 'message': {
    'text': 'event.chat.messagePayload.message.matchedUrl.url: ' + chatMessage.get('matchedUrl').get('url')
  }}}}}

FUNCTION_URL পরিবর্তে সেই HTTP এন্ডপয়েন্টটি ব্যবহার করুন যা বাটন ক্লিকের কাজটি করে।

জাভা

java/chat/preview-link/src/main/java/com/google/chat/previewLink/App.java

গিটহাবে দেখুন

// Reply with a text message for URLs of the subdomain "text"
if (chatMessage.at("/matchedUrl/url").asText().contains("text.example.com")) {
  return new GenericJson() {{
    put("hostAppDataAction", new GenericJson() {{
      put("chatDataAction", new GenericJson() {{
        put("createMessageAction", new GenericJson() {{
          put("message", new Message()
            .setText("event.chat.messagePayload.message.matchedUrl.url: " + chatMessage.at("/matchedUrl/url").asText()));
        }});
      }});
    }});
  }};
}

FUNCTION_URL পরিবর্তে সেই HTTP এন্ডপয়েন্টটি ব্যবহার করুন যা বাটন ক্লিকের কাজটি করে।

অ্যাপস স্ক্রিপ্ট

apps-script/chat/preview-link/preview-link.gs

গিটহাবে দেখুন

// Reply with a text message for URLs of the subdomain "text".
if (chatMessage.matchedUrl.url.includes("text.example.com")) {
  return { hostAppDataAction: { chatDataAction: { createMessageAction: { message: {
    text: 'event.chat.messagePayload.message.matchedUrl.url: ' + chatMessage.matchedUrl.url
  }}}}};
}

এমন একটি কার্ড সংযুক্ত করুন যা লিঙ্কটির পূর্বরূপ দেখায়।

প্রিভিউ করা লিঙ্কের সাথে একটি কার্ড সংযুক্ত করতে, UpdateInlinePreviewAction টাইপের ChatDataActionMarkup অবজেক্টসহ DataActions অ্যাকশনটি রিটার্ন করুন।

নিম্নলিখিত উদাহরণে, একটি চ্যাট অ্যাপ সেই সমস্ত মেসেজে একটি প্রিভিউ কার্ড যোগ করে যেগুলিতে support.example.com ইউআরএল প্যাটার্নটি থাকে।

নোড.জেএস

node/chat/preview-link/index.js

গিটহাবে দেখুন

// Attach a card to the message for URLs of the subdomain "support"
if (chatMessage.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 { hostAppDataAction: { chatDataAction: { updateInlinePreviewAction: { 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: FUNCTION_URL }}
      }]}}
      ]}]
    }
  }]}}}};
}

FUNCTION_URL পরিবর্তে সেই HTTP এন্ডপয়েন্টটি ব্যবহার করুন যা বাটন ক্লিকের কাজটি করে।

পাইথন

python/chat/preview-link/main.py

গিটহাবে দেখুন

# Attach a card to the message for URLs of the subdomain "support"
if "support.example.com" in chatMessage.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 { 'hostAppDataAction': { 'chatDataAction': { 'updateInlinePreviewAction': { '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': FUNCTION_URL }}
      }]}}
      ]}]
    }
  }]}}}}

FUNCTION_URL পরিবর্তে সেই HTTP এন্ডপয়েন্টটি ব্যবহার করুন যা বাটন ক্লিকের কাজটি করে।

জাভা

java/chat/preview-link/src/main/java/com/google/chat/previewLink/App.java

গিটহাবে দেখুন

// Attach a card to the message for URLs of the subdomain "support"
if (chatMessage.at("/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.
  CardWithId cardV2 = 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(FUNCTION_URL)))
          ))
        )
      ))))
    );

  return new GenericJson() {{
    put("hostAppDataAction", new GenericJson() {{
      put("chatDataAction", new GenericJson() {{
        put("updateInlinePreviewAction", new GenericJson() {{
          put("cardsV2", List.of(cardV2));
        }});
      }});
    }});
  }};
}

FUNCTION_URL পরিবর্তে সেই HTTP এন্ডপয়েন্টটি ব্যবহার করুন যা বাটন ক্লিকের কাজটি করে।

অ্যাপস স্ক্রিপ্ট

apps-script/chat/preview-link/preview-link.gs

গিটহাবে দেখুন

// Attach a card to the message for URLs of the subdomain "support".
if (chatMessage.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 { hostAppDataAction: { chatDataAction: { updateInlinePreviewAction: { cardsV2: [{
    cardId: 'attachCard',
    card: {
      header: {
        title: 'Example Customer Service Case',
        subtitle: 'Case summary',
      },
      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',
        // Clicking this button triggers the execution of the function
        // "assign" from the Apps Script project.
        onClick: { action: { function: 'assign'}}
      }]}}
      ]}]
    }
  }]}}}};
}

একটি লিঙ্ক প্রিভিউ কার্ড আপডেট করুন

আপনার চ্যাট অ্যাপটি লিঙ্ক প্রিভিউ কার্ডটি আপডেট করতে পারে যখন ব্যবহারকারীরা সেটির সাথে ইন্টারঅ্যাক্ট করে, যেমন কার্ডের কোনো বাটনে ক্লিক করে।

কার্ডটি আপডেট করতে, আপনার চ্যাট অ্যাপকে অবশ্যই নিম্নলিখিত ChatDataActionMarkup অবজেক্টগুলির মধ্যে একটি সহ DataActions অ্যাকশনটি রিটার্ন করতে হবে:

• যদি কোনো ব্যবহারকারী বার্তাটি পাঠিয়ে থাকেন, তাহলে একটি UpdateMessageAction অবজেক্ট ফেরত দিন।
• যদি চ্যাট অ্যাপটি বার্তাটি পাঠিয়ে থাকে, তাহলে একটি UpdateInlinePreviewAction অবজেক্ট রিটার্ন করুন।

কে বার্তাটি পাঠিয়েছে তা নির্ধারণ করতে, ইভেন্ট পেলোড ( buttonClickedPayload ) ব্যবহার করে যাচাই করুন যে প্রেরক ( message.sender.type ) HUMAN (ব্যবহারকারী) নাকি BOT (চ্যাট অ্যাপ) হিসেবে সেট করা আছে।

নিম্নলিখিত উদাহরণটি দেখায় যে কীভাবে একটি চ্যাট অ্যাপ ব্যবহারকারী 'Assign to Me' বোতামে ক্লিক করলে কার্ডের ' Assignee' ফিল্ডটি আপডেট করে এবং বোতামটি নিষ্ক্রিয় করে লিঙ্ক প্রিভিউ আপডেট করে।

নোড.জেএস

node/chat/preview-link/index.js

গিটহাবে দেখুন

/**
 * Respond to clicks by assigning and updating the card that's attached to a
 * message previewed link of the pattern "support.example.com".
 *
 * @param {Object} chatMessage The chat message object from Google Workspace Add On event.
 * @return {Object} Action response depending on the message author.
 */
function handleCardClick(chatMessage) {
  // Creates the updated card that displays "You" for the assignee
  // and that disables the button.
  //
  // 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.
  const message = { 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: FUNCTION_URL }}
        }]}}
      ]}]
    }
  }]};

  // Use the adequate action response type. It depends on whether the message
  // the preview link card is attached to was created by a human or a Chat app.
  if(chatMessage.sender.type === 'HUMAN') {
    return { hostAppDataAction: { chatDataAction: { updateInlinePreviewAction: message }}};
  } else {
    return { hostAppDataAction: { chatDataAction: { updateMessageAction: message }}};
  }
}

FUNCTION_URL পরিবর্তে সেই HTTP এন্ডপয়েন্টটি ব্যবহার করুন যা বাটন ক্লিকের কাজটি করে।

পাইথন

python/chat/preview-link/main.py

গিটহাবে দেখুন

def handle_card_click(chatMessage: dict) -> dict:
  """Respond to clicks by assigning and updating the card that's attached to a
  message previewed link of the pattern "support.example.com".

  - Reply with text messages that echo "text.example.com" link URLs in messages.
  - Attach cards to messages with "support.example.com" link URLs.

  Args:
      chatMessage (Mapping[str, Any]): The chat message object from Google Workspace Add On event.

  Returns:
      Mapping[str, Any]: Action response depending on the message author.
  """
  # Creates the updated card that displays "You" for the assignee
  # and that disables the button.
  #
  # 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.
  message = { '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': FUNCTION_URL }}
      }]}}
      ]}]
    }
  }]}

  # Use the adequate action response type. It depends on whether the message
  # the preview link card is attached to was created by a human or a Chat app.
  if chatMessage.get('sender').get('type') == 'HUMAN':
    return { 'hostAppDataAction': { 'chatDataAction': { 'updateInlinePreviewAction': message }}}
  else:
    return { 'hostAppDataAction': { 'chatDataAction': { 'updateMessageAction': message }}}

FUNCTION_URL পরিবর্তে সেই HTTP এন্ডপয়েন্টটি ব্যবহার করুন যা বাটন ক্লিকের কাজটি করে।

জাভা

java/chat/preview-link/src/main/java/com/google/chat/previewLink/App.java

গিটহাবে দেখুন

/**
 * Respond to clicks by assigning and updating the card that's attached to a
 * message previewed link of the pattern "support.example.com".
 *
 * @param chatMessage The chat message object from Google Workspace Add On event.
 * @return Action response depending on the message author.
 */
GenericJson handleCardClick(JsonNode chatMessage) {
  // Creates the updated card that displays "You" for the assignee
  // and that disables the button.
  //
  // 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.
  Message message = new Message().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")),
        // The assignee is now "You"
        new GoogleAppsCardV1Widget().setDecoratedText(new GoogleAppsCardV1DecoratedText()
          .setTopLabel("Assignee")
          .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(FUNCTION_URL)))
          ))
        )
      ))))
    )
  ));

  // Use the adequate action response type. It depends on whether the message
  // the preview link card is attached to was created by a human or a Chat app.
  if("HUMAN".equals(chatMessage.at("/sender/type").asText())) {
    return new GenericJson() {{
      put("hostAppDataAction", new GenericJson() {{
        put("chatDataAction", new GenericJson() {{
          put("updateInlinePreviewAction", message);
        }});
      }});
    }};
  } else {
    return new GenericJson() {{
      put("hostAppDataAction", new GenericJson() {{
        put("chatDataAction", new GenericJson() {{
          put("updateMessageAction", message);
        }});
      }});
    }};
  }
}

FUNCTION_URL পরিবর্তে সেই HTTP এন্ডপয়েন্টটি ব্যবহার করুন যা বাটন ক্লিকের কাজটি করে।

অ্যাপস স্ক্রিপ্ট

apps-script/chat/preview-link/preview-link.gs

গিটহাবে দেখুন

/**
 * Assigns and updates the card that's attached to a message with a
 * previewed link of the pattern "support.example.com".
 *
 * @param {Object} event The event object from the Google Workspace add-on.
 * @return {Object} Action response depending on the message author.
 */
function assign(event) {
  // Creates the updated card that displays "You" for the assignee
  // and that disables the button.
  //
  // 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.
  const message = { cardsV2: [{
    cardId: 'attachCard',
    card: {
      header: {
        title: 'Example Customer Service Case',
        subtitle: 'Case summary',
      },
      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'}}
        }]}}
      ]}]
    }
  }]};

  // Use the adequate action response type. It depends on whether the message
  // the preview link card is attached to was created by a human or a Chat app.
  if(event.chat.buttonClickedPayload.message.sender.type === 'HUMAN') {
    return { hostAppDataAction: { chatDataAction: { updateInlinePreviewAction: message }}};
  } else {
    return { hostAppDataAction: { chatDataAction: { updateMessageAction: message }}};
  }
}

সীমাবদ্ধতা এবং বিবেচ্য বিষয়

আপনার চ্যাট অ্যাপের জন্য লিঙ্ক প্রিভিউ কনফিগার করার সময়, এই সীমাবদ্ধতা এবং বিবেচ্য বিষয়গুলো মনে রাখবেন:

• প্রতিটি চ্যাট অ্যাপ সর্বোচ্চ ৫টি ইউআরএল প্যাটার্নের জন্য লিঙ্ক প্রিভিউ সমর্থন করে।
• চ্যাট অ্যাপে প্রতি মেসেজে একটি করে লিঙ্ক প্রিভিউ করা যায়। যদি একটি মেসেজে একাধিক প্রিভিউযোগ্য লিঙ্ক থাকে, তবে শুধুমাত্র প্রথম লিঙ্কটিই দেখা যায়।
• চ্যাট অ্যাপগুলো শুধুমাত্র https:// দিয়ে শুরু হওয়া লিঙ্কগুলোর প্রিভিউ দেখায়, তাই https://support.example.com/cases/ প্রিভিউ দেখায়, কিন্তু support.example.com/cases/ দেখায় না।
• যদি মেসেজে স্ল্যাশ কমান্ডের মতো অন্য কোনো তথ্য অন্তর্ভুক্ত না থাকে যা চ্যাট অ্যাপে পাঠানো হয়, তাহলে লিঙ্ক প্রিভিউয়ের মাধ্যমে শুধুমাত্র লিঙ্ক ইউআরএলটিই চ্যাট অ্যাপে পাঠানো হয়।
• যদি কোনো ব্যবহারকারী লিঙ্কটি পোস্ট করেন, তাহলে একটি চ্যাট অ্যাপ শুধুমাত্র তখনই লিঙ্ক প্রিভিউ কার্ডটি আপডেট করতে পারে, যখন ব্যবহারকারীরা কার্ডটির সাথে ইন্টারঅ্যাক্ট করেন, যেমন কোনো বোতামে ক্লিক করার মাধ্যমে। কোনো ব্যবহারকারীর মেসেজ অ্যাসিঙ্ক্রোনাসভাবে আপডেট করার জন্য আপনি Message রিসোর্সের উপর চ্যাট এপিআই-এর update() মেথডটি কল করতে পারবেন না।
• চ্যাট অ্যাপগুলোকে অবশ্যই স্পেসের সকলের জন্য লিঙ্কগুলোর প্রিভিউ দেখাতে হয়, তাই মেসেজ থেকে privateMessageViewer ফিল্ডটি বাদ দিতে হবে।

ডিবাগ লিঙ্ক প্রিভিউ

আপনি যখন লিঙ্ক প্রিভিউ চালু করবেন, তখন আপনার চ্যাট অ্যাপটি ডিবাগ করার জন্য অ্যাপটির লগ পড়ার প্রয়োজন হতে পারে। লগগুলো পড়ার জন্য, গুগল ক্লাউড কনসোলের লগস এক্সপ্লোরার- এ যান।