Saturday, May 18, 2024
HomeSoftware DevelopmentCreate good chips for hyperlink previewing in Google Docs

Create good chips for hyperlink previewing in Google Docs



Posted by Chanel Greco, Developer Advocate

Earlier this yr, we introduced the final availability of third-party good chips in Google Docs. This new function helps you to add, view, and have interaction with essential data from third celebration apps straight in Google Docs. A number of companions, together with Asana, Atlassian, Figma, Loom, Miro, Tableau, and Whimsical, have already created good chips so customers can begin embedding content material from their apps straight into Docs. Sourabh Choraria, a Google Developer Knowledgeable for Google Workspace and passion developer, printed a third-party good chip answer referred to as “Hyperlink Previews” to the Google Workspace Market. This app provides data to Google Docs from a number of generally used SaaS instruments.

On this weblog submit you will see that out how you can also create your individual good chips for Google Docs.

Example of a smart chip that was created to preview information from an event management system

Instance of a sensible chip that was created to preview data from an occasion administration system

Understanding how good chips for third-party companies work

Third-party good chips are powered by Google Workspace Add-ons and could be printed to the Google Workspace Market. From there, an admin or person can set up the add-on and it’ll seem within the sidebar on the suitable hand aspect of Google Docs.

The Google Workspace Add-on detects a service’s hyperlinks and prompts Google Docs customers to preview them. This implies that you may create good chips for any service that has a publicly accessible URL. You may configure an add-on to preview a number of URL patterns, similar to hyperlinks to help instances, gross sales leads, worker profiles, and extra. This configuration is completed within the add-on’s manifest file.

{
  "timeZone": "America/Los_Angeles",
  "exceptionLogging": "STACKDRIVER",
  "runtimeVersion": "V8",
  "oauthScopes": [
    "https://www.googleapis.com/auth/workspace.linkpreview",
    "https://www.googleapis.com/auth/script.external_request"
  ],
  "addOns": {
    "widespread": {
      "identify": "Preview Books Add-on",
      "logoUrl": "https://builders.google.com/workspace/add-ons/photos/library-icon.png",
      "layoutProperties": {
        "primaryColor": "#dd4b39"
      }
    },
    "docs": {
      "linkPreviewTriggers": [
        {
          "runFunction": "bookLinkPreview",
          "patterns": [
            {
              "hostPattern": "*.google.*",
              "pathPrefix": "books"
            },
            {
              "hostPattern": "*.google.*",
              "pathPrefix": "books/edition"
            }
          ],
          "labelText": "Ebook",
          "logoUrl": "https://builders.google.com/workspace/add-ons/photos/book-icon.png",
          "localizedLabelText": {
            "es": "Libros"
          }
        }
      ]
    }
  }
}

The manifest file incorporates the URL sample for the Google Books API

The good chip shows an icon and quick title or description of the hyperlink’s content material. When the person hovers over the chip, they see a card interface that previews extra details about the file or hyperlink. You may customise the cardboard interface that seems when the person hovers over a sensible chip. To create the cardboard interface, you utilize widgets to show details about the hyperlink. You can even construct actions that allow customers open the hyperlink or modify its contents. For a listing of all of the supported parts for preview playing cards test the developer documentation.

perform getBook(id) {
// Code to fetch the info from the Google Books API
}

perform bookLinkPreview(occasion) {
 if (occasion.docs.matchedUrl.url) {
// By way of getBook(id) the related information is fetched and used to construct the good chip and card

    const previewHeader = CardService.newCardHeader()
      .setSubtitle('By ' + bookAuthors)
      .setTitle(bookTitle);

    const previewPages = CardService.newDecoratedText()
      .setTopLabel('Web page depend')
      .setText(bookPageCount);

    const previewDescription = CardService.newDecoratedText()
      .setTopLabel('About this e book')
      .setText(bookDescription).setWrapText(true);

    const previewImage = CardService.newImage()
      .setAltText('Picture of e book cowl')
      .setImageUrl(bookImage);

    const buttonBook = CardService.newTextButton()
      .setText('View e book')
      .setOpenLink(CardService.newOpenLink()
        .setUrl(occasion.docs.matchedUrl.url));

    const cardSectionBook = CardService.newCardSection()
      .addWidget(previewImage)
      .addWidget(previewPages)
      .addWidget(CardService.newDivider())
      .addWidget(previewDescription)
      .addWidget(buttonBook);

    return CardService.newCardBuilder()
    .setHeader(previewHeader)
    .addSection(cardSectionBook)
    .construct();
  }
}

That is the Apps Script code to create a sensible chip.

A smart chip hovered state.

A sensible chip hovered state. The information displayed is fetched from the Google for Builders weblog submit URL that was pasted by the person.

For an in depth walkthrough of the code used on this submit, please checkout the Preview hyperlinks from Google Books with good chips pattern tutorial.

How to decide on the know-how in your add-on

When creating good chips for hyperlink previewing, you possibly can select from two totally different applied sciences to create your add-on: Google Apps Script or alternate runtime.

Apps script is a fast utility growth platform that’s constructed into Google Workspace. This truth makes Apps Script a sensible choice for prototyping and validating your good chip answer because it requires no pre-existing growth atmosphere. However Apps Script isn’t just for prototyping as some builders select to create their Google Workspace Add-on with it and even publish it to the Google Workspace Market for customers to put in.

If you wish to create your good chip with Apps Script you possibly can try the video under wherein you learn to construct a sensible chip for hyperlink previewing in Google Docs from A – Z. Need the code used within the video tutorial? Then take a look on the Preview hyperlinks from Google Books with good chips pattern web page.

Should you want to create your Google Workspace Add-on utilizing your individual growth atmosphere, programming language, internet hosting, packages, and so forth., then alternate runtime is the suitable selection. You may select from totally different programming languages like Node.js, Java, Python, and extra. The internet hosting of the add-on runtime code could be on any cloud or on premise infrastructure so long as runtime code could be uncovered as a public HTTP(S) endpoint. You may be taught extra about find out how to create good chips utilizing alternate runtimes from the developer documentation.

Learn how to share your add-on with others

You may share your add-on with others by way of the Google Workspace Market. Let’s say you need to make your good chip answer out there to your group. In that case you possibly can publish the add-on to your Google Workspace group, often known as a non-public app. However, if you wish to share your add-on with anybody who has a Google Account, you possibly can publish it as a public app.

To search out out extra about publishing to the Google Workspace Market, you possibly can watch this video that may stroll you thru the method.

Getting began

Study extra about creating good chips for hyperlink previewing within the developer documentation. There you will see that additional data and code samples you possibly can base your answer of. We will’t wait to see what good chip options you’ll construct.



RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments