Na tej stronie dowiesz się, jak utworzyć dodatek do Google Workspace, który umożliwia użytkownikom Dokumentów Google podgląd linków z usługi innej firmy.
Dodatek do Google Workspace może wykrywać linki do Twojej usługi i prosić użytkowników Dokumentów Google o wyświetlenie podglądu tych linków. 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 w dokumencie Dokumentów Google, użytkownicy mogą 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:
Wymagania wstępne
Google Apps Script
- Konto Google Workspace.
- Dodatek do Google Workspace. Aby utworzyć dodatek, zapoznaj się z tym krótkim wprowadzeniem.
Node.js
- Konto Google Workspace.
- Dodatek do Google Workspace. Aby utworzyć dodatek, zapoznaj się z tym krótkim wprowadzeniem.
Python
- Konto Google Workspace.
- Dodatek do Google Workspace. Aby utworzyć dodatek, zapoznaj się z tym krótkim wprowadzeniem.
Java
- Konto Google Workspace.
- Dodatek do Google Workspace. Aby utworzyć dodatek, zapoznaj się z tym krótkim wprowadzeniem.
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świetlać podgląd linków. Oznacza to, że gdy użytkownik po raz pierwszy wklei link z Twojej usługi do dokumentu w Dokumentach Google, dodatek musi wywołać proces autoryzacji.
Aby skonfigurować usługę OAuth lub niestandardową prośbę o autoryzację, zapoznaj się z tymi przewodnikami:
Jeśli dodatek został utworzony przy użyciu Apps Script, zapoznaj się z artykułem Łączenie się z usługami innych firm za pomocą dodatku Google Workspace.
Jeśli dodatek został utworzony w innym środowisku wykonawczym, zapoznaj się z sekcją Łączenie dodatku z usługą innej firmy.
Konfigurowanie podglądu linków w 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 swoich linków.
Skonfiguruj podgląd linków
Aby skonfigurować podglądy linków, określ te sekcje i pola w zasobie wdrożenia dodatku lub pliku manifestu:
- W sekcji
addOns
dodaj poledocs
, aby rozszerzyć zakres Dokumentów Google. W polu
docs
zaimplementuj aktywatorlinkPreviewTriggers
, który zawierarunFunction
(Funkcję tę definiujesz w kolejnej sekcji Utwórz element inteligentny i kartę).Aby dowiedzieć się, jakie pola możesz określić w aktywatorze
linkPreviewTriggers
, zapoznaj się z dokumentacją dotyczącą plików manifestu Apps Script lub zasobów wdrażania innych środowiska wykonawczego.W polu
oauthScopes
dodaj zakreshttps://www.googleapis.com/auth/workspace.linkpreview
, aby użytkownicy mogli autoryzować dodatek do podglądu linków w ich imieniu.
Oto przykład w sekcji oauthScopes
i addons
zasobu wdrożenia, który konfiguruje podgląd linków do obsł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"
}
}
]
}
}
}
W tym przykładzie Dodatek do Google Workspace wyświetla podgląd linków do firmowej usługi zgłoszeń do zespołu pomocy. Dodatek określa 3 wzorce adresów URL do podglądu linków. Gdy link pasuje do jednego ze wzorców adresów URL w dokumencie Dokumentów Google, funkcja wywołania zwrotnego caseLinkPreview
skompilowa i wyświetli element inteligentny oraz kartę.
Utwórz układ inteligentny i kartę
Aby zwrócić element inteligentny i kartę dla linku, musisz zaimplementować wszystkie funkcje określone w obiekcie linkPreviewTriggers
.
Gdy użytkownik wchodzi w interakcję z linkiem pasującym do określonego wzorca adresu URL, uruchamia się aktywator linkPreviewTriggers
, a jego funkcja wywołania zwrotnego przekazuje obiekt zdarzenia docs.matchedUrl.url
jako argument. Ładunek tego obiektu zdarzenia służy do utworzenia elementu inteligentnego i karty na potrzeby podglądu linku.
Na przykład w przypadku dodatku, który określa wzorzec adresu URL example.com/cases
, jeśli użytkownik wyświetli podgląd linku https://www.example.com/cases/123456
, zostanie zwrócony 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 do wyświetlania informacji 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 sekcji Komponenty kart 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 akceptować obiekt zdarzenia zawierający
docs.matchedUrl.url
jako argument i zwracać pojedynczy obiektCard
. - Jeśli Twoja usługa wymaga autoryzacji, musi ona też wywoływać proces autoryzacji.
- Funkcja musi akceptować obiekt zdarzenia zawierający
- Dla każdej karty podglądu implementuj dowolne funkcje wywołania zwrotnego, które zapewniają interaktywność widżetów dla interfejsu. Jeśli np. dodasz przycisk „Wyświetl link”, możesz utworzyć działanie określające funkcję wywołania zwrotnego w celu otwarcia linku w nowym oknie. Więcej informacji o interakcjach z widżetami znajdziesz w artykule Działania dodatkowe.
Ten kod tworzy funkcję wywołania zwrotnego caseLinkPreview
:
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ługa 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 |
Czynność 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 i profili pracowników.
W tym przykładzie wykonano te działania:
- Podgląd linków do zgłoszeń do zespołu pomocy, np.
https://www.example.com/support/cases/1234
. Element inteligentny ma ikonę pomocy, a karta podglądu zawiera identyfikator zgłoszenia i opis. - Wyświetla podgląd linków do obsługi zgłoszeń do zespołu pomocy, np.
https://www.example.com/people/rosario-cruz
. Element inteligentny zawiera ikonę osoby, a na karcie podglądu znajduje się imię i nazwisko pracownika, adres e-mail, stanowisko oraz zdjęcie profilowe. - Jeśli język użytkownika jest ustawiony na hiszpański, element inteligentny przetłumaczy
labelText
na 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/link-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"
},
{
"runFunction": "URL",
"patterns": [
{
"hostPattern": "example.com",
"pathPrefix": "people"
}
],
"labelText": "People",
"localizedLabelText": {
"es": "Personas"
},
"logoUrl": "https://developers.google.com/workspace/add-ons/images/person-icon.png"
}
]
}
}
}