پیش نمایش لینک ها

برای جلوگیری از تغییر بافت زمانی که کاربران پیوندی را در چت Google به اشتراک می‌گذارند، برنامه چت شما می‌تواند با پیوست کردن کارتی به پیام آنها پیوند را پیش‌نمایش کند که اطلاعات بیشتری را ارائه می‌دهد و به افراد امکان می‌دهد مستقیماً از چت Google اقدام کنند.

به عنوان مثال، یک فضای چت Google را تصور کنید که شامل تمام نمایندگان خدمات مشتری یک شرکت به علاوه یک برنامه چت به نام Case-y است. نمایندگان اغلب پیوندهایی را به پرونده های خدمات مشتری در فضای چت به اشتراک می گذارند، و هر بار که این کار را انجام می دهند، همکارانشان باید پیوند پرونده را باز کنند تا جزئیاتی مانند گیرنده، وضعیت و موضوع را ببینند. به همین ترتیب، اگر کسی بخواهد مالکیت یک پرونده را در اختیار بگیرد یا وضعیت را تغییر دهد، باید پیوند را باز کند.

پیش‌نمایش پیوند، برنامه چت ساکن در فضا، Case-y، را قادر می‌سازد تا هر زمان که شخصی پیوند موردی را به اشتراک می‌گذارد، کارتی را که مأمور، وضعیت و موضوع را نشان می‌دهد، ضمیمه کند. دکمه های روی کارت به نمایندگان اجازه می دهد تا مالکیت پرونده را در دست بگیرند و وضعیت را مستقیماً از جریان چت تغییر دهند.

هنگامی که شخصی پیوندی را به پیام خود اضافه می‌کند، تراشه‌ای ظاهر می‌شود که به او اطلاع می‌دهد که برنامه چت ممکن است پیوند را پیش‌نمایش کند.

تراشه ای که نشان می دهد برنامه چت ممکن است یک پیوند را پیش نمایش کند

پس از ارسال پیام، لینک به برنامه چت ارسال می شود که سپس کارت را تولید کرده و به پیام کاربر متصل می کند.

برنامه چت در حال پیش‌نمایش پیوند با پیوست کردن کارتی به پیام

در کنار پیوند، کارت اطلاعات اضافی درباره پیوند، از جمله عناصر تعاملی مانند دکمه‌ها، ارائه می‌کند. برنامه گپ شما می تواند کارت پیوست شده را در پاسخ به تعاملات کاربر، مانند کلیک روی دکمه، به روز کند.

اگر کسی نمی‌خواهد برنامه چت پیوند او را با پیوست کردن کارتی به پیامش پیش‌نمایش کند، می‌تواند با کلیک روی روی تراشه پیش‌نمایش، از پیش‌نمایش جلوگیری کند. کاربران می توانند کارت پیوست شده را در هر زمان با کلیک بر روی حذف پیش نمایش حذف کنند.

پیش نیازها

Node.js

یک برنامه Google Chat که برای ویژگی‌های تعاملی فعال است. برای ایجاد یک برنامه چت تعاملی با استفاده از سرویس HTTP، این شروع سریع را کامل کنید.

پایتون

یک برنامه Google Chat که برای ویژگی‌های تعاملی فعال است. برای ایجاد یک برنامه چت تعاملی با استفاده از سرویس HTTP، این شروع سریع را کامل کنید.

جاوا

یک برنامه Google Chat که برای ویژگی‌های تعاملی فعال است. برای ایجاد یک برنامه چت تعاملی با استفاده از سرویس HTTP، این شروع سریع را کامل کنید.

اسکریپت برنامه ها

یک برنامه Google Chat که برای ویژگی‌های تعاملی فعال است. برای ایجاد یک برنامه چت تعاملی در Apps Script، این شروع سریع را کامل کنید.

پیوندهای خاص - مانند example.com ، support.example.com و support.example.com/cases/ - را به عنوان الگوهای URL در صفحه پیکربندی برنامه Chat خود در کنسول Google Cloud ثبت کنید تا برنامه Chat شما بتواند آنها را پیش نمایش کند.

منوی پیکربندی پیش نمایش پیوند

  1. کنسول Google Cloud را باز کنید.
  2. در کنار «Google Cloud»، روی پیکان رو به پایین کلیک کنید و پروژه برنامه چت خود را باز کنید.
  3. در قسمت جستجو، Google Chat API تایپ کنید و Google Chat API را کلیک کنید.
  4. روی Manage > Configuration کلیک کنید.
  5. در بخش پیش‌نمایش‌های پیوند، یک الگوی URL را اضافه یا ویرایش کنید.
    1. برای پیکربندی پیش‌نمایش پیوندها برای الگوی URL جدید، روی افزودن الگوی URL کلیک کنید.
    2. برای ویرایش پیکربندی الگوی URL موجود، روی پیکان رو به پایین کلیک کنید.
  6. در قسمت Host pattern ، دامنه الگوی URL را وارد کنید. برنامه چت پیوندهای این دامنه را پیش‌نمایش خواهد کرد.

    برای داشتن پیوندهای پیش‌نمایش برنامه گپ برای یک زیر دامنه خاص، مانند subdomain.example.com ، زیردامنه را نیز اضافه کنید.

    برای داشتن پیوندهای پیش‌نمایش برنامه چت برای کل دامنه، یک کاراکتر عام با ستاره (*) را به عنوان زیر دامنه مشخص کنید. برای مثال، *.example.com با subdomain.example.com و any.number.of.subdomains.example.com مطابقت دارد.

  7. در قسمت پیشوند مسیر ، مسیری را وارد کنید تا به دامنه الگوی میزبان اضافه شود.

    برای مطابقت با همه URL ها در دامنه الگوی میزبان، پیشوند مسیر را خالی بگذارید.

    به عنوان مثال، اگر الگوی میزبان support.example.com باشد، برای مطابقت با نشانی‌های وب برای موارد میزبانی شده در support.example.com/cases/ ، cases/ وارد کنید.

  8. روی Done کلیک کنید.

  9. روی ذخیره کلیک کنید.

اکنون، هر زمان که فردی پیوندی را وارد کند که با الگوی URL پیش‌نمایش پیوند با پیامی در فضای چت که شامل برنامه چت شما است مطابقت دارد، برنامه شما پیوند را پیش‌نمایش می‌کند.

پس از پیکربندی پیش‌نمایش پیوند برای یک پیوند معین، برنامه چت شما می‌تواند پیوند را با پیوست کردن اطلاعات بیشتر به آن شناسایی و پیش‌نمایش کند.

در داخل فضاهای چت که شامل برنامه چت شما می‌شود، وقتی پیام شخصی حاوی پیوندی است که با الگوی URL پیش‌نمایش پیوند مطابقت دارد، برنامه گپ شما یک رویداد تعاملی MESSAGE دریافت می‌کند. بار JSON برای رویداد تعامل حاوی فیلد matchedUrl است:

JSON

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

با بررسی وجود فیلد matchedUrl در محموله رویداد MESSAGE ، برنامه چت شما می‌تواند اطلاعاتی را با پیوند پیش‌نمایش‌شده به پیام اضافه کند. برنامه چت شما می‌تواند با یک پیام متنی ساده پاسخ دهد یا کارتی را پیوست کند.

با پیامک پاسخ دهید

برای پاسخ‌های اولیه، برنامه چت شما می‌تواند با پاسخ دادن با یک پیام نوشتاری ساده به یک پیوند، یک پیوند را پیش‌نمایش کند. این مثال پیامی را ضمیمه می‌کند که URL پیوند را تکرار می‌کند که با الگوی URL پیش‌نمایش پیوند مطابقت دارد.

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/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());
}

اسکریپت برنامه ها

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

برای پیوست کردن کارت به پیوند پیش‌نمایش‌شده، یک ActionResponse از نوع UPDATE_USER_MESSAGE_CARDS برگردانید. این مثال یک کارت پایه را پیوست می کند.

