Create sensible chips for hyperlink previewing in Google Docs

0


Posted by Chanel Greco, Developer Advocate

Earlier this 12 months, we introduced the overall availability of third-party sensible chips in Google Docs. This new characteristic permits you to add, view, and have interaction with important data from third celebration apps instantly in Google Docs. A number of companions, together with Asana, Atlassian, Figma, Loom, Miro, Tableau, and Whimsical, have already created sensible chips so customers can begin embedding content material from their apps instantly into Docs. Sourabh Choraria, a Google Developer Skilled for Google Workspace and pastime developer, revealed a third-party sensible chip resolution 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 discover out how you can also create your individual sensible 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 sensible chips for third-party companies work

Third-party sensible chips are powered by Google Workspace Add-ons and may be revealed 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 fitting hand facet 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 would be able to create sensible chips for any service that has a publicly accessible URL. You’ll be able to configure an add-on to preview a number of URL patterns, reminiscent of 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”: {
“title”: “Preview Books Add-on”,
“logoUrl”: “https://builders.google.com/workspace/add-ons/pictures/library-icon.png”,
“layoutProperties”: {
“primaryColor”: “#dd4b39”
}
},
“docs”: {
“linkPreviewTriggers”: [
{
“runFunction”: “bookLinkPreview”,
“patterns”: [
{
“hostPattern”: “*.google.*”,
“pathPrefix”: “books”
},
{
“hostPattern”: “*.google.*”,
“pathPrefix”: “books/edition”
}
],
“labelText”: “Guide”,
“logoUrl”: “https://builders.google.com/workspace/add-ons/pictures/book-icon.png”,
“localizedLabelText”: {
“es”: “Libros”
}
}
]
}
}
}

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

The sensible 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’ll be able to 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 information from the Google Books API
}

perform bookLinkPreview(occasion) {
if (occasion.docs.matchedUrl.url) {
// By means of getBook(id) the related information is fetched and used to construct the sensible 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 guide’)
.setText(bookDescription).setWrapText(true);

const previewImage = CardService.newImage()
.setAltText(‘Picture of guide cowl’)
.setImageUrl(bookImage);

const buttonBook = CardService.newTextButton()
.setText(‘View guide’)
.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 wise chip hovered state. The info 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 sensible chips pattern tutorial.

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

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

Apps script is a fast utility improvement platform that’s constructed into Google Workspace. This reality makes Apps Script a good selection for prototyping and validating your sensible chip resolution because it requires no pre-existing improvement surroundings. 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 sensible chip with Apps Script you possibly can try the video beneath through which you discover ways 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 sensible chips pattern web page.

In the event you choose to create your Google Workspace Add-on utilizing your individual improvement surroundings, programming language, internet hosting, packages, and so forth., then alternate runtime is the fitting alternative. You’ll be able to select from completely different programming languages like Node.js, Java, Python, and extra. The internet hosting of the add-on runtime code may be on any cloud or on premise infrastructure so long as runtime code may be uncovered as a public HTTP(S) endpoint. You’ll be able to study extra about the way to create sensible chips utilizing alternate runtimes from the developer documentation.

The right way to share your add-on with others

You’ll be able to share your add-on with others by the Google Workspace Market. Let’s say you wish to make your sensible chip resolution accessible to your crew. In that case you possibly can publish the add-on to your Google Workspace group, also called a personal app. Then again, 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 seek 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

Be taught extra about creating sensible chips for hyperlink previewing within the developer documentation. There you will discover additional data and code samples you possibly can base your resolution of. We are able to’t wait to see what sensible chip options you’ll construct.



Supply hyperlink

You might also like