পূর্বরূপ লিঙ্ক

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

For example, imagine a Google Chat space that includes all of a company's customer service agents plus a Chat app named Case-y. Agents frequently share links to customer service cases in the Chat space, and each time they do their colleagues must open the case link to see details like assignee, status, and subject. Likewise, if someone wants to take ownership of a case or change the status, then they need to open the link.

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

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

একটি চিপ যা নির্দেশ করে যে একটি চ্যাট অ্যাপ কোনো লিঙ্কের প্রিভিউ দেখাতে পারে।

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

মেসেজের সাথে একটি কার্ড সংযুক্ত করে চ্যাট অ্যাপে লিঙ্কের প্রিভিউ দেখা।

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

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

পূর্বশর্ত

নোড.জেএস

একটি গুগল চ্যাট অ্যাপ যা ইন্টারঅ্যাকশন ইভেন্ট গ্রহণ করে এবং সেগুলোর উত্তর দেয়। একটি HTTP সার্ভিস ব্যবহার করে ইন্টারেক্টিভ চ্যাট অ্যাপ তৈরি করতে, এই কুইকস্টার্টটি সম্পূর্ণ করুন।

পাইথন

একটি গুগল চ্যাট অ্যাপ যা ইন্টারঅ্যাকশন ইভেন্ট গ্রহণ করে এবং সেগুলোর উত্তর দেয়। একটি HTTP সার্ভিস ব্যবহার করে ইন্টারেক্টিভ চ্যাট অ্যাপ তৈরি করতে, এই কুইকস্টার্টটি সম্পূর্ণ করুন।

জাভা

একটি গুগল চ্যাট অ্যাপ যা ইন্টারঅ্যাকশন ইভেন্ট গ্রহণ করে এবং সেগুলোর উত্তর দেয়। একটি HTTP সার্ভিস ব্যবহার করে ইন্টারেক্টিভ চ্যাট অ্যাপ তৈরি করতে, এই কুইকস্টার্টটি সম্পূর্ণ করুন।

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

একটি গুগল চ্যাট অ্যাপ যা ইন্টারঅ্যাকশন ইভেন্ট গ্রহণ করে এবং সেগুলোর উত্তর দেয়। অ্যাপস স্ক্রিপ্টে একটি ইন্টারেক্টিভ চ্যাট অ্যাপ তৈরি করতে, এই কুইকস্টার্টটি সম্পূর্ণ করুন।

আপনার চ্যাট অ্যাপ যাতে লিঙ্কগুলো প্রিভিউ করতে পারে, সেজন্য 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. সংরক্ষণ করুন- এ ক্লিক করুন।

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

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

যেসব চ্যাট স্পেসে আপনার চ্যাট অ্যাপ অন্তর্ভুক্ত, সেখানে যখন কারও মেসেজে এমন কোনো লিঙ্ক থাকে যা একটি লিঙ্ক প্রিভিউ ইউআরএল প্যাটার্নের সাথে মেলে, তখন আপনার চ্যাট অ্যাপ একটি MESSAGE ইন্টারঅ্যাকশন ইভেন্ট পায়। এই ইন্টারঅ্যাকশন ইভেন্টের JSON পেলোডে matchedUrl ফিল্ডটি থাকে:

JSON 

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

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

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

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

নোড.জেএস

নোড/প্রিভিউ-লিঙ্ক/ইনডেক্স.জেএস
// 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/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/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());
}

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

অ্যাপস-স্ক্রিপ্ট/প্রিভিউ-লিঙ্ক/প্রিভিউ-লিঙ্ক.জিএস
// 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 রিটার্ন করুন। এই উদাহরণটি একটি বেসিক কার্ড সংযুক্ত করে।

মেসেজের সাথে একটি কার্ড সংযুক্ত করে চ্যাট অ্যাপে লিঙ্কের প্রিভিউ দেখা।

নোড.জেএস

নোড/প্রিভিউ-লিঙ্ক/ইনডেক্স.জেএস
// 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/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/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")))))))))))));
}

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

এই উদাহরণটি কার্ড JSON রিটার্ন করার মাধ্যমে একটি কার্ড মেসেজ পাঠায়। আপনি অ্যাপস স্ক্রিপ্ট কার্ড সার্ভিসটিও ব্যবহার করতে পারেন।

অ্যাপস-স্ক্রিপ্ট/প্রিভিউ-লিঙ্ক/প্রিভিউ-লিঙ্ক.জিএস
// 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'}}
          }]}}
        ]}]
      }
    }]
  };
}

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

কার্ডটি আপডেট করতে, আপনার চ্যাট অ্যাপকে অবশ্যই CARD_CLICKED ইন্টারঅ্যাকশন ইভেন্টটি হ্যান্ডেল করতে হবে এবং লিঙ্ক প্রিভিউ সম্বলিত মেসেজটি যিনি পাঠিয়েছেন, তার উপর ভিত্তি করে একটি actionResponse রিটার্ন করতে হবে:

  • যদি কোনো ব্যবহারকারী বার্তাটি পাঠিয়ে থাকেন, তাহলে actionResponse.type কে UPDATE_USER_MESSAGE_CARDS এ সেট করুন।
  • যদি চ্যাট অ্যাপটি বার্তাটি পাঠিয়ে থাকে, তাহলে actionResponse.type কে UPDATE_MESSAGE এ সেট করুন।

বার্তাটি কে পাঠিয়েছে তা নির্ধারণ করতে, আপনি ইন্টারঅ্যাকশন ইভেন্টের message.sender.type ফিল্ডটি ব্যবহার করে দেখতে পারেন যে প্রেরক একজন HUMAN ব্যবহারকারী ছিল নাকি BOT ।

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

চ্যাট অ্যাপে একটি মেসেজের সাথে সংযুক্ত কার্ডের আপডেট করা সংস্করণসহ একটি লিঙ্কের প্রিভিউ দেখা যাচ্ছে।

নোড.জেএস

নোড/প্রিভিউ-লিঙ্ক/ইনডেক্স.জেএস
/**
 * 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/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/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;
}

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

এই উদাহরণটি কার্ড JSON রিটার্ন করার মাধ্যমে একটি কার্ড মেসেজ পাঠায়। আপনি অ্যাপস স্ক্রিপ্ট কার্ড সার্ভিসটিও ব্যবহার করতে পারেন।

অ্যাপস-স্ক্রিপ্ট/প্রিভিউ-লিঙ্ক/প্রিভিউ-লিঙ্ক.জিএস
/**
 * 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'}}
            }]}}
          ]}]
        }
      }]
    };
  }
}

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

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

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

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