स्मार्ट चिप की मदद से लिंक की झलक देखना

इस पेज पर, Google Workspace के ऐसे ऐड-ऑन को बनाने का तरीका बताया गया है जिससे Google Docs, Sheets, और Slides के उपयोगकर्ता, तीसरे पक्ष की सेवा के लिंक की झलक देख सकें.

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

उपयोगकर्ता लिंक की झलक कैसे देखते हैं

लिंक की झलक देखने के लिए, उपयोगकर्ता स्मार्ट चिप और कार्ड से इंटरैक्ट करते हैं.

जब उपयोगकर्ता किसी दस्तावेज़ या स्प्रेडशीट में कोई यूआरएल टाइप या चिपकाते हैं, तो Google Docs या Google Sheets उन्हें लिंक को स्मार्ट चिप से बदलने के लिए कहता है. स्मार्ट चिप में, लिंक के कॉन्टेंट का कोई आइकॉन और छोटा टाइटल या ब्यौरा दिखता है. जब उपयोगकर्ता चिप पर कर्सर घुमाते हैं, तो उन्हें कार्ड इंटरफ़ेस दिखता है. इसमें, फ़ाइल या लिंक के बारे में ज़्यादा जानकारी की झलक दिखती है.

यहां दिया गया वीडियो दिखाता है कि कोई उपयोगकर्ता, लिंक को स्मार्ट चिप में कैसे बदलता है और कार्ड की झलक कैसे देखता है:

उपयोगकर्ता Slides में लिंक की झलक कैसे देखते हैं

Slides में लिंक की झलक देखने के लिए, तीसरे पक्ष की स्मार्ट चिप काम नहीं करती हैं. जब उपयोगकर्ता किसी प्रज़ेंटेशन में कोई यूआरएल टाइप या चिपकाते हैं, तो Slides उन्हें लिंक को चिप के बजाय, लिंक किए गए टेक्स्ट के तौर पर उसके टाइटल से बदलने के लिए कहता है. जब उपयोगकर्ता लिंक के टाइटल पर कर्सर घुमाते हैं, तो उन्हें कार्ड इंटरफ़ेस दिखता है. इसमें, लिंक के बारे में जानकारी की झलक दिखती है.

यहां दी गई इमेज में दिखाया गया है कि Slides में लिंक की झलक कैसे दिखती है:

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

Apps Script

• एक Google Workspace खाता.
• Google Workspace ऐड-ऑन. ऐड-ऑन बनाने के लिए, यह क्विकस्टार्टदेखें.

Node.js

• एक Google Workspace खाता.
• Google Workspace ऐड-ऑन. ऐड-ऑन बनाने के लिए, यह क्विकस्टार्टदेखें.

ध्यान दें: इस गाइड में Node.js के कोड के नमूने, Cloud Function के तौर पर चलाने के लिए लिखे गए हैं

Python

• एक Google Workspace खाता.
• Google Workspace ऐड-ऑन. ऐड-ऑन बनाने के लिए, यह क्विकस्टार्टदेखें.

ध्यान दें: इस गाइड में Python के कोड के नमूने, Python 3.9 का इस्तेमाल करके Cloud Function के तौर पर चलाने के लिए लिखे गए हैं.

Java

• एक Google Workspace खाता.
• Google Workspace ऐड-ऑन. ऐड-ऑन बनाने के लिए, यह क्विकस्टार्टदेखें.

ज़रूरी नहीं: तीसरे पक्ष की सेवा के लिए पुष्टि की सुविधा सेट अप करना

अगर आपका ऐड-ऑन, ऐसी सेवा से कनेक्ट होता है जिसके लिए अनुमति की ज़रूरत होती है, तो उपयोगकर्ताओं को लिंक की झलक देखने के लिए, सेवा के लिए पुष्टि करनी होगी. इसका मतलब है कि जब उपयोगकर्ता पहली बार आपकी सेवा से किसी लिंक को Docs, Sheets या Slides की किसी फ़ाइल में चिपकाते हैं, तो आपके ऐड-ऑन को अनुमति के फ़्लो को शुरू करना होगा.

OAuth सेवा या अनुमति के लिए कस्टम प्रॉम्प्ट सेट अप करने के लिए, अपने ऐड-ऑन को तीसरे पक्ष की सेवा से कनेक्ट करना लेख देखें.

