Auf dieser Seite wird erläutert, wie Sie ein Google Workspace-Add-on erstellen, mit dem Nutzer von Google Docs, Google Tabellen und Google Präsentationen Links von einem Drittanbieterdienst als Vorschau ansehen können.
Ein Google Workspace-Add-on kann die Links Ihres Dienstes erkennen und Nutzer auffordern, sich eine Vorschau anzusehen. Sie können ein Add-on so konfigurieren, dass eine Vorschau mehrerer URL-Muster angezeigt wird, z. B. Links zu Supportanfragen, Leads und Mitarbeiterprofile.
Vorschau von Links für Nutzer
Zur Vorschau von Links interagieren Nutzer mit Smartchips und Karten.
Wenn Nutzer eine URL in ein Dokument eingeben oder einfügen, werden sie in Google Docs aufgefordert, den Link durch einen Smartchip zu ersetzen. Der Smartchip zeigt ein Symbol und einen kurzen Titel oder eine Beschreibung des Linkinhalts an. Wenn der Nutzer den Mauszeiger auf den Chip bewegt, wird eine Kartenoberfläche mit weiteren Informationen zur Datei oder zum Link angezeigt.
Im folgenden Video wird gezeigt, wie ein Nutzer einen Link in einen Smartchip umwandelt und sich eine Karte als Vorschau ansieht:
Vorschau von Links in Google Tabellen und Google Präsentationen anzeigen
Smartchips von Drittanbietern werden für die Linkvorschau in Google Tabellen und Google Präsentationen nicht unterstützt. Wenn Nutzer eine URL in eine Tabelle oder Präsentation eingeben oder einfügen, werden sie von Google Tabellen oder Google Präsentationen aufgefordert, den Link durch den Titel als verlinkten Text anstelle eines Chips zu ersetzen. Wenn der Nutzer den Mauszeiger auf den Linktitel bewegt, wird eine Kartenoberfläche mit Informationen zum Link angezeigt.
In der folgenden Abbildung sehen Sie, wie eine Linkvorschau in Google Tabellen und Google Präsentationen gerendert wird:
Voraussetzungen
Apps Script
- Ein Google Workspace-Konto.
- Ein Google Workspace-Add-on. Informationen zum Erstellen eines Add-ons finden Sie in dieser quickstart.
Node.js
- Ein Google Workspace-Konto.
- Ein Google Workspace-Add-on. Informationen zum Erstellen eines Add-ons finden Sie in dieser quickstart.
Python
- Ein Google Workspace-Konto.
- Ein Google Workspace-Add-on. Informationen zum Erstellen eines Add-ons finden Sie in dieser quickstart.
Java
- Ein Google Workspace-Konto.
- Ein Google Workspace-Add-on. Informationen zum Erstellen eines Add-ons finden Sie in dieser quickstart.
Optional: Authentifizierung bei einem Drittanbieterdienst einrichten
Wenn Ihr Add-on eine Verbindung zu einem Dienst herstellt, der eine Autorisierung erfordert, müssen sich Nutzer beim Dienst authentifizieren, um Links in der Vorschau anzuzeigen. Wenn Nutzer also zum ersten Mal einen Link aus Ihrem Dienst in eine Datei in Google Docs, Google Tabellen oder Google Präsentationen einfügen, muss Ihr Add-on den Autorisierungsvorgang aufrufen.
Informationen zum Einrichten eines OAuth-Dienstes oder einer benutzerdefinierten Autorisierungsaufforderung findest du in den folgenden Anleitungen:
Wenn Sie Ihr Add-on mit Apps Script erstellt haben, finden Sie weitere Informationen unter Über ein Google Workspace-Add-on eine Verbindung zu Diensten von Drittanbietern herstellen.
Wenn Sie das Add-on mit einer anderen Laufzeit erstellt haben, finden Sie weitere Informationen unter Add-on mit einem Drittanbieterdienst verbinden.
Linkvorschauen für das Add-on einrichten
In diesem Abschnitt wird erläutert, wie Sie die Linkvorschau für Ihr Add-on einrichten. Dies umfasst die folgenden Schritte:
- Konfigurieren Sie die Linkvorschau in der Bereitstellungsressource oder Manifestdatei des Add-ons.
- Erstelle die Benutzeroberfläche für den Smartchip und die Karte für deine Links.
Linkvorschau konfigurieren
Geben Sie zum Konfigurieren der Linkvorschau die folgenden Abschnitte und Felder in der Bereitstellungsressource oder Manifestdatei des Add-ons an:
- Fügen Sie im Abschnitt
addOns
das Felddocs
zum Erweitern von Docs, das Feldsheets
zum Erweitern von Tabellen und das Feldslides
zum Erweitern von Präsentationen hinzu. Implementieren Sie in jedem Feld den
linkPreviewTriggers
-Trigger, der einerunFunction
enthält. Diese Funktion definieren Sie im folgenden Abschnitt Smartchip und Karte erstellen.Informationen dazu, welche Felder Sie im
linkPreviewTriggers
-Trigger angeben können, finden Sie in der Referenzdokumentation zu Apps Script-Manifestdateien oder unter Bereitstellungsressourcen für andere Laufzeiten.Fügen Sie im Feld
oauthScopes
den Bereichhttps://www.googleapis.com/auth/workspace.linkpreview
hinzu, damit Nutzer das Add-on autorisieren können, in ihrem Namen Links in der Vorschau anzuzeigen.
Ein Beispiel finden Sie in den Abschnitten oauthScopes
und addons
der folgenden Bereitstellungsressource, in der Linkvorschauen für einen Supportfalldienst konfiguriert werden.
{
"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"
}
}
]
}
}
}
Im Beispiel zeigt das Google Workspace-Add-on Links für den Supportfalldienst eines Unternehmens in der Vorschau an. Das Add-on gibt drei URL-Muster für
Vorschaulinks an. Immer wenn ein Link mit einem der URL-Muster übereinstimmt, erstellt die Callback-Funktion caseLinkPreview
eine Karte und einen Smartchip oder ersetzt die URL in Google Tabellen und Google Präsentationen durch den Linktitel.
Smartchip und Karte erstellen
Wenn du einen Smartchip und eine Karte für einen Link zurückgeben möchtest, musst du alle Funktionen implementieren, die du im linkPreviewTriggers
-Objekt angegeben hast.
Wenn ein Nutzer mit einem Link interagiert, der einem angegebenen URL-Muster entspricht, wird der Trigger linkPreviewTriggers
ausgelöst und seine Callback-Funktion übergibt das Ereignisobjekt EDITOR_NAME.matchedUrl.url
als Argument. Sie verwenden die Nutzlast dieses Ereignisobjekts, um den Smartchip und die Karte für die Linkvorschau zu erstellen.
Wenn ein Nutzer beispielsweise in Google Docs den Link https://www.example.com/cases/123456
als Vorschau anzeigt, wird die folgende Ereignisnutzlast zurückgegeben:
JSON
{ "docs": { "matchedUrl": { "url": "https://www.example.com/support/cases/123456" } } }
Verwende Widgets, um Informationen zum Link anzuzeigen. Sie können auch Aktionen erstellen, mit denen Nutzer den Link öffnen oder den Inhalt ändern können. Eine Liste der verfügbaren Widgets und Aktionen findest du unter Unterstützte Komponenten für Vorschaukarten.
So erstellen Sie den Smartchip und die Karte für eine Linkvorschau:
- Implementieren Sie die Funktion, die Sie im Abschnitt
linkPreviewTriggers
der Bereitstellungsressource oder Manifestdatei des Add-ons angegeben haben:- Die Funktion muss ein Ereignisobjekt akzeptieren, das
EDITOR_NAME.matchedUrl.url
als Argument enthält, und ein einzelnesCard
-Objekt zurückgeben. - Wenn Ihr Dienst eine Autorisierung erfordert, muss die Funktion auch den Autorisierungsablauf aufrufen.
- Die Funktion muss ein Ereignisobjekt akzeptieren, das
- Implementieren Sie für jede Vorschaukarte alle Callback-Funktionen, die Widget-Interaktivität für die Schnittstelle bereitstellen. Wenn Sie beispielsweise die Schaltfläche „Link anzeigen“ einfügen, können Sie eine Aktion erstellen, die eine Callback-Funktion angibt, mit der der Link in einem neuen Fenster geöffnet wird. Weitere Informationen zu Widgetinteraktionen finden Sie unter Add-on-Aktionen.
Mit dem folgenden Code wird die Callback-Funktion caseLinkPreview
für Google Docs erstellt:
Apps Script
Node.js
Python
Java
Unterstützte Komponenten für Vorschaukarten
Google Workspace-Add-ons unterstützen die folgenden Widgets und Aktionen für Linkvorschaukarten:
Apps Script
Feld für den Kartendienst | Typ |
---|---|
TextParagraph |
Widget |
DecoratedText |
Widget |
Image |
Widget |
IconImage |
Widget |
ButtonSet |
Widget |
TextButton |
Widget |
ImageButton |
Widget |
Grid |
Widget |
Divider |
Widget |
OpenLink |
Aktion |
Navigation |
Aktion Es wird nur die Methode updateCard unterstützt. |
JSON
Feld für Karte (google.apps.card.v1 ) |
Typ |
---|---|
TextParagraph |
Widget |
DecoratedText |
Widget |
Image |
Widget |
Icon |
Widget |
ButtonList |
Widget |
Button |
Widget |
Grid |
Widget |
Divider |
Widget |
OpenLink |
Aktion |
Navigation |
Aktion Es wird nur die Methode updateCard unterstützt. |
Vollständiges Beispiel: Add-on für Supportfälle
Das folgende Beispiel enthält ein Google Workspace-Add-on, das Links zu den Supportfällen eines Unternehmens in Google Docs als Vorschau anzeigt.
Das Beispiel führt Folgendes aus:
- In der Vorschau werden Links zu Supportanfragen wie
https://www.example.com/support/cases/1234
angezeigt. Auf dem Smartchip wird ein Supportsymbol angezeigt. Die Vorschaukarte enthält die Fall-ID und eine Beschreibung. - Wenn die Sprache des Nutzers auf Spanisch festgelegt ist, lokalisiert der Smartchip seine
labelText
in Spanisch.
Deployment-Ressource
Apps Script
JSON
{
"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"
}
]
}
}
}
Code
Apps Script
Node.js
Python
Java
Weitere Informationen
- Vorschaulinks aus Google Books mit Smartchips ansehen
- Add-on testen
- Google Docs-Bereitstellungsressource
- Kartenoberflächen für die Linkvorschau