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

‫Google משתמשת בטכנולוגיית AI כדי לתרגם תוכן לשפה המועדפת עליך. בתרגומים כאלו עשויות להיות שגיאות.

מילוי בקשות ב-Dialogflow CX Messenger

כשיוצרים כרטיס בהתאמה אישית לביצוע הזמנה, אפשר ליצור תגובות טקסט ומטענים ייעודיים (payload) בהתאמה אישית. התשובות הטקסטואליות משמשות לתשובות של סוכנים בטקסט פשוט וב-Markdown, וה-payloads המותאמים אישית משמשים לתשובות עשירות. הפורמט המותאם אישית של מטען ייעודי (Payload) לכל סוגי התגובות הוא בעל המבנה הבסיסי הבא:

{
  "richContent": [
    [
      {
        "type": "type-id",
        ...
      },
      {
        "type": "type-id",
        ...
      }
    ],
    [
      {
        "type": "type-id",
        ...
      },
      {
        "type": "type-id",
        ...
      }
    ]
  ]
}

שימו לב שהערך richContent מאפשר מערך חיצוני אחד וכמה מערכים פנימיים. התשובות במערך פנימי קשורות זו לזו בכרטיס חזותי אחד. אם המערך החיצוני מכיל כמה מערכים פנימיים, יוצגו כמה כרטיסים – אחד לכל מערך פנימי.

בקטעי המשנה שנותרו מתוארים הסוגים השונים של תגובות שאפשר להגדיר עבור מטען ייעודי (Payload) בהתאמה אישית.

תשובה בהודעת טקסט

צילום מסך של טקסט ב-Dialogflow CX Messenger

תשובת הטקסט תומכת בטקסט פשוט וב-Markdown. כמה דוגמאות ל-Markdown:

*Italic*
**Bold**
# Title
[Link text](Link URL)
![](Image URL)

הערה: כדי להפעיל תמונות ב-Markdown, צריך לציין את המאפיין url-allowlist בהתאם.

טבלאות:

Header 1 | Header 2
-------- | --------
Cell 1   | Cell 2

סוג התשובה למידע

צילום מסך של סוג המידע ב-Dialogflow CX Messenger

סוג התגובה 'מידע' הוא שקופית פתיחה פשוטה שהמשתמשים יכולים ללחוץ עליה או להקיש עליה.

בטבלה הבאה מתוארים השדות:

שם	סוג	תיאור
`type`	`string`	סוג התגובה: 'מידע'
`title`	`string`	כותרת הכרטיס
`subtitle`	`string`	כותרת משנה של הכרטיס
`image`	`object`	תמונה
`image.rawUrl`	`string`	כתובת URL לתמונה שגלוי לכולם
`anchor`	`object`	‫Anchor למעקב כשלוחצים על אלמנט
`anchor.href`	`string`	כתובת ה-URL של העוגן
`anchor.target`	`string`	יעד העוגן, ברירת המחדל היא `_blank`

לדוגמה:

{
  "richContent": [
    [
      {
        "type": "info",
        "title": "Info item title",
        "subtitle": "Info item subtitle",
        "image": {
          "rawUrl": "https://example.com/images/logo.png"
        },
        "anchor": {
          "href": "https://example.com"
        }
      }
    ]
  ]
}

סוג התשובה לתיאור

צילום מסך של סוג התיאור ב-Dialogflow CX Messenger

סוג התגובה של התיאור הוא כרטיס מידע שיכול להכיל כמה שורות טקסט.

בטבלה הבאה מתוארים השדות:

שם	סוג	תיאור
`type`	`string`	סוג התגובה: 'תיאור'
`title`	`string`	כותרת הכרטיס
`text`	`array<string>`	מערך של מחרוזות, שכל מחרוזת מוצגת בשורה חדשה

לדוגמה:

{
  "richContent": [
    [
      {
        "type": "description",
        "title": "Description title",
        "text": [
          "This is text line 1.",
          "This is text line 2."
        ]
      }
    ]
  ]
}

סוג התגובה: תמונה

צילום מסך של סוג התמונה ב-Dialogflow CX Messenger

סוג התגובה 'תמונה' הוא כרטיס תמונה שהמשתמשים יכולים ללחוץ עליו או לגעת בו. סוג התשובה תומך בצ'יפ הפניה שמאפשר להוסיף את מקור התמונה כקישור לכותרת יחד עם טקסט תיאורי קצר וסמל.

בטבלה הבאה מתוארים השדות:

שם	סוג	תיאור
`type`	`string`	סוג התגובה: 'תמונה'
`rawUrl`	`string`	כתובת URL לתמונה שגלוי לכולם
`accessibilityText`	`string`	טקסט חלופי לתמונה
`reference.text`	`string`	הטקסט שיוצג בצ'יפ ההפניה
`reference.anchor.href`	`string`	כתובת ה-URL של הצ'יפ של ההפניה
`reference.anchor.target`	`string`	יעד העוגן בצ'יפ ההפניה, ברירת המחדל היא `_blank`
`reference.image.rawUrl`	`string`	תמונה שתוצג ברכיב ההפניה

לדוגמה:

{
  "richContent": [
    [
      {
        "type": "image",
        "rawUrl": "https://example.com/images/logo.png",
        "accessibilityText": "Example logo",
        "reference": {
          "text": "Logo",
          "anchor": {
            "href": "https://example.com/images/logo.png"
          },
          "image": {
            "rawUrl": "https://example.com/images/logo_small.png"
          }
        }
      }
    ]
  ]
}