अपने ऐड-ऑन के लिए, लिंक की झलक देखने की सुविधा सेट अप करना

इस सेक्शन में, अपने ऐड-ऑन के लिए लिंक की झलक देखने की सुविधा सेट अप करने का तरीका बताया गया है. इसमें ये चरण शामिल हैं:

1. अपने ऐड-ऑन के मेनिफ़ेस्ट में, लिंक की झलक देखने की सुविधा कॉन्फ़िगर करना.
2. अपने लिंक के लिए, स्मार्ट चिप और कार्ड इंटरफ़ेस बनाना.

लिंक की झलक देखने की सुविधा कॉन्फ़िगर करना

लिंक की झलक देखने की सुविधा कॉन्फ़िगर करने के लिए, अपने ऐड-ऑन के मेनिफ़ेस्ट में ये सेक्शन और फ़ील्ड तय करें:

1. addOns सेक्शन में, Docs को बढ़ाने के लिए docs फ़ील्ड, Sheets को बढ़ाने के लिए sheets फ़ील्ड, और Slides को बढ़ाने के लिए slides फ़ील्ड जोड़ें.

2. हर फ़ील्ड में, linkPreviewTriggers ट्रिगर लागू करें. इसमें runFunction शामिल होता है. इस फ़ंक्शन को, स्मार्ट चिप और कार्ड बनाना सेक्शन में तय किया जाता है.

   linkPreviewTriggers ट्रिगर में तय किए जा सकने वाले फ़ील्ड के बारे में जानने के लिए, Apps Script के मेनिफ़ेस्ट या अन्य रनटाइम के लिए डिप्लॉयमेंट के संसाधनों से जुड़ा रेफ़रंस दस्तावेज़ देखें.

3. oauthScopes फ़ील्ड में, https://www.googleapis.com/auth/workspace.linkpreview स्कोप जोड़ें, ताकि उपयोगकर्ता अपने-आप लिंक की झलक देखने के लिए, ऐड-ऑन को अनुमति दे सकें.

उदाहरण के लिए, यहां दिए गए मेनिफ़ेस्ट का oauthScopes और addons सेक्शन देखें. इसमें, सहायता अनुरोध की सेवा के लिए लिंक की झलक देखने की सुविधा कॉन्फ़िगर की गई है.

ध्यान दें: Slides के लिए, labelText और localizedLabelText रेंडर नहीं होते. हालांकि, आपको labelText शामिल करना होगा, ताकि जब Slides में तीसरे पक्ष की स्मार्ट चिप काम करने लगें, तब यह काम करे. localizedLabelText ज़रूरी नहीं है.

{
  "oauthScopes": [
    "https://www.googleapis.com/auth/workspace.linkpreview"
  ],
  "addOns": {
    "common": {
      "name": "Preview support cases",
      "logoUrl": "https://www.example.com/images/company-logo.png",
      "layoutProperties": {
        "primaryColor": "#dd4b39"
      }
    },
    "docs": {
      "linkPreviewTriggers": [
        {
          "runFunction": "caseLinkPreview",
          "patterns": [
            {
              "hostPattern": "example.com",
              "pathPrefix": "support/cases"
            },
            {
              "hostPattern": "*.example.com",
              "pathPrefix": "cases"
            },
            {
              "hostPattern": "cases.example.com"
            }
          ],
          "labelText": "Support case",
          "logoUrl": "https://www.example.com/images/support-icon.png",
          "localizedLabelText": {
            "es": "Caso de soporte"
          }
        }
      ]
    },
    "sheets": {
      "linkPreviewTriggers": [
        {
          "runFunction": "caseLinkPreview",
          "patterns": [
            {
              "hostPattern": "example.com",
              "pathPrefix": "support/cases"
            },
            {
              "hostPattern": "*.example.com",
              "pathPrefix": "cases"
            },
            {
              "hostPattern": "cases.example.com"
            }
          ],
          "labelText": "Support case",
          "logoUrl": "https://www.example.com/images/support-icon.png",
          "localizedLabelText": {
            "es": "Caso de soporte"
          }
        }
      ]
    },
    "slides": {
      "linkPreviewTriggers": [
        {
          "runFunction": "caseLinkPreview",
          "patterns": [
            {
              "hostPattern": "example.com",
              "pathPrefix": "support/cases"
            },
            {
              "hostPattern": "*.example.com",
              "pathPrefix": "cases"
            },
            {
              "hostPattern": "cases.example.com"
            }
          ],
          "labelText": "Support case",
          "logoUrl": "https://www.example.com/images/support-icon.png",
          "localizedLabelText": {
            "es": "Caso de soporte"
          }
        }
      ]
    }
  }
}