برنامه چت در حال پیش‌نمایش پیوند با پیوست کردن کارتی به پیام

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/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.
  GoogleAppsCardV1CardHeader header = new GoogleAppsCardV1CardHeader();
  header.setTitle("Example Customer Service Case");
  header.setSubtitle("Case basics");

  GoogleAppsCardV1DecoratedText caseIdDecoratedText = new GoogleAppsCardV1DecoratedText();
  caseIdDecoratedText.setTopLabel("Case ID");
  caseIdDecoratedText.setText("case123");

  GoogleAppsCardV1Widget caseIdWidget = new GoogleAppsCardV1Widget();
  caseIdWidget.setDecoratedText(caseIdDecoratedText);

  GoogleAppsCardV1DecoratedText assigneeDecoratedText = new GoogleAppsCardV1DecoratedText();
  assigneeDecoratedText.setTopLabel("Assignee");
  assigneeDecoratedText.setText("Charlie");

  GoogleAppsCardV1Widget assigneeWidget = new GoogleAppsCardV1Widget();
  assigneeWidget.setDecoratedText(assigneeDecoratedText);

  GoogleAppsCardV1DecoratedText statusDecoratedText = new GoogleAppsCardV1DecoratedText();
  statusDecoratedText.setTopLabel("Status");
  statusDecoratedText.setText("Open");

  GoogleAppsCardV1Widget statusWidget = new GoogleAppsCardV1Widget();
  statusWidget.setDecoratedText(statusDecoratedText);

  GoogleAppsCardV1DecoratedText subjectDecoratedText = new GoogleAppsCardV1DecoratedText();
  subjectDecoratedText.setTopLabel("Subject");
  subjectDecoratedText.setText("It won't turn on...");

  GoogleAppsCardV1Widget subjectWidget = new GoogleAppsCardV1Widget();
  subjectWidget.setDecoratedText(subjectDecoratedText);

  GoogleAppsCardV1OpenLink openOpenLink = new GoogleAppsCardV1OpenLink();
  openOpenLink.setUrl("https://support.example.com/orders/case123");

  GoogleAppsCardV1OnClick openOnClick = new GoogleAppsCardV1OnClick();
  openOnClick.setOpenLink(openOpenLink);

  GoogleAppsCardV1Button openButton = new GoogleAppsCardV1Button();
  openButton.setText("OPEN CASE");
  openButton.setOnClick(openOnClick);

  GoogleAppsCardV1OpenLink resolveOpenLink = new GoogleAppsCardV1OpenLink();
  resolveOpenLink.setUrl("https://support.example.com/orders/case123?resolved=y");

  GoogleAppsCardV1OnClick resolveOnClick = new GoogleAppsCardV1OnClick();
  resolveOnClick.setOpenLink(resolveOpenLink);

  GoogleAppsCardV1Button resolveButton = new GoogleAppsCardV1Button();
  resolveButton.setText("RESOLVE CASE");
  resolveButton.setOnClick(resolveOnClick);

  GoogleAppsCardV1Action assignAction = new GoogleAppsCardV1Action();
  assignAction.setFunction("assign");

  GoogleAppsCardV1OnClick assignOnClick = new GoogleAppsCardV1OnClick();
  assignOnClick.setAction(assignAction);

  GoogleAppsCardV1Button assignButton = new GoogleAppsCardV1Button();
  assignButton.setText("ASSIGN TO ME");
  assignButton.setOnClick(assignOnClick);

  GoogleAppsCardV1ButtonList buttonList = new GoogleAppsCardV1ButtonList();
  buttonList.setButtons(List.of(openButton, resolveButton, assignButton));

  GoogleAppsCardV1Widget buttonListWidget = new GoogleAppsCardV1Widget();
  buttonListWidget.setButtonList(buttonList);

  GoogleAppsCardV1Section section = new GoogleAppsCardV1Section();
  section.setWidgets(List.of(caseIdWidget, assigneeWidget, statusWidget, subjectWidget, buttonListWidget));

  GoogleAppsCardV1Card card = new GoogleAppsCardV1Card();
  card.setHeader(header);
  card.setSections(List.of(section));

  GenericJson cardV2 = new GenericJson();
  cardV2.set("cardId", "attachCard");
  cardV2.set("card", card);

  GenericJson actionResponse = new GenericJson();
  actionResponse.set("type", "UPDATE_USER_MESSAGE_CARDS");

  GenericJson response = new GenericJson();
  response.set("actionResponse", actionResponse);
  response.set("cardsV2", List.of(cardV2));
  return response;
}

اسکریپت برنامه ها