אפשר לספק את משתני ה-CSS הבאים:

מאפיינים	מדיניות קלט	ערך ברירת המחדל	תיאור
`df-messenger-image-border-radius`	אופציונלי	‫8px	רדיוס הגבול של התמונה

סוג התגובה לסרטון

צילום מסך של סוג הסרטון ב-Dialogflow CX Messenger

סוג התגובה 'סרטון' מציג רכיב וידאו שיכול להיות סרטון ישיר מכתובת URL, שמופעל ישירות בצ'אט, או קישור לסרטון.

שם	סוג	תיאור
`type`	`string`	סוג התגובה: 'סרטון'
`title`	`string`	שם סרטון אופציונלי
`source`	`object`	מקור הסרטון
`source.type`	`string`	סוג מקור הווידאו, `link` או `raw`
`source.anchor`	`object`	‫Anchor למעקב כשלוחצים על אלמנט
`source.embeddedPlayer`	`string`	אפשר להטמיע סרטון מסוג `link` במקום לקשר לדף האינטרנט של הנגן. ההטמעה הזו מתבצעת רק עבור קבוצה ידועה של שחקנים, והיא תומכת ב-`youtube`.
`source.thumbnail`	`object`	תמונה ממוזערת שתוצג עבור `anchor`
`source.thumbnail.rawUrl`	`string`	כתובת ה-URL של התמונה הממוזערת
`source.rawUrl`	`string`	כתובת URL לסרטון מסוג `raw`

לדוגמה:

{
  "richContent": [
    [
      {
        "type": "video",
        "source": {
          "type": "link",
          "anchor": {
            "href": "https://www.youtube.com/watch?v=cNfINi5CNbY"
          }
        }
      }
    ]
  ]
}

אפשר לספק את משתני ה-CSS הבאים:

מאפיינים	מדיניות קלט	ערך ברירת המחדל	תיאור
`df-messenger-video-width`	אופציונלי	אוטומטי	רוחב של סרטון (מוגבל על ידי `max-width\: 100%`)
`df-messenger-video-height`	אופציונלי	אוטומטי	גובה של סרטון
`df-messenger-video-embed-width`	אופציונלי	560px	הרוחב של סרטון משובץ (מוגבל על ידי `max-width\: 100%`)
`df-messenger-video-embed-height`	אופציונלי	‎315 px	הגובה של סרטון מוטמע
`df-messenger-video-border`	אופציונלי	‫1px solid #e0e0e0	גבול הסרטון
`df-messenger-video-border-radius`	אופציונלי	‫8px	רדיוס הגבול של הסרטון

סוג התגובה של הכפתור

סוג התגובה 'לחצן' הוא לחצן קטן עם סמל שהמשתמשים יכולים ללחוץ עליו או לגעת בו.

בטבלה הבאה מתוארים השדות:

שם	סוג	תיאור
`type`	`string`	סוג התגובה: 'לחצן'
`icon`	`object`	סמל של כפתור
`icon.type`	`string`	סמל מספריית הסמלים של Material. סמל ברירת המחדל הוא חץ
`icon.color`	`string`	קוד הקסדצימלי של הצבע
`image`	`object`	תמונה של הכפתור, מקבלת עדיפות על פני `icon`
`image.rawUrl`	`string`	כתובת URL לתמונה שגלוי לכולם
`mode`	`string`	אופציונלי. אם המדיניות מוגדרת לערך 'חסימה', קלט של משתמשים מושבת עד שהמשתמש לוחץ על הלחצן.
`text`	`string`	טקסט של לחצן
`anchor`	`object`	‫Anchor למעקב כשלוחצים על אלמנט
`anchor.href`	`string`	כתובת ה-URL של העוגן
`anchor.target`	`string`	יעד העוגן, ברירת המחדל היא `_blank`
`event`	`object`	אירוע Dialogflow CX שמופעל כשלוחצים על הלחצן.

לדוגמה:

{
  "richContent": [
    [
      {
        "type": "button",
        "icon": {
          "type": "chevron_right",
          "color": "#FF9800"
        },
        "mode": "blocking",
        "text": "Button text",
        "anchor": {
          "href": "https://example.com"
        },
        "event": {
          "event": ""
        }
      }
    ]
  ]
}

אפשר לספק את משתני ה-CSS הבאים:

מאפיינים	מדיניות קלט	ערך ברירת המחדל	תיאור
`df-messenger-button-border`	אופציונלי	ללא	גבול של כפתור
`df-messenger-button-border-radius`	אופציונלי	‫8px	רדיוס הגבול של כפתור
`df-messenger-button-font-color`	אופציונלי	#1f1f1f	צבע הטקסט של לחצן
`df-messenger-button-font-family`	אופציונלי	‪"Google Sans", "Helvetica Neue", sans-serif	משפחת הגופנים של כפתור
`df-messenger-button-font-size`	אופציונלי	‫14px	גודל הגופן של לחצן
`df-messenger-button-padding`	אופציונלי	‫12px	ריווח פנימי של כפתור
`df-messenger-button-icon-spacing`	אופציונלי	‫12px	הרווח בין סמל הכפתור לטקסט
`df-messenger-button-icon-font-size`	אופציונלי	24px	גודל הסמל של הכפתור
`df-messenger-button-image-size`	אופציונלי	24px	גודל תמונת הלחצן
`df-messenger-button-image-offset`	אופציונלי	0	היסט של תמונת הלחצן, אפשר להזין ערכים שליליים כדי להזיז את הריווח הפנימי
`df-messenger-button-text-align`	אופציונלי	מרכז	יישור הטקסט של לחצן
`df-messenger-button-text-wrap`	אופציונלי	רגיל	משתמשים במקש `nowrap` כדי להשבית כפתורים עם כמה שורות

סוג התגובה של רשימה

צילום מסך של רשימת סוגים ב-Dialogflow CX Messenger

סוג התשובה 'רשימה' הוא כרטיס עם כמה אפשרויות שהמשתמשים יכולים לבחור מתוכן.

התשובה מכילה מערך של סוגי תגובות list ו-divider. בטבלה הבאה מתואר הסוג list:

שם	סוג	תיאור
`type`	`string`	סוג התגובה: 'רשימה'
`title`	`string`	שם האפשרות
`subtitle`	`string`	כותרת משנה של אפשרות
`event`	`object`	אירוע של Dialogflow CX שמופעל כשלוחצים על האפשרות
`anchor`	`object`	‫Anchor למעקב כשלוחצים על אלמנט
`anchor.href`	`string`	כתובת ה-URL של העוגן
`anchor.target`	`string`	יעד העוגן, ברירת המחדל היא `_blank`
`image`	`object`	תמונה
`image.rawUrl`	`string`	כתובת URL לתמונה שגלוי לכולם

בטבלה הבאה מתואר הסוג divider:

שם	סוג	תיאור
`type`	`string`	סוג התגובה: 'מפריד'

לדוגמה:

{
  "richContent": [
    [
      {
        "type": "list",
        "title": "List item 1 title",
        "subtitle": "List item 1 subtitle",
        "event": {
          "event": ""
        }
      },
      {
        "type": "list",
        "title": "List item 2 title",
        "subtitle": "List item 2 subtitle",
        "event": {
          "event": ""
        }
      }
    ]
  ]
}

אפשר לספק את משתני ה-CSS הבאים:

מאפיינים	מדיניות קלט	ערך ברירת המחדל	תיאור
`df-messenger-list-padding`	אופציונלי	‫16px	הריווח הפנימי של רכיב ברשימה
`df-messenger-list-inset`	אופציונלי	0	הזחה אופקית נוספת של רכיב הרשימה (בנוסף לריווח הפנימי), כדי לשלוט בהרחבה של הגבול בין הרכיבים
`df-messenger-list-spacing`	אופציונלי	‫10px	רווח אנכי בין רכיבים ברשימה
`df-messenger-list-border-bottom`	אופציונלי	‫1px solid #e0e0e0	גבול בין אלמנטים ברשימה

סוג התשובה: אקורדיון

צילום מסך של סוג אקורדיון ב-Dialogflow CX Messenger

סוג התשובה 'אקורדיון' הוא כרטיס קטן שמשתמש יכול ללחוץ עליו או להקיש עליו כדי להרחיב אותו ולראות עוד טקסט.

בטבלה הבאה מתוארים השדות:

שם	סוג	תיאור
`type`	`string`	סוג התגובה: 'אקורדיון'
`title`	`string`	כותרת האקורדיון
`subtitle`	`string`	כותרת משנה של אקורדיון
`image`	`object`	תמונה
`image.rawUrl`	`string`	כתובת URL לתמונה שגלוי לכולם
`text`	`string`	טקסט באקורדיון

לדוגמה:

{
  "richContent": [
    [
      {
        "type": "accordion",
        "title": "Accordion title",
        "subtitle": "Accordion subtitle",
        "image": {
          "rawUrl": "https://example.com/images/logo.png"
        },
        "text": "Accordion text"
      }
    ]
  ]
}

סוג התשובה של ההצעה הקשורה

צילום מסך של סוג הצ'יפים ב-Dialogflow CX Messenger

סוג התגובה של הצעות קשורות מספק למשתמש הקצה רשימה של הצעות קשורות שאפשר ללחוץ עליהן.

בטבלה הבאה מתוארים השדות:

שם	סוג	תיאור
`type`	`string`	סוג התשובה: 'צ'יפים'
`options`	`array<object>`	מערך של אובייקטי אפשרויות
`options[].mode`	`string`	אופציונלי, אם הערך הוא 'חסימה', קלט של משתמשים מושבת עד שהמשתמש לוחץ על הצ'יפ
`options[].text`	`string`	טקסט של אפשרות
`options[].image`	`object`	אופציונלי, האפשרות Image
`options[].image.rawUrl`	`string`	כתובת ה-URL הציבורית של התמונה
`options[].anchor`	`object`	אופציונלי, Anchor to follow when element is clicked
`options[].anchor.href`	`string`	כתובת ה-URL של העוגן
`options[].anchor.target`	`string`	יעד העוגן, ברירת המחדל היא `_blank`

לדוגמה:

{
  "richContent": [
    [
      {
        "type": "chips",
        "options": [
          {
            "mode": "blocking",
            "text": "Chip 1",
            "image": {
              "rawUrl": "https://example.com/images/logo.png"
            },
            "anchor": {
              "href": "https://example.com"
            }
          },
          {
            "text": "Chip 2",
            "image": {
              "rawUrl": "https://example.com/images/logo.png"
            },
            "anchor": {
              "href": "https://example.com"
            }
          }
        ]
      }
    ]
  ]
}

אפשר לספק את משתני ה-CSS הבאים:

מאפיינים	מדיניות קלט	ערך ברירת המחדל	תיאור
`df-messenger-chips-spacing`	אופציונלי	‫10px	הרווח שמעל הצ'יפים להודעה הקודמת
`df-messenger-chips-border-color`	אופציונלי	#e0e0e0	צבע הגבול של הצ'יפ
`df-messenger-chips-border-color-hover`	אופציונלי	#e0e0e0	צבע הגבול של הצ'יפ כשמעבירים מעליו את העכבר
`df-messenger-chips-border-radius`	אופציונלי	999px	רדיוס הגבול של צ'יפ
`df-messenger-chips-background`	אופציונלי	לבן	רקע של צ'יפ
`df-messenger-chips-background-hover`	אופציונלי	rgba(68, 71, 70, 0.08)	רקע של צ'יפ כשמעבירים מעליו את העכבר
`df-messenger-chips-padding`	אופציונלי	6px 16px	מרווח פנימי של צ'יפ
`df-messenger-chips-font-color`	אופציונלי	black	צבע הטקסט של צ'יפ
`df-messenger-chips-font-family`	אופציונלי	‪"Google Sans", "Helvetica Neue", sans-serif	משפחת הגופנים של צ'יפ
`df-messenger-chips-font-size`	אופציונלי	‫14px	גודל הטקסט של צ'יפ
`df-messenger-chips-font-weight`	אופציונלי	רגיל	עובי הגופן של צ'יפ
`df-messenger-chips-font-weight-hover`	אופציונלי	רגיל	משקל הגופן של צ'יפ כשמעבירים מעליו את העכבר
`df-messenger-chips-box-shadow`	אופציונלי	0 2px 2px 0 rgba(0, 0, 0, 0.24)	צללית תיבה של צ'יפ
`df-messenger-chips-content-align`	אופציונלי	flex-start	היישור האנכי של התוכן (למשל התמונה) בצ'יפ
`df-messenger-chips-text-wrap`	אופציונלי	nowrap	שימוש ב-`normal` כדי לאפשר צ'יפים עם כמה שורות

סוג התשובה עם ציטוטים

צילום מסך של סוג הציטוט ב-Dialogflow CX Messenger

סוג התשובה 'ציטוטים' מספק למשתמש הקצה רשימה של קישורים לציטוטים שאפשר ללחוץ עליהם.

בטבלה הבאה מתוארים השדות:

שם	סוג	תיאור
`type`	`string`	סוג התגובה: match_citations
`citations`	`array<object>`	מערך של אובייקטים מסוג Citation
`citations[].title`	`string`	שם הציטוט
`citations[].subtitle`	`string`	כתובית לציטוט (כרגע המערכת מתעלמת ממנה)
`citations[].anchor`	`object`	‫Anchor למעקב כשלוחצים על אלמנט
`citations[].anchor.href`	`string`	כתובת ה-URL של העוגן
`citations[].anchor.target`	`string`	יעד העוגן, ברירת המחדל היא `_blank`

לדוגמה:

{
  "richContent": [
    [
      {
        "type": "match_citations",
        "citations": [
          {
            "title": "Source 1",
            "subtitle": "",
            "anchor": {
              "href": "https://example.com/1"
            }
          },
          {
            "title": "Source 2",
            "subtitle": "",
            "anchor": {
              "href": "https://example.com/2"
            }
          }
        ]
      }
    ]
  ]
}

אפשר לספק את משתני ה-CSS הבאים:

מאפיינים	מדיניות קלט	ערך ברירת המחדל	תיאור
`df-messenger-citations-spacing`	אופציונלי	‫10px	רווח מעל הציטוטים להודעה הקודמת
`df-messenger-citations-message-display`	אופציונלי	בלוק	המאפיין מגדיר את התצוגה של ההערה מעל הציטוטים. הערכים המותרים הם `block` או `none`
`df-messenger-citations-message-font-color`	אופציונלי	#041e49	צבע הטקסט של ההערה מעל הציטוטים
`df-messenger-citations-message-font-size`	אופציונלי	‫12px	גודל הטקסט של ההערה מעל הציטוטים
`df-messenger-citations-flex-direction`	אופציונלי	שורה	מאפיין כיוון הגמישות של הציטוטים, מומלץ להשתמש ב-`row` (אופקי עם מעברי שורה) או ב-`column` (אנכי)
`df-messenger-citations-border-color`	אופציונלי	#1a73e8	צבע הגבול של ציטוט
`df-messeenger-citations-border-color-hover`	אופציונלי	#1a73e8	צבע הגבול של ציטוט כשמעבירים מעליו את העכבר
`df-messenger-citations-border-radius`	אופציונלי	4 פיקסלים	רדיוס הגבול של ציטוט
`df-messenger-citations-padding`	אופציונלי	‫8px	הוספת רווחים מסביב לציטוט
`df-messenger-citations-background`	אופציונלי	לבן	רקע של ציטוט
`df-messenger-citations-background-hover`	אופציונלי	rgba(68, 71, 70, 0.08)	רקע של ציטוט כשמעבירים מעליו את העכבר
`df-messenger-citations-font-color`	אופציונלי	#1a73e8	צבע הטקסט של ציטוט
`df-messenger-citations-font-family`	אופציונלי	‪"Google Sans", "Helvetica Neue", sans-serif	משפחת הגופנים של ציטוט
`df-messenger-citations-font-size`	אופציונלי	‫11px	גודל הטקסט של ציטוט
`df-messenger-citations-icon-font-size`	אופציונלי	‫14px	גודל הטקסט של סמל הציטוט
`df-messenger-citations-font-weight`	אופציונלי	רגיל	עובי הגופן של ציטוט
`df-messenger-citations-font-weight-hover`	אופציונלי	רגיל	עובי הגופן של ציטוט כשמעבירים מעליו את העכבר
`df-messenger-citations-icon-spacing`	אופציונלי	4 פיקסלים	הרווח בין הסמל לטקסט בציטוט
`df-messenger-citations-box-shadow`	אופציונלי	ללא	צללית של תיבת ציטוט

סוג התגובה 'קבצים'

צילום מסך של סוג הקבצים ב-Dialogflow CX Messenger

סוג התגובה files (קבצים) מציג רשימה של רכיבי קבצים שמכילים קישור להורדה.

בטבלה הבאה מתוארים השדות:

שם	סוג	תיאור
`type`	`string`	סוג התגובה: 'קבצים'
`files`	`array<object>`	מערך של אובייקטים מסוג File
`files[].name`	`string`	שם הקובץ
`files[].image`	`object`	תמונה של קובץ
`files[].image.rawUrl`	`string`	כתובת ה-URL הציבורית של קובץ התמונה
`files[].anchor`	`object`	Anchor כדי להוריד את הקובץ
`files[].anchor.href`	`string`	כתובת ה-URL של העוגן
`files[].anchor.target`	`string`	יעד העוגן, ברירת המחדל היא `_blank`

לדוגמה:

{
  "richContent": [
    [
      {
        "type": "files",
        "files": [
          {
            "name": "instructions.pdf",
            "image": {
              "rawUrl":
                  "https://fonts.gstatic.com/s/i/short-term/release/googlesymbols/cloud_download/default/24px.svg"
            },
            "anchor": {
              "href": "https://example.com/instructions.pdf"
            }
          },
          {
            "name": "data.csv",
            "image": {
              "rawUrl":
                  "https://fonts.gstatic.com/s/i/short-term/release/googlesymbols/csv/default/24px.svg"
            },
            "anchor": {
              "href": "https://example.com/data.csv"
            }
          }
        ]
      }
    ]
  ]
}

אפשר לציין את משתני ה-CSS הבאים

מאפיינים	מדיניות קלט	ערך ברירת המחדל	תיאור
`df-messenger-files-spacing`	אופציונלי	‫10px	הרווח שמעל הקובץ עד להודעה הקודמת
`df-messenger-files-distance`	אופציונלי	‫8px	המרחק בין הקבצים ברשימה
`df-messenger-files-flex-direction`	אופציונלי	שורה	מאפיין כיוון הגמישות של הקבצים, מומלץ להשתמש ב-`row` (אופקי עם מעברי שורה) או ב-`column` (אנכי)
`df-messenger-files-background`	אופציונלי	לבן	רקע של קובץ
`df-messenger-files-border`	אופציונלי	‫1px solid #e0e0e0	הגבול של קובץ
`df-messenger-files-border-radius`	אופציונלי	999px	רדיוס הגבולות של קובץ
`df-messenger-files-box-shadow`	אופציונלי	0 2px 2px 0 rgba(0, 0, 0, 0.24)	צללית תיבה של קובץ
`df-messenger-files-padding`	אופציונלי	6px 16px	ריווח בקובץ
`df-messenger-files-font-color`	אופציונלי	#1f1f1f	צבע הטקסט של קובץ
`df-messenger-files-font-family`	אופציונלי	‪"Google Sans", "Helvetica Neue", sans-serif	משפחת הגופנים של קובץ
`df-messenger-files-font-size`	אופציונלי	‫14px	גודל הטקסט בקובץ
`df-messenger-files-font-weight`	אופציונלי	רגיל	עובי הגופן של קובץ
`df-messenger-files-background-hover`	אופציונלי	לבן	רקע של קובץ כשמעבירים מעליו את העכבר
`df-messenger-files-border-hover`	אופציונלי	‫1px solid #e0e0e0	הגבול של קובץ כשמעבירים מעליו את העכבר
`df-messenger-files-font-weight-hover`	אופציונלי	רגיל	עובי הגופן של קובץ כשמעבירים מעליו את העכבר
`df-messenger-files-image-offset`	אופציונלי	0 0 0 -8px	ההיסט של התמונה בצד שמאל
`df-messenger-files-image-size`	אופציונלי	‫18px	גודל התמונה בצד שמאל
`df-messenger-files-text-spacing`	אופציונלי	‫8px	המרחק בין תמונה עם טקסט בצד ימין לבין טקסט עם סמל בצד שמאל
`df-messenger-files-icon-offset`	אופציונלי	0 -8px 0 0	ההזחה של סמל ההורדה בצד שמאל
`df-messenger-files-icon-size`	אופציונלי	‫18px	גודל סמל ההורדה בצד שמאל
`df-messenger-files-icon-font-color`	אופציונלי	#444746	הצבע של סמל ההורדה בצד שמאל

סוג התגובה HTML

צילום מסך של סוג ה-HTML של Dialogflow CX Messenger

סוג התגובה HTML מספק למשתמש הקצה הודעת HTML.

בטבלה הבאה מתוארים השדות:

שם	סוג	תיאור
`type`	`string`	סוג התגובה: html
`html`	`string`	תוכן הטקסט של ההודעה, כולל תמיכה ב-HTML

