Z tej strony dowiesz się, jak utworzyć dodatek do Google Workspace, który umożliwia użytkownikom Dokumentów, Arkuszy i Prezentacji Google wyświetlanie podglądu linków z usługi innej firmy.
Dodatek do Google Workspace może wykrywać linki do Twojej usługi i wyświetlać użytkownikom prośbę o wyświetlenie ich podglądu. Możesz skonfigurować dodatek tak, aby wyświetlał podgląd wielu wzorców adresów URL, np. linków do zgłoszeń do pomocy, potencjalnych klientów i profili pracowników.
Jak użytkownicy wyświetlają podgląd linków
Aby wyświetlić podgląd linków, użytkownicy wchodzą w interakcję z elementami inteligentnymi i kartami.
Gdy użytkownicy wpisują lub wklejają adres URL w dokumencie lub arkuszu kalkulacyjnym, Dokumenty lub Arkusze Google wyświetlają prośbę o zastąpienie linku elementem inteligentnym. Element inteligentny wyświetla ikonę oraz krótki tytuł lub opis treści linku. Gdy użytkownik najedzie kursorem na element, zobaczy interfejs karty, który wyświetla podgląd dodatkowych informacji o pliku lub linku.
Z tego filmu dowiesz się, jak użytkownik może przekonwertować link na element inteligentny i wyświetlić podgląd karty:
Jak użytkownicy wyświetlają podgląd linków w Prezentacjach
Elementy inteligentne innych firm nie są obsługiwane w przypadku podglądu linków w Prezentacjach. Gdy użytkownicy wpisują lub wklejają adres URL w prezentacji, Prezentacje wyświetlają prośbę o zastąpienie linku jego tytułem jako tekstem połączonym, a nie elementem. Gdy użytkownik najedzie kursorem na tytuł linku, zobaczy interfejs karty, który wyświetla podgląd informacji o linku.
Na tym obrazie widać, jak wygląda podgląd linku w Prezentacjach:

Wymagania wstępne
Apps Script
- Konto Google Workspace account.
- Dodatek do Google Workspace. Aby utworzyć dodatek, postępuj zgodnie z tym krótkim wprowadzeniem.
Node.js
- Konto Google Workspace account.
- Dodatek do Google Workspace. Aby utworzyć dodatek, postępuj zgodnie z tym krótkim wprowadzeniem.
Python
- Konto Google Workspace account.
- Dodatek do Google Workspace. Aby utworzyć dodatek, postępuj zgodnie z tym krótkim wprowadzeniem.
Java
- Konto Google Workspace account.
- Dodatek do Google Workspace. Aby utworzyć dodatek, postępuj zgodnie z tym krótkim wprowadzeniem.
Opcjonalnie: konfigurowanie uwierzytelniania w usłudze innej firmy
Jeśli Twój dodatek łączy się z usługą, która wymaga autoryzacji, użytkownicy muszą się w niej uwierzytelnić, aby wyświetlić podgląd linków. Oznacza to, że gdy użytkownicy po raz pierwszy wkleją link z Twojej usługi do pliku Dokumentów, Arkuszy lub Prezentacji, Twój dodatek musi wywołać proces autoryzacji.
Aby skonfigurować usługę OAuth lub niestandardowy monit o autoryzację, przeczytaj artykuł Łączenie dodatku z usługą innej firmy.
Konfigurowanie podglądu linków w dodatku
W tej sekcji dowiesz się, jak skonfigurować podgląd linków w dodatku. Obejmuje to te czynności:
- Konfigurowanie podglądu linków w pliku manifestu dodatku.
- Tworzenie interfejsu elementu inteligentnego i karty dla linków.
Konfigurowanie podglądu linków
Aby skonfigurować podgląd linków, w pliku manifestu dodatku określ te sekcje i pola:
- W sekcji
addOnsdodaj poledocs, aby rozszerzyć Dokumenty, polesheets, aby rozszerzyć Arkusze, oraz poleslides, aby rozszerzyć Prezentacje. W każdym polu zaimplementuj wyzwalacz
linkPreviewTriggers, który zawierarunFunction(tę funkcję zdefiniujesz w następnej sekcji Tworzenie elementu inteligentnego i karty).Więcej informacji o polach, które możesz określić w wyzwalaczu
linkPreviewTriggers, znajdziesz w dokumentacji referencyjnej dotyczącej plików manifestu Apps Script lub zasobów wdrożenia w przypadku innych środowisk wykonawczych.W polu
oauthScopesdodaj zakreshttps://www.googleapis.com/auth/workspace.linkpreview, aby użytkownicy mogli autoryzować dodatek do wyświetlania podglądu linków w ich imieniu.
Jako przykład zobacz sekcje oauthScopes i addons w tym pliku manifestu, który konfiguruje podgląd linków w usłudze zgłoszeń do zespołu pomocy.
{
"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"
}
}
]
}
}
}
W tym przykładzie dodatek do Google Workspace wyświetla podgląd linków w usłudze zgłoszeń do zespołu pomocy firmy. Dodatek określa 3 wzorce adresów URL, aby wyświetlać podgląd linków. Gdy link pasuje do jednego z wzorców adresów URL, funkcja wywołania zwrotnego caseLinkPreview tworzy i wyświetla kartę oraz element inteligentny w Dokumentach, Arkuszach lub Prezentacjach i zastępuje adres URL tytułem linku.
Tworzenie elementu inteligentnego i karty
Aby zwrócić element inteligentny i kartę dla linku, musisz zaimplementować wszystkie funkcje określone w obiekcie linkPreviewTriggers.
Gdy użytkownik wejdzie w interakcję z linkiem pasującym do określonego wzorca adresu URL, uruchomi się wyzwalacz
linkPreviewTriggers, a jego funkcja wywołania zwrotnego przekaże obiekt
zdarzenia EDITOR_NAME.matchedUrl.url jako argument. Używasz ładunku tego obiektu zdarzenia, aby utworzyć element inteligentny i kartę na potrzeby podglądu linku.
Jeśli na przykład użytkownik wyświetli podgląd linku https://www.example.com/cases/123456 w Dokumentach, zostanie zwrócony ten ładunek zdarzenia:
JSON
{ "docs": { "matchedUrl": { "url": "https://www.example.com/support/cases/123456" } } }
Aby utworzyć interfejs karty, użyj widżetów do wyświetlania informacji o linku. Możesz też utworzyć działania, które umożliwiają użytkownikom otwieranie linku lub modyfikowanie jego zawartości. Listę dostępnych widżetów i działań znajdziesz w sekcji Obsługiwane komponenty kart podglądu.
Aby utworzyć element inteligentny i kartę na potrzeby podglądu linku:
- Zaimplementuj funkcję określoną w sekcji
linkPreviewTriggerspliku manifestu dodatku:- Funkcja musi przyjmować obiekt zdarzenia zawierający
EDITOR_NAME.matchedUrl.urljako argument i zwracać pojedynczyCardobiekt. - Jeśli Twoja usługa wymaga autoryzacji, funkcja musi też wywoływać proces autoryzacji.
- Funkcja musi przyjmować obiekt zdarzenia zawierający
- W przypadku każdej karty podglądu zaimplementuj wszystkie funkcje wywołania zwrotnego, które zapewniają interaktywność widżetów w interfejsie. Jeśli na przykład dodasz przycisk „Wyświetl link”, możesz utworzyć działanie, które określa funkcję wywołania zwrotnego, aby otworzyć link w nowym oknie. Więcej informacji o interakcjach z widżetami znajdziesz w sekcji Działania dodatku.
Ten kod tworzy funkcję wywołania zwrotnego caseLinkPreview dla Dokumentów:
Apps Script
Node.js
Python
Java
Obsługiwane komponenty kart podglądu
Dodatki do Google Workspace obsługują te widżety i działania w przypadku kart podglądu linków:
Apps Script
| Pole usługi kart | Typ |
|---|---|
TextParagraph |
Widżet |
DecoratedText |
Widżet |
Image |
Widżet |
IconImage |
Widżet |
ButtonSet |
Widżet |
TextButton |
Widżet |
ImageButton |
Widżet |
Grid |
Widżet |
Divider |
Widżet |
OpenLink |
Działanie |
Navigation |
Działanie Obsługiwana jest tylko metoda updateCard. |
JSON
Pole karty (google.apps.card.v1) |
Typ |
|---|---|
TextParagraph |
Widżet |
DecoratedText |
Widżet |
Image |
Widżet |
Icon |
Widżet |
ButtonList |
Widżet |
Button |
Widżet |
Grid |
Widżet |
Divider |
Widżet |
OpenLink |
Działanie |
Navigation |
Działanie Obsługiwana jest tylko metoda updateCard. |
Kompletny przykład: dodatek do zgłoszeń do zespołu pomocy
Ten przykład przedstawia dodatek do Google Workspace, który wyświetla podgląd linków do zgłoszeń do pomocy firmy w Dokumentach Google.
Przykład wykonuje te czynności:
- Wyświetla podgląd linków do zgłoszeń do pomocy, np.
https://www.example.com/support/cases/1234. Element inteligentny wyświetla ikonę pomocy, a karta podglądu zawiera identyfikator zgłoszenia i opis. - Jeśli ustawienia regionalne użytkownika są ustawione na język hiszpański, element inteligentny lokalizuje pole
labelTextna język hiszpański.
Plik manifestu
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"
}
]
}
}
}
Kod
Apps Script
Node.js
Python
Java
Przydatne materiały
- Wyświetlanie podglądu linków z Książek Google za pomocą elementów inteligentnych
- Testowanie dodatku
- Plik manifestu Dokumentów Google
- Interfejsy kart na potrzeby podglądu linków