उदाहरण में, Google Workspace का ऐड-ऑन, किसी कंपनी की सहायता अनुरोध की सेवा के लिंक की झलक दिखाता है. ऐड-ऑन, लिंक की झलक देखने के लिए तीन यूआरएल पैटर्न तय करता है. जब भी कोई लिंक, किसी एक यूआरएल पैटर्न से मेल खाता है, तो कॉलबैक फ़ंक्शन caseLinkPreview, Docs, Sheets या Slides में एक कार्ड और स्मार्ट चिप बनाता और दिखाता है. साथ ही, यूआरएल को लिंक के टाइटल से बदल देता है.

स्मार्ट चिप और कार्ड बनाना

किसी लिंक के लिए स्मार्ट चिप और कार्ड दिखाने के लिए, आपको linkPreviewTriggers ऑब्जेक्ट में तय किए गए सभी फ़ंक्शन लागू करने होंगे.

जब कोई उपयोगकर्ता, तय किए गए यूआरएल पैटर्न से मेल खाने वाले किसी लिंक से इंटरैक्ट करता है, तो linkPreviewTriggers ट्रिगर फ़ायर होता है. इसका कॉलबैक फ़ंक्शन, इवेंट ऑब्जेक्ट EDITOR_NAME.matchedUrl.url को आर्ग्युमेंट के तौर पर पास करता है. लिंक की झलक के लिए स्मार्ट चिप और कार्ड बनाने के लिए, इस इवेंट ऑब्जेक्ट के पेलोड का इस्तेमाल करें.

उदाहरण के लिए, अगर कोई उपयोगकर्ता Docs में https://www.example.com/cases/123456 लिंक की झलक देखता है, तो यह इवेंट पेलोड दिखता है:

JSON

{
  "docs": {
    "matchedUrl": {
        "url": "https://www.example.com/support/cases/123456"
    }
  }
}

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

लिंक की झलक के लिए स्मार्ट चिप और कार्ड बनाने के लिए:

1. अपने ऐड-ऑन के मेनिफ़ेस्ट के linkPreviewTriggers सेक्शन में तय किया गया फ़ंक्शन लागू करें:
   1. फ़ंक्शन को, आर्ग्युमेंट के तौर पर EDITOR_NAME.matchedUrl.url वाला कोई इवेंट ऑब्जेक्ट स्वीकार करना होगा और एक Card ऑब्जेक्ट दिखाना होगा.
   2. अगर आपकी सेवा के लिए अनुमति की ज़रूरत है, तो फ़ंक्शन को अनुमति के फ़्लो को भी शुरू करना होगा.
2. हर झलक दिखाने वाले कार्ड के लिए, ऐसे सभी कॉलबैक फ़ंक्शन लागू करें जो इंटरफ़ेस के लिए विजेट इंटरैक्टिविटी उपलब्ध कराते हैं. उदाहरण के लिए, अगर आपने "लिंक देखें" बटन शामिल किया है, तो एक ऐसी कार्रवाई बनाई जा सकती है जो लिंक को नई विंडो में खोलने के लिए, कॉलबैक फ़ंक्शन तय करती है. विजेट इंटरैक्शन के बारे में ज़्यादा जानने के लिए, ऐड-ऑन की कार्रवाइयां देखें.

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

यहां दिए गए कोड से, Docs के लिए कॉलबैक फ़ंक्शन caseLinkPreview बनता है:

Apps Script

apps-script/3p-resources/3p-resources.gs

GitHub पर देखें