תגי HTML נתמכים:

‫a – אלמנט עוגן (משמש ליצירת היפר-קישורים)
‫b – רכיב מודגש (משמש להדגשת טקסט)
‫i – רכיב נטוי (משמש להטיית טקסט)
‫u – רכיב קו תחתון (משמש להוספת קו תחתון לטקסט)
‫h1 – רכיב כותרת 1 (משמש לכותרת הראשית של דף)
‫h2 – רכיב כותרת רמה 2 (משמש לכותרות משנה)
‫h3 – רכיב כותרת 3 (לכותרות משנה של כותרות משנה)
‫p – רכיב פסקה (משמש ליצירת פסקאות טקסט)
‫br – רכיב מעבר שורה (משמש ליצירת מעברי שורה בתוך פסקה)
‫table – רכיב של טבלה (משמש ליצירת טבלאות)
‫tr – רכיב של שורה בטבלה (משמש ליצירת שורות בטבלה)
‫thead – רכיב כותרת הטבלה (משמש ליצירת כותרת בתוך טבלה)
‫th – נתונים בכותרת של טבלה או רכיב של תא (משמש ליצירת תאים בשורת כותרת של טבלה)
‫tbody – רכיב גוף הטבלה (משמש ליצירת גוף בתוך טבלה)
‫td – נתונים בטבלה או רכיב תא (משמש ליצירת תאים בשורה בטבלה)
‫ul – רכיב של רשימה לא ממוספרת (משמש ליצירת רשימות עם תבליטים)
‫ol – רכיב של רשימה מסודרת (משמש ליצירת רשימות ממוספרות)
‫li – רכיב של פריט ברשימה (משמש ליצירת פריטים בתוך רשימה)
‫img – רכיב תמונה (משמש להצגת תמונה, ראו גם url-allowlist התאמה אישית של HTML)
‫div – רכיב מאגר
‫span – רכיב מאגר בתוך השורה

לדוגמה:

{
  "richContent": [
    [
      {
        "type": "html",
        "html": "<b>Bold text</b> <i>Italic text</i> <u>Underlined text</u>"
      }
    ]
  ]
}

עיצוב HTML ו-Markdown

לרכיבי עוגן (רכיב HTML‏ a וקישור Markdown), אפשר לספק את משתני ה-CSS הבאים:

מאפיינים	מדיניות קלט	ערך ברירת המחדל	תיאור
`df-messenger-link-decoration`	אופציונלי	קו תחתון	עיצוב של אלמנט קישור
`df-messenger-link-font-color`	אופציונלי	#0b57d0	צבע הגופן של אלמנט קישור שלא נכנסתם אליו
`df-messenger-link-visited-font-color`	אופציונלי	#0b57d0	צבע הגופן של אלמנט קישור שכבר נכנסתם אליו
`df-messenger-link-hover-font-color`	אופציונלי	#0b57d0	צבע הגופן כשמעבירים את העכבר מעל אלמנט קישור
`df-messenger-link-background`	אופציונלי	שקוף	רקע של אלמנט קישור
`df-messenger-link-padding`	אופציונלי	0	השוליים הפנימיים של אלמנט קישור
`df-messenger-link-border`	אופציונלי	ללא	הגבול של אלמנט קישור
`df-messenger-link-border-radius`	אופציונלי	0	רדיוס הגבול של אלמנט קישור

לרכיבי טבלה (רכיב HTML‏ table וטבלאות Markdown), אפשר לספק את משתני ה-CSS הבאים:

מאפיינים	מדיניות קלט	ערך ברירת המחדל	תיאור
`df-messenger-table-font-size`	אופציונלי	‫14px	גודל הטקסט ברכיב טבלה
`df-messenger-table-font-color`	אופציונלי	#1f1f1f	צבע הטקסט ברכיב של טבלה
`df-messenger-table-align`	אופציונלי	חץ שמאלה	יישור הטקסט בתא בטבלה
`df-messenger-table-padding`	אופציונלי	0	מרווח פנימי בתא בטבלה
`df-messenger-table-border-collapse`	אופציונלי	נפרד	מצב איחוד הגבולות של טבלה, משתמשים ב-`separate` כדי להפעיל את `border-radius`
`df-messenger-table-border-radius`	אופציונלי	0	רדיוס הגבול של טבלה
`df-messenger-table-header-border-radius`	אופציונלי	0	רדיוס הגבול של כותרת הטבלה
`df-messenger-table-border-top`	אופציונלי	ללא	הגבול העליון של שורה בטבלה
`df-messenger-table-border-top-first`	אופציונלי	ללא	הגבול העליון של השורה הראשונה בטבלה
`df-messenger-table-border-bottom`	אופציונלי	ללא	הגבול התחתון של שורה בטבלה
`df-messenger-table-border-bottom-last`	אופציונלי	ללא	גבול תחתון של השורה האחרונה בטבלה
`df-messenger-table-border-left`	אופציונלי	ללא	גבול שמאלי של תא בטבלה
`df-messenger-table-border-left-first`	אופציונלי	ללא	הגבול שמשמאל לתא הראשון בטבלה בשורה
`df-messenger-table-border-right`	אופציונלי	ללא	הגבול הימני של תא בטבלה
`df-messenger-table-border-right-last`	אופציונלי	ללא	הגבול הימני של התא האחרון בטבלה בשורה
`df-messenger-table-background`	אופציונלי	שקוף	רקע של שורה בטבלה
`df-messenger-table-even-background`	אופציונלי	שקוף	רקע של שורות בטבלה עם מספר זוגי
`df-messenger-table-odd-background`	אופציונלי	שקוף	רקע של שורות בטבלה עם מספרים אי-זוגיים
`df-messenger-table-header-font-size`	אופציונלי	‫14px	גודל הטקסט ברכיב של כותרת טבלה
`df-messenger-table-header-font-weight`	אופציונלי	מודגש	עובי הגופן ברכיב של כותרת טבלה
`df-messenger-table-header-font-color`	אופציונלי	#1f1f1f	צבע הטקסט ברכיב של כותרת טבלה
`df-messenger-table-header-align`	אופציונלי	חץ שמאלה	היישור של הטקסט בתא של כותרת טבלה
`df-messenger-table-header-padding`	אופציונלי	0	מרווח פנימי בתא של כותרת טבלה
`df-messenger-table-header-border-top`	אופציונלי	ללא	הגבול העליון של שורת הכותרת בטבלה
`df-messenger-table-header-border-bottom`	אופציונלי	ללא	גבול תחתון של שורת הכותרת בטבלה
`df-messenger-table-header-border-left`	אופציונלי	ללא	הגבול השמאלי של תא בשורת הכותרת של הטבלה
`df-messenger-table-header-border-left-first`	אופציונלי	ללא	הגבול השמאלי של התא הראשון בשורת הכותרת של הטבלה
`df-messenger-table-header-border-right`	אופציונלי	ללא	הגבול מימין של תא בשורת הכותרת של הטבלה
`df-messenger-table-header-border-right-last`	אופציונלי	ללא	הגבול השמאלי של התא האחרון בשורת הכותרת של הטבלה
`df-messenger-table-header-background`	אופציונלי	שקוף	הרקע של שורת הכותרת בטבלה

