בדף הזה מוסבר איך להוסיף טקסט ותמונות להודעה בכרטיס או בתיבת דו-שיח. כדי לשנות את האופן שבו הטקסט והתמונות מופיעים בהודעה.
אתם יכולים להשתמש בכלי ליצירת כרטיסים כדי לעצב הודעות של כרטיסי JSON ולהציג אותן בתצוגה מקדימה בשביל אפליקציות ל-Chat:
לפתיחת הכלי ליצירת כרטיסיםדרישות מוקדמות
אפליקציית Google Chat שמופעלת בה תכונות אינטראקטיביות. כדי ליצור את אפליקציית Chat האינטראקטיבית, תוכלו להשלים את אחד מהמדריכים הבאים למתחילים בארכיטקטורת האפליקציות שבה רוצים להשתמש:
- שירות HTTP עם Google Cloud Functions
- Google Apps Script
- Google Cloud Dialogflow CX
- Google Cloud Pub/Sub
הוספת תמונה
ווידג'ט Image
מציגה תמונה בפורמט PNG או JPG שמתארחת בכתובת URL מסוג HTTPS.
רוחב התמונה המוצגת ממלא את כל רוחב הכרטיס המוצג.
גובהו מותאם כדי לשמור על יחס הגובה-רוחב של התמונה. הווידג'ט Image
תומך
onclick
פעולות
שמתרחשים כאשר משתמשים לוחצים על התמונה. דוגמה לפעולות של onclick
:
- פתיחת היפר-קישור באמצעות
OpenLink
, כמו היפר-קישור למסמכי התיעוד למפתחים של Google Chat,https://developers.google.com/chat
- להריץ פעולה שמפעילה פונקציה מותאמת אישית, כמו שליחת קריאה ל-API.
לווידג'ט Image
יש את המגבלות הבאות:
- המערכת תומכת רק בתמונות בפורמט PNG ו-JPG.
- כתובת ה-URL של המארח חייבת להיות
HTTPS
. - כדי להבטיח ביצועים טובים של הכרטיסים, גודל התמונה המקסימלי המומלץ הוא 2MB.
הכרטיס הבא מורכב מהווידג'ט Image
. היא מציגה את
תמונה של דף הנחיתה של התיעוד למפתחים של Google Chat. כשמשתמשים ילחצו על
תמונה, התיעוד של Google Chat למפתחים ייפתח בכרטיסייה חדשה.
הוספת רכיב תמונה
הווידג'ט Image
הוא תמונה עם עיצוב מוגבל.
ווידג'ט imageCompent
מאפשר להחיל את cropStyle
ו-borderStyle
על תמונה.
בדוגמה הבאה מוצגות שתי תמונות ברשת שבה אחת מהתמונות חתוכים:
חיתוך תמונה
כדי לשנות את הצורה של תמונה, אפשר להחיל
cropStyle
יש כמה צורות להחיל על תמונה:
- אפשר להשתמש ב-
SQUARE
כדי להחיל חיתוך ריבועי. - בעזרת
CIRCLE
אפשר לבצע חיתוך עגול. - בעזרת
RECTANGLE_CUSTOM
אפשר להחיל חיתוך מלבני עם יחס גובה-רוחב מותאם אישית יחס הגובה-רוחב. לדוגמה, אפשר להשתמש ב-RECTANGLE_4_3
כדי להחיל חיתוך מלבני עם יחס גובה-רוחב של 4:3.
בדוגמה הבאה מוצגות חמש תמונות ברשת עם cropStyle
שונה
הוחלו על כל תמונה:
הוסף סמל
ווידג'ט Icon
מייצג או
מובנה
סמל או
בהתאמה אישית
. אפשר להשתמש ב-Icon
ב:
הודעות בכרטיס
וגם
תיבות דו-שיח
בדרכים הבאות:
- להציג סמל נפרד.
- הצגת סמל לפני טקסט קשור, כחלק
הווידג'ט
DecoratedText
. - להציג סמל כלחצן אינטראקטיבי, כחלק
הווידג'ט
ButtonList
.
הכרטיס הבא מכיל רכיב Icon
עם סמל מובנה:
בטבלה הבאה מפורטים הסמלים המובנים הזמינים להודעות לגבי כרטיסים:
מטוס | סימנייה | ||
אוטובוס | מכונית | ||
שעון | CONFIRMATION_NUMBER_ICON | ||
תיאור | דולר ארה"ב | ||
אימייל | EVENT_SEAT | ||
FLIGHT_ARRIVAL | FLIGHT_DEPARTURE | ||
קידום מלונות | HOTEL_ROOM_TYPE | ||
INVITE | MAP_PIN | ||
מועדון החברים | MULTIPLE_PEOPLE | ||
אדם | טלפון | ||
RESTAURANT_ICON | SHOPPING_CART | ||
STAR | חנות | ||
כרטיס | אימון | ||
VIDEO_CAMERA | VIDEO_PLAY |
מוסיפים פסקה של טקסט מעוצב
ווידג'ט TextParagraph
מציגה פסקת טקסט עם עיצוב HTML אופציונלי. בזמן ההגדרה
את תוכן הטקסט של הווידג'טים האלה, רק צריך לכלול את תגי ה-HTML המתאימים.
למידע נוסף על תגי ה-HTML הנתמכים, אפשר לעיין במאמר
עיצוב הטקסט בכרטיס.
לדוגמה, העיצוב הבא זמין לטקסט של פסקה:
- הצגת טקסט מודגש, עם קו תחתון או נטוי עם קוד HTML
<b>
,<u>
,<i>
התגים. - קישור לאתרים באמצעות קוד ה-HTML
<a href="https://www.google.com">hyperlinks</a>
. - אפשר להוסיף קצת צבע באמצעות קוד ה-HTML
<font color="#ea9999">font tags</font>
.
כל ווידג'ט של TextParagraph
מעובד כפסקה חדשה, ואפשר לחשוב עליו
כמו לתג HTML מסוג <p>
.
הכרטיס הבא מכיל שני ווידג'טים של TextParagraph
שמשמשים כדי
להציג שתי פסקאות בעיצוב HTML פשוט:
הצגת טקסט עם אלמנטים דקורטיביים
ווידג'ט DecoratedText
מציגה טקסט עם פריסה ויכולות אופציונליות. לדוגמה:
- הצגת
icon
לפני הטקסט עםstartIcon
. - הצגת כותרת לפני הטקסט עם
topLabel
. - אפשר להוסיף לחצן קליקבילי עם
button
או מתג שניתן להחלפה באמצעותswitchControl
.
כדאי להשתמש בווידג'ט DecoratedText
כשצריך להציג מידע
דרך קלה ואינטראקטיבית. הווידג'ט מתאים במיוחד לתרחישים לדוגמה כמו
כרטיסים ליצירת קשר, עדכוני סטטוס של הזמנות והתראות על כרטיסי עבודה.
הווידג'ט DecoratedText
תומך בעיצוב פשוט של טקסט ב-HTML. בזמן ההגדרה
את תוכן הטקסט של הווידג'טים האלה, רק צריך לכלול את תגי ה-HTML המתאימים. עבור
לקבלת מידע נוסף על תגי ה-HTML הנתמכים, אפשר לעיין במאמר
עיצוב הטקסט בכרטיס.
הכרטיס הבא מכיל את הווידג'ט DecoratedText
שמשמש להצגה
פרטים ליצירת קשר, כגון כתובת אימייל, סטטוס אונליין, מספר טלפון וכן
אתר:
פתרון בעיות
כשאפליקציית Google Chat או אפליקציית Google Chat הפונקציה card מחזירה שגיאה, בממשק של Chat מוצגת ההודעה "משהו השתבש". או "לא ניתן לעבד את הבקשה שלך". לפעמים בממשק המשתמש של Chat לא מציגה הודעות שגיאה, אבל אפליקציית Chat או והכרטיס מפיק תוצאה לא צפויה: לדוגמה, הודעה בכרטיס יופיעו.
יכול להיות שלא תופיע הודעת שגיאה בממשק המשתמש של Chat, אבל יש הודעות שגיאה תיאוריות ונתוני יומן זמינים כדי לעזור לכם לתקן שגיאות כשמופעלת רישום שגיאות ביומן של אפליקציות ל-Chat. כדי לקבל עזרה בצפייה: לניפוי באגים ולתיקון שגיאות: פתרון בעיות ותיקון שגיאות ב-Google Chat