/**
* Entry point for a support case link preview.
*
* @param {!Object} event The event object.
* @return {!Card} The resulting preview link card.
*/
function caseLinkPreview(event) {

  // If the event object URL matches a specified pattern for support case links.
  if (event.docs.matchedUrl.url) {

    // Uses the event object to parse the URL and identify the case details.
    const caseDetails = parseQuery(event.docs.matchedUrl.url);

    // Builds a preview card with the case name, and description
    const caseHeader = CardService.newCardHeader()
      .setTitle(`Case ${caseDetails["name"][0]}`);
    const caseDescription = CardService.newTextParagraph()
      .setText(caseDetails["description"][0]);

    // Returns the card.
    // Uses the text from the card's header for the title of the smart chip.
    return CardService.newCardBuilder()
      .setHeader(caseHeader)
      .addSection(CardService.newCardSection().addWidget(caseDescription))
      .build();
  }
}

/**
* Extracts the URL parameters from the given URL.
*
* @param {!string} url The URL to parse.
* @return {!Map} A map with the extracted URL parameters.
*/
function parseQuery(url) {
  const query = url.split("?")[1];
  if (query) {
    return query.split("&")
    .reduce(function(o, e) {
      var temp = e.split("=");
      var key = temp[0].trim();
      var value = temp[1].trim();
      value = isNaN(value) ? value : Number(value);
      if (o[key]) {
        o[key].push(value);
      } else {
        o[key] = [value];
      }
      return o;
    }, {});
  }
  return null;
}

Node.js

node/3p-resources/index.js

GitHub पर देखें

/**
 * 
 * A support case link preview.
 *
 * @param {!URL} url The event object.
 * @return {!Card} The resulting preview link card.
 */
function caseLinkPreview(url) {
  // Builds a preview card with the case name, and description
  // Uses the text from the card's header for the title of the smart chip.
  // Parses the URL and identify the case details.
  const name = `Case ${url.searchParams.get("name")}`;
  return {
    action: {
      linkPreview: {
        title: name,
        previewCard: {
          header: {
            title: name
          },
          sections: [{
            widgets: [{
              textParagraph: {
                text: url.searchParams.get("description")
              }
            }]
          }]
        }
      }
    }
  };
}

Python

python/3p-resources/create_link_preview/main.py

GitHub पर देखें

def case_link_preview(url):
    """A support case link preview.
    Args:
      url: A matching URL.
    Returns:
      The resulting preview link card.
    """

    # Parses the URL and identify the case details.
    query_string = parse_qs(url.query)
    name = f'Case {query_string["name"][0]}'
    # Uses the text from the card's header for the title of the smart chip.
    return {
        "action": {
            "linkPreview": {
                "title": name,
                "previewCard": {
                    "header": {
                        "title": name
                    },
                    "sections": [{
                        "widgets": [{
                            "textParagraph": {
                                "text": query_string["description"][0]
                            }
                        }]
                    }],
                }
            }
        }
    }

Java

java/3p-resources/src/main/java/CreateLinkPreview.java

GitHub पर देखें

/**
 * A support case link preview.
 *
 * @param url A matching URL.
 * @return The resulting preview link card.
 */
JsonObject caseLinkPreview(URL url) throws UnsupportedEncodingException {
  // Parses the URL and identify the case details.
  Map<String, String> caseDetails = new HashMap<String, String>();
  for (String pair : url.getQuery().split("&")) {
      caseDetails.put(URLDecoder.decode(pair.split("=")[0], "UTF-8"), URLDecoder.decode(pair.split("=")[1], "UTF-8"));
  }

  // Builds a preview card with the case name, and description
  // Uses the text from the card's header for the title of the smart chip.
  JsonObject cardHeader = new JsonObject();
  String caseName = String.format("Case %s", caseDetails.get("name"));
  cardHeader.add("title", new JsonPrimitive(caseName));

  JsonObject textParagraph = new JsonObject();
  textParagraph.add("text", new JsonPrimitive(caseDetails.get("description")));

  JsonObject widget = new JsonObject();
  widget.add("textParagraph", textParagraph);

  JsonArray widgets = new JsonArray();
  widgets.add(widget);

  JsonObject section = new JsonObject();
  section.add("widgets", widgets);

  JsonArray sections = new JsonArray();
  sections.add(section);

  JsonObject previewCard = new JsonObject();
  previewCard.add("header", cardHeader);
  previewCard.add("sections", sections);

  JsonObject linkPreview = new JsonObject();
  linkPreview.add("title", new JsonPrimitive(caseName));
  linkPreview.add("previewCard", previewCard);

  JsonObject action = new JsonObject();
  action.add("linkPreview", linkPreview);

  JsonObject renderActions = new JsonObject();
  renderActions.add("action", action);

  return renderActions;
}

