בדף הזה מוסבר איך ליצור תוסף ל-Google Workspace שמאפשר למשתמשי Google Docs , Sheets ו-Slides לראות תצוגה מקדימה של קישורים משירות של צד שלישי.
תוסף של Google Workspace יכול לזהות את הקישורים לשירות שלכם ולבקש מהמשתמשים לראות אותם בתצוגה מקדימה. תוכלו להגדיר תוסף כדי להציג תצוגה מקדימה של מספר תבניות של כתובות URL, כמו קישורים לבקשות תמיכה, לידים למכירות ופרופילים של עובדים.
איך משתמשים רואים תצוגה מקדימה של קישורים
כדי לראות תצוגה מקדימה של קישורים, המשתמשים צריכים להשתמש בצ'יפים חכמים ובכרטיסים.
כשמשתמשים מקלידים או מדביקים כתובת URL במסמך, מוצגת ב-Google Docs בקשה להחליף את הקישור בצ'יפ חכם. בצ'יפ החכם מוצגים סמל ושם קצר או תיאור קצר של התוכן של הקישור. כשהמשתמש מעביר את העכבר מעל לצ'יפ, הוא רואה ממשק של כרטיס עם תצוגה מקדימה של מידע נוסף על הקובץ או הקישור.
בסרטון הבא אפשר לראות איך המשתמש ממיר קישור לצ'יפ חכם ומציג כרטיס בתצוגה מקדימה:
איך משתמשים רואים תצוגה מקדימה של קישורים ב-Sheets וב-Slides
אין תמיכה בצ'יפים חכמים של צד שלישי בתצוגות מקדימות של קישורים ב-Sheets וב-Slides. כשהמשתמשים מקלידים או מדביקים כתובת URL בגיליון אלקטרוני או במצגת, ב-Sheets או במצגת ב-Slides מוצגת בקשה להחליף את הקישור בשם של הקישור כטקסט מקושר במקום כצ'יפ. כשהמשתמש מעביר את העכבר מעל כותרת הקישור, הוא רואה ממשק של כרטיס שמציג מידע על הקישור.
התמונה הבאה מראה איך תצוגה מקדימה של קישור מעובדת ב-Sheets וב-Slides:
דרישות מוקדמות
Apps Script
- חשבון Google Workspace.
- תוסף ל-Google Workspace. כדי ליצור תוסף, פועלים לפי ההוראות בquickstart.
Node.js
- חשבון Google Workspace.
- תוסף ל-Google Workspace. כדי ליצור תוסף, פועלים לפי ההוראות בquickstart.
Python
- חשבון Google Workspace.
- תוסף ל-Google Workspace. כדי ליצור תוסף, פועלים לפי ההוראות בquickstart.
Java
- חשבון Google Workspace.
- תוסף ל-Google Workspace. כדי ליצור תוסף, פועלים לפי ההוראות בquickstart.
אופציונלי: הגדרת אימות לשירות של צד שלישי
אם התוסף מתחבר לשירות שדורש הרשאה, המשתמשים יצטרכו לבצע אימות לשירות כדי לראות תצוגה מקדימה של הקישורים. כלומר, כשמשתמשים מדביקים בפעם הראשונה קישור מהשירות שלכם בקובץ Docs, Sheets או Slides, התוסף צריך להפעיל את תהליך ההרשאה.
כדי להגדיר שירות OAuth או בקשה להרשאה בהתאמה אישית, תוכלו להיעזר באחד מהמדריכים הבאים:
אם יצרתם את התוסף באמצעות Apps Script, תוכלו לקרוא את המאמר התחברות לשירותים שאינם של Google מתוסף של Google Workspace.
אם יצרתם את התוסף באמצעות סביבת זמן ריצה אחרת, תוכלו לקרוא את המאמר איך לחבר את התוסף לשירות של צד שלישי.
הגדרת תצוגות מקדימות לקישורים של התוסף
בקטע הזה מוסבר איך להגדיר תצוגה מקדימה לקישורים בתוסף, כולל השלבים הבאים:
- הגדירו תצוגות מקדימות של קישורים במשאב הפריסה או בקובץ המניפסט של התוסף.
- איך מפתחים את הממשק של הצ'יפ החכם והכרטיס לקישורים.
הגדרת תצוגות מקדימות של קישורים
כדי להגדיר תצוגה מקדימה לקישורים, צריך לציין את הקטעים והשדות הבאים במשאב הפריסה או בקובץ המניפסט של התוסף:
- בקטע
addOns
מוסיפים את השדהdocs
כדי להרחיב את Docs, את השדהsheets
כדי להרחיב את Sheets ואת השדהslides
כדי להרחיב את Slides. בכל שדה, מטמיעים את הטריגר
linkPreviewTriggers
שכוללrunFunction
(מגדירים את הפונקציה הזו בקטע יצירת הצ'יפ החכם והכרטיס).למידע על השדות שאפשר לציין בטריגר של
linkPreviewTriggers
, עיינו במסמכי התיעוד בנושא קובצי מניפסט של Apps Script או משאבי פריסה לזמני ריצה אחרים.בשדה
oauthScopes
, מוסיפים את ההיקףhttps://www.googleapis.com/auth/workspace.linkpreview
כדי שהמשתמשים יוכלו לתת לתוסף הרשאה להציג קישורים בתצוגה מקדימה בשמם.
לדוגמה, אפשר לעיין בקטעים oauthScopes
ו-addons
במשאב הפריסה הבא, שמגדיר תצוגות מקדימות של קישורים עבור שירות של בקשות תמיכה.
{
"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"
}
}
]
}
}
}
בדוגמה הזו, התצוגה המקדימה של התוסף של Google Workspace כוללת קישורים לשירות של בקשות התמיכה של חברה. התוסף מציין שלוש תבניות URL כדי להציג תצוגה מקדימה של קישורים. כשקישור תואם לאחת מתבניות ה-URL, פונקציית הקריאה החוזרת caseLinkPreview
יוצרת ומציגה כרטיס וצ'יפ חכם, או ב-Sheets וב-Slides, מחליפה את כתובת ה-URL בכותרת הקישור.
פיתוח הצ'יפ החכם והכרטיס
כדי להחזיר צ'יפ חכם וכרטיס לקישור, צריך להטמיע את כל הפונקציות שציינתם באובייקט linkPreviewTriggers
.
כשמשתמש יוצר אינטראקציה עם קישור שתואם לתבנית URL מסוימת, הטריגר linkPreviewTriggers
מופעל ופונקציית הקריאה החוזרת מעבירה את אובייקט האירוע EDITOR_NAME.matchedUrl.url
כארגומנט. המטען הייעודי (payload) של אובייקט האירוע הזה משמש לפיתוח הצ'יפ החכם והכרטיס לתצוגה המקדימה של הקישור.
לדוגמה, אם משתמש מציג בתצוגה מקדימה את הקישור https://www.example.com/cases/123456
ב-Docs, מוחזר המטען הייעודי (payload) הבא של האירוע:
JSON
{ "docs": { "matchedUrl": { "url": "https://www.example.com/support/cases/123456" } } }
כדי ליצור את ממשק הכרטיס, משתמשים בווידג'טים כדי להציג מידע על הקישור. אפשר גם ליצור פעולות שמאפשרות למשתמשים לפתוח את הקישור או לשנות את התוכן שלו. לרשימת הווידג'טים והפעולות הזמינים, ראו רכיבים נתמכים לכרטיסי תצוגה מקדימה.
כדי ליצור את הצ'יפ החכם והכרטיס לתצוגה מקדימה של קישור:
- מטמיעים את הפונקציה שציינתם בקטע
linkPreviewTriggers
במשאב הפריסה או בקובץ המניפסט של התוסף:- הפונקציה צריכה לקבל אובייקט אירוע שמכיל את הערך
EDITOR_NAME.matchedUrl.url
כארגומנט, ולהחזיר אובייקטCard
יחיד. - אם השירות דורש הרשאה, הפונקציה צריכה גם להפעיל את תהליך ההרשאה.
- הפונקציה צריכה לקבל אובייקט אירוע שמכיל את הערך
- בכל כרטיס תצוגה מקדימה, כדאי להטמיע פונקציות של התקשרות חזרה שמציעות אינטראקטיביות של ווידג'טים לממשק. לדוגמה, אם הוספתם לחצן 'הצגת קישור', תוכלו ליצור פעולה שמציינת פונקציית קריאה חוזרת לפתיחת הקישור בחלון חדש. למידע נוסף על אינטראקציות עם ווידג'טים, ראו פעולות של תוספים.
הקוד הבא יוצר את פונקציית הקריאה החוזרת caseLinkPreview
ל-Docs:
Apps Script
Node.js
Python
Java
רכיבים נתמכים בכרטיסים של תצוגה מקדימה
תוספים ל-Google Workspace תומכים בפעולות ובווידג'טים הבאים שמופיעים בכרטיסי תצוגה מקדימה של קישורים:
Apps Script
שדה של שירות הכרטיסים | סוג |
---|---|
TextParagraph |
ווידג'ט |
DecoratedText |
ווידג'ט |
Image |
ווידג'ט |
IconImage |
ווידג'ט |
ButtonSet |
ווידג'ט |
TextButton |
ווידג'ט |
ImageButton |
ווידג'ט |
Grid |
ווידג'ט |
Divider |
ווידג'ט |
OpenLink |
פעולה |
Navigation |
פעולה רק השיטה updateCard נתמכת. |
JSON
שדה הכרטיס (google.apps.card.v1 ) |
סוג |
---|---|
TextParagraph |
ווידג'ט |
DecoratedText |
ווידג'ט |
Image |
ווידג'ט |
Icon |
ווידג'ט |
ButtonList |
ווידג'ט |
Button |
ווידג'ט |
Grid |
ווידג'ט |
Divider |
ווידג'ט |
OpenLink |
פעולה |
Navigation |
פעולה רק השיטה updateCard נתמכת. |
דוגמה מלאה: תוסף לבקשת תמיכה
בדוגמה הבאה מוצג תוסף של Google Workspace, שמספק תצוגה מקדימה של קישורים לבקשות התמיכה של החברה ב-Google Docs.
הדוגמה כוללת:
- תצוגה מקדימה של קישורים לבקשות תמיכה, כמו
https://www.example.com/support/cases/1234
. בצ'יפ החכם מוצג סמל תמיכה, וכרטיס התצוגה המקדימה כולל את מספר הפנייה ותיאור. - אם הלוקאל של המשתמש מוגדר לספרדית, הצ'יפ החכם מבצע לוקליזציה של
labelText
לספרדית.
משאב פריסה
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"
}
]
}
}
}
קוד
Apps Script
Node.js
Python
Java
מקורות מידע שקשורים לנושא
- תצוגה מקדימה של קישורים מ-Google Books עם צ'יפים חכמים
- בדיקת התוסף
- משאב פריסה של Google Docs
- ממשקי כרטיסים לתצוגה מקדימה של קישורים