הוספה של טקסט ותמונות לכרטיס או לתיבת דו-שיח

בדף הזה מוסבר איך להוסיף טקסט ותמונות לכרטיס או להודעה בתיבת דו-שיח, ואיך לשנות את האופן שבו הטקסט והתמונות מופיעים בהודעה.

אתם יכולים להשתמש בכלי ליצירת כרטיסים כדי לעצב הודעות של כרטיסי JSON ולהציג אותן בתצוגה מקדימה בשביל אפליקציות ל-Chat:

לפתיחת הכלי ליצירת כרטיסים

דרישות מוקדמות

  • חשבון Google Workspace עם גישה ל-Google Chat.
  • אפליקציית Chat שפורסמה. כדי ליצור אפליקציית Chat, היעזרו בquickstart.

    • הוספת תמונה

    הווידג'ט 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.

    בדוגמה הבאה מוצגות 5 תמונות ברשת עם ערך cropStyle שונה לכל תמונה:

    הוספת סמל

    הווידג'ט Icon מייצג סמל מובנה או סמל בהתאמה אישית. אפשר להשתמש ב-Icon בהודעות בכרטיס ובתיבות דו-שיח בדרכים הבאות:

    • להציג סמל נפרד.
    • הצגת סמל לפני טקסט קשור, כחלק מהווידג'ט DecoratedText.
    • הצגת סמל כלחצן אינטראקטיבי, כחלק מהווידג'ט ButtonList.

    הכרטיס הבא מכיל רכיב Icon עם סמל מובנה:

    בטבלה הבאה מפורטים הסמלים המובנים הזמינים להודעות לגבי כרטיסים:

    מטוס BOOKMARK
    BUS מכונית
    שעון CONFIRMATION_NUMBER_ICON
    תיאור דולר ארה"ב
    אימייל EVENT_SEAT
    FLIGHT_ARRIVAL FLIGHT_DEPARTURE
    קידום מלונות HOTEL_ROOM_TYPE
    הזמנה MAP_PIN
    מועדון החברים MULTIPLE_PEOPLE
    אדם טלפון
    RESTAURANT_ICON SHOPPING_CART
    כוכב חנות
    כרטיס TRAIN
    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 או כרטיס מחזירים שגיאה, מוצגת בממשק של Chat ההודעה "משהו השתבש". או "לא ניתן לעבד את הבקשה שלך". לפעמים לא מוצגות הודעות שגיאה בממשק המשתמש של Chat, אבל האפליקציה או הכרטיס של Chat יוצרים תוצאה לא צפויה. למשל, יכול להיות שלא תופיע הודעת כרטיס.

    יכול להיות שלא תופיע הודעת שגיאה בממשק המשתמש של Chat, אבל תוכלו להיעזר בהודעות שגיאה תיאוריות ובנתוני היומן שיעזרו לכם לתקן שגיאות כשמופעלת רישום ביומן של שגיאות באפליקציות ל-Chat. למידע נוסף על הצגה, ניפוי באגים ותיקון שגיאות, תוכלו להיעזר במאמר פתרון בעיות ב-Google Chat.