झलक दिखाने वाले कार्ड के लिए काम करने वाले कॉम्पोनेंट

Google Workspace के ऐड-ऑन, लिंक की झलक दिखाने वाले कार्ड के लिए इन विजेट और कार्रवाइयों के साथ काम करते हैं:

Apps Script

कार्ड सेवा का फ़ील्ड	टाइप
TextParagraph	विजेट
DecoratedText	विजेट
Image	विजेट
IconImage	विजेट
ButtonSet	विजेट
TextButton	विजेट
ImageButton	विजेट
Grid	विजेट
Divider	विजेट
OpenLink	कार्रवाई
Navigation	कार्रवाई सिर्फ़ updateCard तरीके के साथ काम करता है.

JSON

कार्ड (google.apps.card.v1) फ़ील्ड	टाइप
TextParagraph	विजेट
DecoratedText	विजेट
Image	विजेट
Icon	विजेट
ButtonList	विजेट
Button	विजेट
Grid	विजेट
Divider	विजेट
OpenLink	कार्रवाई
Navigation	कार्रवाई सिर्फ़ updateCard तरीके के साथ काम करता है.

पूरा उदाहरण: सहायता अनुरोध का ऐड-ऑन

यहां दिए गए उदाहरण में, Google Workspace के ऐसे ऐड-ऑन के बारे में बताया गया है जो Google Docs में, किसी कंपनी के सहायता अनुरोधों के लिंक की झलक दिखाता है.

उदाहरण में यह काम किया जाता है:

• सहायता अनुरोधों के लिंक की झलक दिखाता है. जैसे, https://www.example.com/support/cases/1234. स्मार्ट चिप में, सहायता का आइकॉन दिखता है. झलक दिखाने वाले कार्ड में, केस आईडी और ब्यौरा शामिल होता है.
• अगर उपयोगकर्ता की स्थानीय भाषा स्पेनिश पर सेट है, तो स्मार्ट चिप, अपने labelText को स्पेनिश में बदल देती है.

मेनिफ़ेस्ट

Apps Script

apps-script/3p-resources/appsscript.json

GitHub पर देखें

{
  "timeZone": "America/New_York",
  "exceptionLogging": "STACKDRIVER",
  "runtimeVersion": "V8",
  "oauthScopes": [
    "https://www.googleapis.com/auth/workspace.linkpreview",
    "https://www.googleapis.com/auth/workspace.linkcreate"
  ],
  "addOns": {
    "common": {
      "name": "Manage support cases",
      "logoUrl": "https://developers.google.com/workspace/add-ons/images/support-icon.png",
      "layoutProperties": {
        "primaryColor": "#dd4b39"
      }
    },
    "docs": {
      "linkPreviewTriggers": [
        {
          "runFunction": "caseLinkPreview",
          "patterns": [
            {
              "hostPattern": "example.com",
              "pathPrefix": "support/cases"
            },
            {
              "hostPattern": "*.example.com",
              "pathPrefix": "cases"
            },
            {
              "hostPattern": "cases.example.com"
            }
          ],
          "labelText": "Support case",
          "localizedLabelText": {
            "es": "Caso de soporte"
          },
          "logoUrl": "https://developers.google.com/workspace/add-ons/images/support-icon.png"
        }
      ],
      "createActionTriggers": [
        {
          "id": "createCase",
          "labelText": "Create support case",
          "localizedLabelText": {
            "es": "Crear caso de soporte"
          },
          "runFunction": "createCaseInputCard",
          "logoUrl": "https://developers.google.com/workspace/add-ons/images/support-icon.png"
        }
      ]
    }
  }
}

JSON

ध्यान दें: यहां दिया गया मेनिफ़ेस्ट इस्तेमाल करने के लिए, URL वैल्यू को डिप्लॉय किए गए फ़ंक्शन के यूआरएल से बदलें. कोड के नमूने का इस्तेमाल करके, फ़ंक्शन को डिप्लॉय किया जा सकता है.

