בדף זה מוסבר איך ליצור תוסף ל-Google Workspace שמאפשר למשתמשי Google Docs , Sheets ו-Slides להציג תצוגה מקדימה של קישורים משירות של צד שלישי.
תוסף של Google Workspace יכול לזהות את הקישורים לשירות שלכם ולבקש מהמשתמשים לראות אותם בתצוגה מקדימה. תוכלו להגדיר תוסף כדי להציג תצוגה מקדימה של מספר תבניות של כתובות URL, כמו קישורים לבקשות תמיכה, הפניות למכירות ופרופילים של עובדים.
איך משתמשים רואים תצוגה מקדימה של קישורים
כדי לראות תצוגה מקדימה של קישורים, המשתמשים משתמשים בצ'יפים חכמים ובכרטיסים.
כשמשתמשים מקלידים או מדביקים כתובת URL במסמך, מוצגת ב-Google Docs בקשה להחליף את הקישור בצ'יפ חכם. בצ'יפ החכם מוצגים סמל וכותרת קצרה או תיאור של תוכן הקישור. כשהמשתמשים מעבירים את העכבר מעל לצ'יפ, הם רואים ממשק של כרטיס עם תצוגה מקדימה של מידע נוסף על הקובץ או הקישור.
בסרטון הבא מוצג איך משתמש ממיר קישור לצ'יפ חכם ומציג תצוגה מקדימה של כרטיס:
איך משתמשים רואים תצוגה מקדימה של קישורים ב-Sheets וב-Slides
צ'יפים חכמים של צד שלישי לא נתמכים בתצוגה המקדימה של קישורים למפתחים ב-Sheets וב-Slides. כשמשתמשים מקלידים כתובת URL או מדביקים אותה בגיליון אלקטרוני או במצגת, ב-Sheets או במצגת מוצגת הנחיה להחליף את הקישור בכותרת של הקישור בתור טקסט מקושר במקום צ'יפ. כשהמשתמש מעביר את העכבר מעל כותרת הקישור, הוא רואה ממשק כרטיס עם תצוגה מקדימה של המידע על הקישור.
בתמונה הבאה אפשר לראות איך תצוגה מקדימה של קישור מעובדת ב-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
(את הפונקציה הזו מגדירים בקטע Build the Smart Chi and card).במסמכי העזרה של קובצי המניפסט של Apps Script או של משאבי הפריסה של זמני ריצה אחרים מוסבר אילו שדות אפשר לציין בהטריגר של
linkPreviewTriggers
.בשדה
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) של אובייקט האירוע הזה.
לדוגמה, בתוסף שמציין את תבנית כתובת ה-URL example.com/cases
ב-Docs,
כשמשתמש מציג בתצוגה מקדימה את הקישור https://www.example.com/cases/123456
, מוחזר המטען הייעודי (payload) הבא של האירוע:
JSON
{ "docs": { "matchedUrl": { "url": "https://www.example.com/support/cases/123456" } } }
כדי ליצור את ממשק הכרטיס, משתמשים בווידג'טים להצגת מידע על הקישור. ניתן גם ליצור פעולות שמאפשרות למשתמשים לפתוח את הקישור או לשנות את התוכן שלו. במאמר רכיבים נתמכים לכרטיסי תצוגה מקדימה מופיעה רשימה של הווידג'טים והפעולות הזמינים.
כדי ליצור את הצ'יפ החכם והכרטיס לתצוגה מקדימה של הקישור:
- מטמיעים את הפונקציה שציינתם בקטע
linkPreviewTriggers
במשאב הפריסה או בקובץ המניפסט של התוסף:- הפונקציה צריכה לקבל אובייקט אירוע שמכיל
EDITOR_NAME.matchedUrl.url
כארגומנט ולהחזיר אובייקטCard
יחיד. - אם השירות דורש הרשאה, הפונקציה צריכה גם להפעיל את תהליך ההרשאה.
- הפונקציה צריכה לקבל אובייקט אירוע שמכיל
- בכל כרטיס תצוגה מקדימה, מטמיעים פונקציות של התקשרות חזרה שמאפשרות אינטראקטיביות של ווידג'טים לממשק. לדוגמה, אם הוספתם לחצן עם הכיתוב View link (הצגת קישור), תוכלו ליצור פעולה שמציינת פונקציית קריאה חוזרת כדי לפתוח את הקישור בחלון חדש. למידע נוסף על אינטראקציות עם ווידג'טים, ראו פעולות בתוספים.
הקוד הבא יוצר את פונקציית הקריאה החוזרת 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
. בצ'יפ החכם מוצג סמל תמיכה, וכרטיס התצוגה המקדימה כולל את מספר הפנייה ותיאור. - תצוגה מקדימה של קישורים לנציגי בקשות תמיכה, כמו
https://www.example.com/people/rosario-cruz
. בצ'יפ החכם מוצג סמל של אדם, וכרטיס התצוגה המקדימה כולל את שם העובד, כתובת האימייל שלו, תיאור התפקיד ותמונת הפרופיל שלו. - אם הלוקאל של המשתמש מוגדר לספרדית, הצ'יפ החכם מבצע לוקליזציה של
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/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"
}
]
}
}
}
קוד
Apps Script
Node.js
Python
Java
מקורות מידע שקשורים לנושא
- תצוגה מקדימה של קישורים מ-Google Books עם צ'יפים חכמים
- בדיקת התוסף
- מקור המידע לפריסה של Google Docs
- ממשקים של כרטיסים לתצוגה מקדימה של קישורים