این مثال با برگرداندن کارت JSON یک پیام کارت ارسال می کند. همچنین می‌توانید از سرویس کارت برنامه‌های اسکریپت استفاده کنید.

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

برنامه چت شما می‌تواند یک کارت پیش‌نمایش پیوند را هنگامی که کاربران با آن تعامل دارند، مانند کلیک کردن روی دکمه روی کارت، به‌روزرسانی کند.

برای به‌روزرسانی کارت، برنامه گپ شما باید رویداد تعامل CARD_CLICKED را مدیریت کند و براساس اینکه چه کسی پیام حاوی پیش‌نمایش پیوند را ارسال کرده است، یک actionResponse نشان دهد:

  • اگر کاربری پیام ارسال کرد، actionResponse.type را روی UPDATE_USER_MESSAGE_CARDS تنظیم کنید.
  • اگر برنامه Chat پیام را ارسال کرد، actionResponse.type را روی UPDATE_MESSAGE تنظیم کنید.

برای تعیین اینکه چه کسی پیام را ارسال کرده است، می توانید از فیلد message.sender.type رویداد تعامل استفاده کنید تا ببینید آیا فرستنده یک کاربر HUMAN یا BOT است.

مثال زیر نشان می‌دهد که چگونه یک برنامه چت با به‌روزرسانی فیلد Assignee کارت و غیرفعال کردن دکمه، پیش‌نمایش پیوند را هر زمان که کاربر روی دکمه Assign to Me کلیک می‌کند، به‌روزرسانی می‌کند.

برنامه چت در حال پیش‌نمایش پیوند با نسخه به‌روزشده کارت متصل به پیام

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/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.
GenericJson 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.
    GoogleAppsCardV1CardHeader header = new GoogleAppsCardV1CardHeader();
    header.setTitle("Example Customer Service Case");
    header.setSubtitle("Case basics");

    GoogleAppsCardV1DecoratedText caseIdDecoratedText = new GoogleAppsCardV1DecoratedText();
    caseIdDecoratedText.setTopLabel("Case ID");
    caseIdDecoratedText.setText("case123");

    GoogleAppsCardV1Widget caseIdWidget = new GoogleAppsCardV1Widget();
    caseIdWidget.setDecoratedText(caseIdDecoratedText);

    GoogleAppsCardV1DecoratedText assigneeDecoratedText = new GoogleAppsCardV1DecoratedText();
    assigneeDecoratedText.setTopLabel("Assignee");
    // The assignee is now "You"
    assigneeDecoratedText.setText("You");

    GoogleAppsCardV1Widget assigneeWidget = new GoogleAppsCardV1Widget();
    assigneeWidget.setDecoratedText(assigneeDecoratedText);

    GoogleAppsCardV1DecoratedText statusDecoratedText = new GoogleAppsCardV1DecoratedText();
    statusDecoratedText.setTopLabel("Status");
    statusDecoratedText.setText("Open");

    GoogleAppsCardV1Widget statusWidget = new GoogleAppsCardV1Widget();
    statusWidget.setDecoratedText(statusDecoratedText);

    GoogleAppsCardV1DecoratedText subjectDecoratedText = new GoogleAppsCardV1DecoratedText();
    subjectDecoratedText.setTopLabel("Subject");
    subjectDecoratedText.setText("It won't turn on...");

    GoogleAppsCardV1Widget subjectWidget = new GoogleAppsCardV1Widget();
    subjectWidget.setDecoratedText(subjectDecoratedText);

    GoogleAppsCardV1OpenLink openOpenLink = new GoogleAppsCardV1OpenLink();
    openOpenLink.setUrl("https://support.example.com/orders/case123");

    GoogleAppsCardV1OnClick openOnClick = new GoogleAppsCardV1OnClick();
    openOnClick.setOpenLink(openOpenLink);

    GoogleAppsCardV1Button openButton = new GoogleAppsCardV1Button();
    openButton.setText("OPEN CASE");
    openButton.setOnClick(openOnClick);

    GoogleAppsCardV1OpenLink resolveOpenLink = new GoogleAppsCardV1OpenLink();
    resolveOpenLink.setUrl("https://support.example.com/orders/case123?resolved=y");

    GoogleAppsCardV1OnClick resolveOnClick = new GoogleAppsCardV1OnClick();
    resolveOnClick.setOpenLink(resolveOpenLink);

    GoogleAppsCardV1Button resolveButton = new GoogleAppsCardV1Button();
    resolveButton.setText("RESOLVE CASE");
    resolveButton.setOnClick(resolveOnClick);

    GoogleAppsCardV1Action assignAction = new GoogleAppsCardV1Action();
    assignAction.setFunction("assign");

    GoogleAppsCardV1OnClick assignOnClick = new GoogleAppsCardV1OnClick();
    assignOnClick.setAction(assignAction);

    GoogleAppsCardV1Button assignButton = new GoogleAppsCardV1Button();
    assignButton.setText("ASSIGN TO ME");
    // The button is now disabled
    assignButton.setDisabled(true);
    assignButton.setOnClick(assignOnClick);

    GoogleAppsCardV1ButtonList buttonList = new GoogleAppsCardV1ButtonList();
    buttonList.setButtons(List.of(openButton, resolveButton, assignButton));

    GoogleAppsCardV1Widget buttonListWidget = new GoogleAppsCardV1Widget();
    buttonListWidget.setButtonList(buttonList);

    GoogleAppsCardV1Section section = new GoogleAppsCardV1Section();
    section.setWidgets(List.of(caseIdWidget, assigneeWidget, statusWidget, subjectWidget, buttonListWidget));

    GoogleAppsCardV1Card card = new GoogleAppsCardV1Card();
    card.setHeader(header);
    card.setSections(List.of(section));

    GenericJson cardV2 = new GenericJson();
    cardV2.set("cardId", "attachCard");
    cardV2.set("card", card);

    GenericJson actionResponse = new GenericJson();
    actionResponse.set("type", actionResponseType);

    GenericJson response = new GenericJson();
    response.set("actionResponse", actionResponse);
    response.set("cardsV2", List.of(cardV2));
    return response;
  }
  return new GenericJson();
}