סוג התשובה של תבנית מותאמת אישית

צילום מסך של סוג תבנית בהתאמה אישית ב-Dialogflow CX Messenger

סוג התגובה של התבנית המותאמת אישית מציג רכיב מותאם אישית שמוגדר באתר של הלקוח. האלמנט לא ממוקם בתוך כרטיס ותמיד עומד בפני עצמו.

בטבלה הבאה מתוארים השדות:

שם	סוג	תיאור
`type`	`string`	סוג התגובה: custom_template
`name`	`string`	השם של הרכיב בהתאמה אישית
`payload`	`Object`	מטען ייעודי (payload) להעברה לרכיב המותאם אישית

לדוגמה:

{
  "richContent": [
    [
      {
        "type": "custom_template",
        "name": "custom-element-example",
        "payload": {
          "text": "Hello World"
        }
      }
    ]
  ]
}

באתר שלכם, צריך לרשום את הרכיב המותאם אישית בדיוק בשם שמופיע בשדה name של התגובה. השדה payload מועבר לרכיב המותאם אישית בתור dfPayload אחרי הבנייה (אבל לפני connectedCallback). השדה עשוי להכיל JSON שרירותי. בנוסף, הערך dfResponseId מועבר לרכיב.

זוהי דוגמה להטמעה של רכיב בהתאמה אישית, על סמך התגובה מהדוגמה:

class CustomElementExample extends HTMLElement {
  constructor() {
    super();
    // The `dfPayload` field will be provided before `connectedCallback` is
    // being called.
    this.dfPayload = null;
    // The `dfResponseId` field will be provided before `connectedCallback` is
    // being called.
    this.dfResponseId = null;
    // It is not strictly required but recommended to contain the custom
    // element in a shadow root.
    // https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot
    this.renderRoot = this.attachShadow({mode: 'open'});
  }

  /** Web component Lifecycle method. */
  connectedCallback() {
    const div = document.createElement('div');

    // The `.text` must match the payload's structure in `richContent.payload`.
    div.innerText = this.dfPayload.text;

    this.renderRoot.appendChild(div);
  }
}

(function() {
  // Registers the element. This name must match the name in
  // `richContent.payload`.
  customElements.define('custom-element-example', CustomElementExample);
})();

שילוב של סוגי תגובות

צילום מסך של כרטיס בהתאמה אישית ב-Dialogflow CX Messenger

אפשר להשתמש ברכיבים הנפרדים של הודעות מורכבות ב-Dialogflow CX Messenger כדי ליצור כרטיס בהתאמה אישית שמתאים לצרכים שלכם.

דוגמה לשימוש בחלק מהרכיבים שמופיעים בקטע בנושא ביצוע הזמנות:

{
  "richContent": [
    [
      {
        "type": "image",
        "rawUrl": "https://example.com/images/logo.png",
        "accessibilityText": "Dialogflow CX across platforms"
      },
      {
        "type": "info",
        "title": "Dialogflow CX",
        "subtitle": "Build natural and rich conversational experiences",
        "anchor": {
          "href": "https://cloud.google.com/dialogflow/docs"
        }
      },
      {
        "type": "chips",
        "options": [
          {
            "text": "Case Studies",
            "anchor": {
              "href": "https://cloud.google.com/dialogflow/case-studies"
            }
          },
          {
            "text": "Docs",
            "anchor": {
              "href": "https://cloud.google.com/dialogflow/docs"
            }
          }
        ]
      }
    ]
  ]
}

אפשר לספק את משתני ה-CSS הבאים:

