Na tej stronie dowiesz się, jak utworzyć dodatek do Google Workspace, który umożliwia użytkownikom wyświetlanie podglądu linków z usługi innej firmy.
Dodatek do Google Workspace może wykrywać linki Twojej usługi i prosić użytkowników o ich wyświetlenie. Możesz skonfigurować dodatek, aby wyświetlać podgląd wielu wzorców adresów URL, takich jak linki do zgłoszeń do zespołu pomocy, kontakty do potencjalnych klientów i profile pracowników.
Jak użytkownicy wyświetlają podgląd linków
Aby wyświetlać podgląd linków, użytkownicy muszą korzystać z elementów inteligentnych i kart.
Gdy użytkownik wpisze lub wklei adres URL do dokumentu, Dokumenty Google proszą o zastąpienie linku elementem inteligentnym. Element inteligentny wyświetla ikonę i krótki tytuł lub opis treści linku. Gdy użytkownik najedzie kursorem na element, zobaczy interfejs karty z podglądem dodatkowych informacji o pliku lub linku.
Ten film pokazuje, jak użytkownik konwertuje link na element inteligentny i wyświetla podgląd karty:
Jak użytkownicy wyświetlają podgląd linków w Arkuszach i Prezentacjach
Elementy inteligentne innych firm nie są obsługiwane w przypadku podglądu linków w Arkuszach i Prezentacjach. Gdy użytkownik wpisze lub wklei adres URL w arkuszu kalkulacyjnym albo prezentacji, Arkusze lub Prezentacje poprosi o zastąpienie tego linku tytułem, a nie elementem. Gdy użytkownik najedzie kursorem na tytuł linku, zobaczy interfejs karty z podglądem informacji o linku.
Ten obraz przedstawia podgląd linku w Arkuszach i Prezentacjach:
Wymagania wstępne
Google Apps Script
- Konto Google Workspace.
- Dodatek do Google Workspace. Aby utworzyć dodatek, postępuj zgodnie z tym quickstart.
Node.js
- Konto Google Workspace.
- Dodatek do Google Workspace. Aby utworzyć dodatek, postępuj zgodnie z tym quickstart.
Python
- Konto Google Workspace.
- Dodatek do Google Workspace. Aby utworzyć dodatek, postępuj zgodnie z tym quickstart.
Java
- Konto Google Workspace.
- Dodatek do Google Workspace. Aby utworzyć dodatek, postępuj zgodnie z tym quickstart.
Opcjonalnie: konfigurowanie uwierzytelniania w usłudze innej firmy
Jeśli dodatek łączy się z usługą, która wymaga autoryzacji, użytkownicy muszą uwierzytelnić się w usłudze, aby wyświetlić podgląd linków. Oznacza to, że gdy użytkownik po raz pierwszy wklei link z Twojej usługi do pliku Dokumentów, Arkuszy lub Prezentacji, dodatek będzie musiał wywołać proces autoryzacji.
Aby skonfigurować usługę OAuth lub niestandardowy prompt autoryzacji, zapoznaj się z tymi przewodnikami:
Jeśli dodatek został utworzony przy użyciu Apps Script, zapoznaj się z artykułem Nawiązywanie połączeń z usługami niepochodzącymi od Google przy użyciu dodatku do Google Workspace.
Jeśli dodatek został utworzony przy użyciu innego środowiska wykonawczego, zapoznaj się z artykułem Łączenie dodatku z usługą innej firmy.
Konfigurowanie podglądu linków do dodatku
Z tej sekcji dowiesz się, jak skonfigurować podgląd linków dla dodatku:
- Skonfiguruj podgląd linków w zasobie wdrożenia dodatku lub pliku manifestu.
- Utwórz interfejs układu inteligentnego i karty dla linków.
Konfigurowanie podglądu linków
Aby skonfigurować podgląd linków, określ te sekcje i pola w zasobie wdrożenia dodatku lub pliku manifestu:
- W sekcji
addOns
dodaj poledocs
, by rozszerzyć Dokumenty, polesheets
, by rozszerzyć Arkusze, islides
, by rozszerzyć Prezentacje. W każdym polu zaimplementuj aktywator
linkPreviewTriggers
, który zawierarunFunction
(funkcję definiuje się w sekcji Tworzenie elementu inteligentnego i karty).Informacje o tym, jakie pola możesz określić w aktywatorze
linkPreviewTriggers
, znajdziesz w dokumentacji dotyczącej plików manifestu Apps Script lub zasobów wdrażania w innych środowiskach wykonawczych.W polu
oauthScopes
dodaj zakreshttps://www.googleapis.com/auth/workspace.linkpreview
, aby użytkownicy mogli autoryzować dodatek, aby wyświetlali podgląd linków w swoim imieniu.
Zobacz przykładową sekcję oauthScopes
i addons
zasobów wdrożeniowych poniżej, w których konfiguruje się podglądy linków dla usługi 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 do firmowych zgłoszeń do rejestru pomocy. Dodatek określa 3 wzorce adresów URL,
które mają wyświetlać podgląd linków. Gdy link pasuje do jednego ze wzorców adresów URL, funkcja wywołania zwrotnego caseLinkPreview
kompilowa i wyświetla kartę oraz element inteligentny. W Arkuszach i Prezentacjach zastępuje on adres URL tytułem linku.
Utwórz element inteligentny i kartę
Aby zwrócić element inteligentny i kartę dla linku, musisz zaimplementować wszystkie funkcje podane w obiekcie linkPreviewTriggers
.
Gdy użytkownik wchodzi w interakcję z linkiem, który pasuje do określonego wzorca adresu URL, uruchamia się aktywator linkPreviewTriggers
, a jego funkcja wywołania zwrotnego przekazuje obiekt zdarzenia EDITOR_NAME.matchedUrl.url
jako argument. Za pomocą ładunku tego obiektu zdarzenia tworzysz element inteligentny i kartę do podglądu linku.
Jeśli na przykład użytkownik wyświetli w Dokumentach link https://www.example.com/cases/123456
, zwracany jest następujący ładunek zdarzenia:
JSON
{ "docs": { "matchedUrl": { "url": "https://www.example.com/support/cases/123456" } } }
Aby utworzyć interfejs karty, użyj widżetów, aby wyświetlać informacje o linku. Możesz też tworzyć działania, które pozwolą użytkownikom otworzyć link lub zmodyfikować jego zawartość. Listę dostępnych widżetów i działań znajdziesz w artykule o komponentach obsługiwanych na kartach podglądu.
Aby utworzyć element inteligentny i kartę do podglądu linku:
- Zaimplementuj funkcję podaną w sekcji
linkPreviewTriggers
zasobu wdrożenia dodatku lub pliku manifestu:- Funkcja musi zaakceptować obiekt zdarzenia zawierający jako argument
EDITOR_NAME.matchedUrl.url
i zwrócić pojedynczy obiektCard
. - Jeśli Twoja usługa wymaga autoryzacji, funkcja musi też wywoływać proces autoryzacji.
- Funkcja musi zaakceptować obiekt zdarzenia zawierający jako argument
- Dla każdej karty podglądu implementuj funkcje wywołania zwrotnego, które zapewniają interaktywność widżetu dla interfejsu. Jeśli np. 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 artykule Działania dodatków.
Ten kod tworzy funkcję wywołania zwrotnego caseLinkPreview
dla Dokumentów:
Google Apps Script
Node.js
Python
Java
Obsługiwane komponenty kart podglądu
Dodatki do Google Workspace obsługują te widżety i działania na kartach podglądu linków:
Google Apps Script
pole usługi karty | 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 |
Czynność Obsługiwana jest tylko metoda updateCard . |
Pełny przykład: dodatek do zgłoszenia do zespołu pomocy
Poniższy przykład przedstawia dodatek do Google Workspace, który wyświetla podgląd linków do zgłoszeń do zespołu pomocy firmy w Dokumentach Google.
W tym przykładzie:
- Wyświetla podgląd linków do zgłoszeń do zespołu pomocy, np.
https://www.example.com/support/cases/1234
. Element inteligentny zawiera ikonę pomocy, a karta podglądu zawiera identyfikator zgłoszenia i opis. - Jeśli język użytkownika jest ustawiony na hiszpański, element inteligentny przetłumaczy
labelText
na język hiszpański.
Zasób wdrożenia
Google 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
Google Apps Script
Node.js
Python
Java
Przydatne materiały
- Wyświetlanie podglądu linków w Książkach Google za pomocą elementów inteligentnych
- Testowanie dodatku
- Zasób wdrożeniowy Dokumentów Google
- Interfejsy kart do podglądu linków