اسکریپت برنامه ها

این مثال با برگرداندن کارت JSON یک پیام کارت ارسال می کند. همچنین می‌توانید از سرویس کارت برنامه‌های اسکریپت استفاده کنید.

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

محدودیت ها و ملاحظات

همانطور که پیش نمایش پیوندها را برای برنامه چت خود پیکربندی می کنید، به این محدودیت ها و ملاحظات توجه کنید:

  • هر برنامه چت از پیش نمایش پیوند برای حداکثر 5 الگوی URL پشتیبانی می کند.
  • برنامه‌های چت یک پیوند را در هر پیام پیش‌نمایش می‌کنند. اگر چندین پیوند قابل پیش‌نمایش در یک پیام وجود داشته باشد، تنها اولین پیوند قابل پیش‌نمایش پیش‌نمایش می‌شود.
  • برنامه‌های چت فقط پیوندهایی را پیش‌نمایش می‌کنند که با https:// شروع می‌شوند، بنابراین https://support.example.com/cases/ پیش‌نمایش می‌کند، اما support.example.com/cases/ این کار را نمی‌کند.
  • مگر اینکه پیام حاوی اطلاعات دیگری باشد که به برنامه چت ارسال می‌شود، مانند دستور اسلش ، فقط URL پیوند با پیش‌نمایش پیوند به برنامه چت ارسال می‌شود.
  • اگر کاربری پیوند را پست کند، برنامه چت تنها در صورتی می‌تواند کارت پیش‌نمایش پیوند را به‌روزرسانی کند که کاربران با کارت تعامل داشته باشند، مثلاً با کلیک دکمه. نمی‌توانید برای به‌روزرسانی پیام کاربر به‌صورت ناهمزمان، روش Chat API's update() در منبع Message فراخوانی کنید.
  • برنامه‌های چت باید پیوندها را برای همه افراد موجود در فضا پیش‌نمایش کنند، بنابراین پیام باید قسمت privateMessageViewer را حذف کند.

همانطور که پیش‌نمایش پیوندها را پیاده‌سازی می‌کنید، ممکن است لازم باشد برنامه چت خود را با خواندن گزارش‌های برنامه اشکال‌زدایی کنید. برای خواندن گزارش‌ها، از Logs Explorer در کنسول Google Cloud دیدن کنید.