מאפיינים	מדיניות קלט	ערך ברירת המחדל	תיאור
`df-messenger-card-background`	אופציונלי	לבן	רקע של כרטיס בהתאמה אישית
`df-messenger-card-padding`	אופציונלי	‫16px	מרווח פנימי של רכיבים בכרטיס בהתאמה אישית
`df-messenger-card-border`	אופציונלי	‫1px solid #e0e0e0	הגבול של כרטיס בהתאמה אישית
`df-messenger-card-border-radius`	אופציונלי	‫8px	רדיוס הגבול של כרטיס בהתאמה אישית
`df-messenger-card-border-top-left-radius`	אופציונלי	‫8px	רדיוס הגבול בפינה הימנית העליונה של כרטיס בהתאמה אישית
`df-messenger-card-border-top-right-radius`	אופציונלי	‫8px	רדיוס הגבול בפינה השמאלית העליונה של כרטיס בהתאמה אישית
`df-messenger-card-border-bottom-left-radius`	אופציונלי	‫8px	רדיוס הגבול של הפינה השמאלית התחתונה של כרטיס בהתאמה אישית
`df-messenger-card-border-bottom-right-radius`	אופציונלי	‫8px	רדיוס הגבול בפינה השמאלית התחתונה של כרטיס
`df-messenger-card-stack-border-top-left-radius`	אופציונלי	‫8px	הגדרת רדיוס הגבול של הפינה השמאלית העליונה של כרטיסים מותאמים אישית עוקבים מבטלת את הגדרת הרדיוס של הפינה השמאלית העליונה
`df-messenger-card-stack-border-top-right-radius`	אופציונלי	‫8px	Border radius top right for consecutive custom cards overrides top right radius
`df-messenger-card-stack-border-bottom-left-radius`	אופציונלי	‫8px	הגדרת רדיוס הפינה השמאלית התחתונה של כרטיסים מותאמים אישית עוקבים מבטלת את הגדרת הרדיוס של הפינה השמאלית התחתונה
`df-messenger-card-stack-border-bottom-right-radius`	אופציונלי	‫8px	הגדרת רדיוס גבול ימני תחתון לכרטיסים מותאמים אישית עוקבים מבטלת את הגדרת הרדיוס הימני התחתון
`df-messenger-card-box-shadow`	אופציונלי	0 2px 2px 0 rgba(0, 0, 0, 0.24)	צללית של כרטיס בהתאמה אישית

תוכן עשיר מכלי של מדריך הפעלה

אתם יכולים להשתמש בכלים של Playbook כדי לשלוח תוכן עשיר ל-Dialogflow CX Messenger.

שלב 1: יוצרים כלי להוספת תוכן עשיר בסוכן

יוצרים כלי פונקציה בשם addRichContent עם הנתונים הבאים:

קלט לכלי:

properties: {}
type: object

פלט הכלי:

properties:
  status:
    type: string
  reason:
    type: string
type: object

שלב 2: אומרים לסוכן איך להשתמש בכלי הזה

אפשר להסביר לסוכן איך להשתמש בכלי באמצעות הוראות ודוגמאות.

לדוגמה, אפשר להוסיף להוראות משהו כמו:

-  Greet  the  user
-  Ask  the  user  what  their  favorite  color  is.
   At  the  same  time  run  ${TOOL:  addRichContent}  to  display  buttons
   for  blue,  red,  yellow,  and  green.
-  Thank  the  user

לדוגמה, אפשר ליצור דוגמה כמו הבאה:

צילום מסך של דוגמה

שימו לב שהתחביר של התוכן העשיר זהה לתחביר שבו משתמשים אם מחזירים מטען ייעודי (payload) בהתאמה אישית בנציג וירטואלי מבוסס-זרימה.

שלב 3: הגדרת ה-JavaScript

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

מוודאים שהמשתנה dfMessenger מוצהר ומצביע על המופע של df-messenger.

הנה קוד לדוגמה שאפשר להשתמש בו למטרה הזו:

const dfMessenger = document.querySelector('df-messenger');

function  addRichContent(customPayload)  {
  dfMessenger.renderCustomCard(customPayload.richContent);

  // add error handling

  return  Promise.resolve({  status:  "OK",  reason:  null  });
}

// substitute your own tool id

const  toolId  =  'projects/PROJECT_ID/locations/LOCATION/agents/AGENT_ID/tools/TOOL_ID'
dfMessenger.registerClientSideFunction(toolId,  addRichContent.name,  addRichContent);

מילוי בקשות ב-Dialogflow CX Messenger קל לארגן דפים בעזרת אוספים אפשר לשמור ולסווג תוכן על סמך ההעדפות שלך.

תשובה בהודעת טקסט

סוג התשובה למידע

סוג התשובה לתיאור

סוג התגובה: תמונה

סוג התגובה לסרטון

סוג התגובה של הכפתור

סוג התגובה של רשימה

סוג התשובה: אקורדיון

סוג התשובה של ההצעה הקשורה

סוג התשובה עם ציטוטים

סוג התגובה 'קבצים'

סוג התגובה HTML

עיצוב HTML ו-Markdown

סוג התשובה של תבנית מותאמת אישית

שילוב של סוגי תגובות

תוכן עשיר מכלי של מדריך הפעלה

שלב 1: יוצרים כלי להוספת תוכן עשיר בסוכן

שלב 2: אומרים לסוכן איך להשתמש בכלי הזה

שלב 3: הגדרת ה-JavaScript

מילוי בקשות ב-Dialogflow CX Messenger