{
  "oauthScopes": [
    "https://www.googleapis.com/auth/workspace.linkpreview"
  ],
  "addOns": {
    "common": {
      "name": "Preview support cases",
      "logoUrl": "https://developers.google.com/workspace/add-ons/images/support-icon.png",
      "layoutProperties": {
        "primaryColor": "#dd4b39"
      }
    },
    "docs": {
      "linkPreviewTriggers": [
        {
          "runFunction": "URL",
          "patterns": [
            {
              "hostPattern": "example.com",
              "pathPrefix": "support/cases"
            },
            {
              "hostPattern": "*.example.com",
              "pathPrefix": "cases"
            },
            {
              "hostPattern": "cases.example.com"
            }
          ],
          "labelText": "Support case",
          "localizedLabelText": {
            "es": "Caso de soporte"
          },
          "logoUrl": "https://developers.google.com/workspace/add-ons/images/support-icon.png"
        }
      ]
    }
  }
}

कोड

Apps Script

apps-script/3p-resources/3p-resources.gs

GitHub पर देखें

/**
* Entry point for a support case link preview.
*
* @param {!Object} event The event object.
* @return {!Card} The resulting preview link card.
*/
function caseLinkPreview(event) {

  // If the event object URL matches a specified pattern for support case links.
  if (event.docs.matchedUrl.url) {

    // Uses the event object to parse the URL and identify the case details.
    const caseDetails = parseQuery(event.docs.matchedUrl.url);

    // Builds a preview card with the case name, and description
    const caseHeader = CardService.newCardHeader()
      .setTitle(`Case ${caseDetails["name"][0]}`);
    const caseDescription = CardService.newTextParagraph()
      .setText(caseDetails["description"][0]);

    // Returns the card.
    // Uses the text from the card's header for the title of the smart chip.
    return CardService.newCardBuilder()
      .setHeader(caseHeader)
      .addSection(CardService.newCardSection().addWidget(caseDescription))
      .build();
  }
}

/**
* Extracts the URL parameters from the given URL.
*
* @param {!string} url The URL to parse.
* @return {!Map} A map with the extracted URL parameters.
*/
function parseQuery(url) {
  const query = url.split("?")[1];
  if (query) {
    return query.split("&")
    .reduce(function(o, e) {
      var temp = e.split("=");
      var key = temp[0].trim();
      var value = temp[1].trim();
      value = isNaN(value) ? value : Number(value);
      if (o[key]) {
        o[key].push(value);
      } else {
        o[key] = [value];
      }
      return o;
    }, {});
  }
  return null;
}

Node.js

node/3p-resources/index.js

GitHub पर देखें

/**
 * Responds to any HTTP request related to link previews.
 *
 * @param {Object} req An HTTP request context.
 * @param {Object} res An HTTP response context.
 */
exports.createLinkPreview = (req, res) => {
  const event = req.body;
  if (event.docs.matchedUrl.url) {
    const url = event.docs.matchedUrl.url;
    const parsedUrl = new URL(url);
    // If the event object URL matches a specified pattern for preview links.
    if (parsedUrl.hostname === 'example.com') {
      if (parsedUrl.pathname.startsWith('/support/cases/')) {
        return res.json(caseLinkPreview(parsedUrl));
      }
    }
  }
};


/**
 * 
 * A support case link preview.
 *
 * @param {!URL} url The event object.
 * @return {!Card} The resulting preview link card.
 */
function caseLinkPreview(url) {
  // Builds a preview card with the case name, and description
  // Uses the text from the card's header for the title of the smart chip.
  // Parses the URL and identify the case details.
  const name = `Case ${url.searchParams.get("name")}`;
  return {
    action: {
      linkPreview: {
        title: name,
        previewCard: {
          header: {
            title: name
          },
          sections: [{
            widgets: [{
              textParagraph: {
                text: url.searchParams.get("description")
              }
            }]
          }]
        }
      }
    }
  };
}

Python

python/3p-resources/create_link_preview/main.py

GitHub पर देखें

from typing import Any, Mapping
from urllib.parse import urlparse, parse_qs

import flask
import functions_framework


@functions_framework.http
def create_link_preview(req: flask.Request):
    """Responds to any HTTP request related to link previews.
    Args:
      req: An HTTP request context.
    Returns:
      An HTTP response context.
    """
    event = req.get_json(silent=True)
    if event["docs"]["matchedUrl"]["url"]:
        url = event["docs"]["matchedUrl"]["url"]
        parsed_url = urlparse(url)
        # If the event object URL matches a specified pattern for preview links.
        if parsed_url.hostname == "example.com":
            if parsed_url.path.startswith("/support/cases/"):
                return case_link_preview(parsed_url)

    return {}




def case_link_preview(url):
    """A support case link preview.
    Args:
      url: A matching URL.
    Returns:
      The resulting preview link card.
    """

    # Parses the URL and identify the case details.
    query_string = parse_qs(url.query)
    name = f'Case {query_string["name"][0]}'
    # Uses the text from the card's header for the title of the smart chip.
    return {
        "action": {
            "linkPreview": {
                "title": name,
                "previewCard": {
                    "header": {
                        "title": name
                    },
                    "sections": [{
                        "widgets": [{
                            "textParagraph": {
                                "text": query_string["description"][0]
                            }
                        }]
                    }],
                }
            }
        }
    }

Java

java/3p-resources/src/main/java/CreateLinkPreview.java

GitHub पर देखें

import com.google.cloud.functions.HttpFunction;
import com.google.cloud.functions.HttpRequest;
import com.google.cloud.functions.HttpResponse;
import com.google.gson.Gson;
import com.google.gson.JsonArray;
import com.google.gson.JsonObject;
import com.google.gson.JsonPrimitive;

import java.io.UnsupportedEncodingException;
import java.net.URL;
import java.net.URLDecoder;
import java.util.HashMap;
import java.util.Map;

public class CreateLinkPreview implements HttpFunction {
  private static final Gson gson = new Gson();

  /**
   * Responds to any HTTP request related to link previews.
   *
   * @param request An HTTP request context.
   * @param response An HTTP response context.
   */
  @Override
  public void service(HttpRequest request, HttpResponse response) throws Exception {
    JsonObject event = gson.fromJson(request.getReader(), JsonObject.class);
    String url = event.getAsJsonObject("docs")
        .getAsJsonObject("matchedUrl")
        .get("url")
        .getAsString();
    URL parsedURL = new URL(url);
    // If the event object URL matches a specified pattern for preview links.
    if ("example.com".equals(parsedURL.getHost())) {
      if (parsedURL.getPath().startsWith("/support/cases/")) {
        response.getWriter().write(gson.toJson(caseLinkPreview(parsedURL)));
        return;
      }
    }

    response.getWriter().write("{}");
  }


  /**
   * A support case link preview.
   *
   * @param url A matching URL.
   * @return The resulting preview link card.
   */
  JsonObject caseLinkPreview(URL url) throws UnsupportedEncodingException {
    // Parses the URL and identify the case details.
    Map<String, String> caseDetails = new HashMap<String, String>();
    for (String pair : url.getQuery().split("&")) {
        caseDetails.put(URLDecoder.decode(pair.split("=")[0], "UTF-8"), URLDecoder.decode(pair.split("=")[1], "UTF-8"));
    }

    // Builds a preview card with the case name, and description
    // Uses the text from the card's header for the title of the smart chip.
    JsonObject cardHeader = new JsonObject();
    String caseName = String.format("Case %s", caseDetails.get("name"));
    cardHeader.add("title", new JsonPrimitive(caseName));

    JsonObject textParagraph = new JsonObject();
    textParagraph.add("text", new JsonPrimitive(caseDetails.get("description")));

    JsonObject widget = new JsonObject();
    widget.add("textParagraph", textParagraph);

    JsonArray widgets = new JsonArray();
    widgets.add(widget);

    JsonObject section = new JsonObject();
    section.add("widgets", widgets);

    JsonArray sections = new JsonArray();
    sections.add(section);

    JsonObject previewCard = new JsonObject();
    previewCard.add("header", cardHeader);
    previewCard.add("sections", sections);

    JsonObject linkPreview = new JsonObject();
    linkPreview.add("title", new JsonPrimitive(caseName));
    linkPreview.add("previewCard", previewCard);

    JsonObject action = new JsonObject();
    action.add("linkPreview", linkPreview);

    JsonObject renderActions = new JsonObject();
    renderActions.add("action", action);

    return renderActions;
  }

}

इसी विषय से जुड़े लिंक

• स्मार्ट चिप की मदद से, Google Books के लिंक की झलक देखना
• अपने ऐड-ऑन की जांच करना
• Google Docs का मेनिफ़ेस्ट
• लिंक की झलक देखने के लिए कार्ड इंटरफ़ेस