גרסה מדור קודם של Dialogflow CX Messenger

שימו לב: הוצאנו משימוש את הגרסה הקודמת של Dialogflow CX Messenger. הגרסה הקודמת של Dialogflow CX Messenger היא תכונה בתוכנית Preview, והיא אף פעם לא הייתה זמינה לכלל המשתמשים. משתמשים ב-Dialogflow CX Messenger החדש.

שימו לב: כדאי להשתמש בגרסה הקודמת של Dialogflow CX Messenger רק אם הנתונים שהסוכן מספק הם ציבוריים. אחרי שמפעילים את השילוב הזה, כל אדם שלא עבר אימות יוכל לשלוח שאילתות לסוכן שלכם.

השילוב של Dialogflow CX Messenger מדור קודם מספק תיבת דו-שיח מותאמת אישית לצ'אט עם הנציג שלכם, שאפשר להטמיע באתר. תיבת הדו-שיח של הצ'אט מוטמעת כחלון דו-שיח שהמשתמש יכול לפתוח ולסגור. כשפותחים את תיבת הדו-שיח של הצ'אט, היא מופיעה מעל התוכן בפינה השמאלית התחתונה של המסך.

מעבר לגרסה העדכנית של Dialogflow CX Messenger

הגרסה האחרונה של Dialogflow CX Messenger מספקת אימות כדי לשלוט בגישה לשאילתות של נציגים, ואפשרויות נוספות להגדרת ממשק המשתמש. מומלץ שכל המשתמשים בגרסה הקודמת יעברו לגרסה החדשה.

אם הפעלתם את השילוב של Dialogflow CX Messenger לפני 29 באוגוסט 2023, יכול להיות שאתם משתמשים בגרסה הקודמת. כדי לדעת אם אתם משתמשים בגרסה הקודמת, צריך לבדוק את קוד ה-HTML של הכלי לשליחת הודעות שמוטמע באתר שלכם. אם הסקריפט הבא מופיע, סימן שאתם משתמשים בגרסת דור קודם:

https://www.gstatic.com/dialogflow-console/fast/messenger-cx/bootstrap.js?v=1

כדי לעבור לגרסה החדשה:

1. מוחקים את כל קוד ה-HTML, ה-CSS וה-JavaScript של Messenger מהאתר.
2. פועלים לפי ההוראות לשילוב האחרון של Dialogflow CX Messenger.

התאמות אישיות של HTML

אתם יכולים להתאים אישית היבטים שונים של תיבת הדו-שיח של הצ'אט, כמו המראה וההתנהגות שלה. רכיב ה-HTML‏ df-messenger כולל את המאפיינים הבאים:

מאפיין	מדיניות קלט	ערך
agent-id	חובה	מזהה הנציג שמשויך לנציג. השדה הזה מאוכלס מראש עם מזהה הסוכן.
chat-icon	אופציונלי	הסמל שמשמש לכפתור הפתיחה של תיבת הדו-שיח של הצ'אט. סמל ברירת המחדל הוא הסמל של Dialogflow CX. בשדה הזה צריך להזין כתובת URL ציבורית. גודל הסמל צריך להיות 36x36 פיקסלים.
chat-title	חובה	הכותרת שמוצגת בחלק העליון של תיבת הדו-שיח בצ'אט. השם של הסוכן יופיע כאן באופן אוטומטי.
df-cx	חובה	מציין שהאינטראקציה היא עם נציג CX. משתמשים בערך true.
expand	אופציונלי	מאפיין בוליאני שמגדיר את תיבת הדו-שיח של הצ'אט כך שהיא תהיה פתוחה כשהדף נטען. כברירת מחדל, תיבת הדו-שיח של הצ'אט נסגרת כשהדף נטען.
intent	אופציונלי	אירוע בהתאמה אישית שיופעל כשתיבת הדו-שיח של הצ'אט תיפתח. אפשר להשתמש בגורם מטפל באירועים שיופעל עבור האירוע הזה ויפיק את ההודעה הראשונה של הסוכן.
language-code	חובה	קוד השפה שמוגדר כברירת מחדל עבור הכוונה הראשונה. השדה הזה מאוכלס מראש בשפת ברירת המחדל של הסוכן.
location	חובה	האזור של הנציג.
session-id	אופציונלי	מזהה סשן. אם לא מספקים את המזהה הזה, השילוב ייצור מזהה ייחודי לכל תיבת דו-שיח.
user-id	אופציונלי	אפשר להשתמש בו כדי לעקוב אחרי משתמש בסשנים שונים. אפשר להעביר את הערך אל Dialogflow CX דרך השדה queryParams.payload.userId בבקשה לזיהוי כוונות, ו-Dialogflow CX מספק לכם את הערך הזה דרך השדה WebhookRequest.payload.userId.
wait-open	אופציונלי	מאפיין בוליאני שמעכב את האירוע המותאם אישית שמוגדר במאפיין intent עד שתיבת הדו-שיח נפתחת בפועל.

התאמות אישיות של CSS

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

שימו לב: התאמה אישית של צבעים לא תוצג ב-Internet Explorer 11, כי הוא לא תומך במשתני CSS. במקום זאת, יוצגו צבעי ברירת המחדל.

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

משתנה CSS	המאפיין המושפע
df-messenger-bot-message	צבע הרקע של הבועה בהודעות של נציגים.
df-messenger-button-titlebar-color	הצבע של הכפתור הצף ושל סרגל הכותרת של תיבת הדו-שיח של הצ'אט.
df-messenger-button-titlebar-font-color	צבע הגופן של הכותרת בסרגל הכותרת.
df-messenger-chat-background-color	הצבע של הרקע של תיבת הדו-שיח בצ'אט.
df-messenger-font-color	צבע הגופן של ההודעות.
df-messenger-input-box-color	צבע הרקע של תיבת הקלט להזנת הטקסט.
df-messenger-input-font-color	צבע הגופן של תיבת הקלט.
df-messenger-input-placeholder-font-color	צבע הגופן של טקסט הפלייסולדר בתיבת קלט הטקסט.
df-messenger-minimized-chat-close-icon-color	הצבע של סמל הסגירה בתצוגה של צ'אט סגור.
df-messenger-send-icon	הצבע של סמל השליחה בתיבת קלט הטקסט.
df-messenger-user-message	צבע הרקע של הבועה בהודעות של המשתמשים.

קוד לדוגמה

<style>
  df-messenger {
   --df-messenger-bot-message: #878fac;
   --df-messenger-button-titlebar-color: #df9b56;
   --df-messenger-chat-background-color: #fafafa;
   --df-messenger-font-color: white;
   --df-messenger-send-icon: #878fac;
   --df-messenger-user-message: #479b3d;
  }
</style>

ההגדרות שלמעלה יגרמו ל:

אירועי JavaScript

‫Dialogflow Messenger מפעיל מגוון אירועים שאפשר ליצור עבורם event listeners.

יעד האירוע של האירועים האלה הוא הרכיב df-messenger.

כדי להוסיף רכיב event listener לרכיב df-messenger, מוסיפים את קוד ה-JavaScript הבא, כאשר event-type הוא אחד משמות האירועים שמתוארים בהמשך:

const dfMessenger = document.querySelector('df-messenger');
dfMessenger.addEventListener('event-type', function (event) {
  // Handle event
  ...
});

סוגי האירועים הנתמכים:

df-accordion-clicked

האירוע הזה מתרחש כשמשתמש לוחץ על רכיב אקורדיון. מבנה האירוע נראה כך:

element: {
  title: string,
  subtitle: string,
  image: {
    src: {rawUrl: string}
  },
  text: string
}

df-button-clicked

האירוע הזה מתרחש כשמשתמש לוחץ על רכיב לחצן. מבנה האירוע נראה כך:

element: {
  icon: {
    type: string,
    color: string
  },
  text: string,
  link: string,
  event: EventInput,
  payload: {}
}

df-chip-clicked

האירוע הזה מתרחש כשמשתמש בוחר הצעות קשורות. מבנה האירוע נראה כך:

query: string // Text of the suggestion chip that was selected.

df-info-card-clicked

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

element: {
  title: string,
  image: {
    src: {rawUrl: string}
  },
  actionLink: string
}

df-list-element-clicked

האירוע הזה מתרחש כשמשתמש לוחץ על פריט ברשימה. מבנה האירוע נראה כך:

element: {
  title: string,
  subtitle: string,
  image: {
    src: {rawUrl}
  },
  event: {
    name: string
  },
  payload: {}
}

df-messenger-error

האירוע הזה מתרחש כש-Dialogflow API שולח קוד סטטוס של שגיאה. מבנה האירוע נראה כך:

error: {
  "error": {
    "code": <error_code>,
    "message": <error_message>,
    "status": <error_status>
  }
}

df-messenger-loaded

האירוע הזה מופעל כשהרכיב df-messenger נטען ומאותחל במלואו.

df-request-sent

האירוע הזה מתרחש כשמתבצעת בקשה ל-Dialogflow API. אפשר להשתמש באירוע הזה, יחד עם df-response-received, כדי לעקוב אחרי זמן האחזור של הבקשה. מבנה האירוע נראה כך:

requestBody: {
  "queryParams": {
    object(QueryParameters)
  },
  "queryInput": {
    object(QueryInput)
  },
  "inputAudio": string
}

df-response-received

האירוע הזה מתרחש כשמתקבלת תגובה מ-Dialogflow API. מבנה האירוע נראה כך:

response: detectIntentResponse

df-user-input-entered

האירוע הזה מתרחש כשמשתמש הקצה מזין שאילתה. מבנה האירוע נראה כך:

input: string // Text entered by user

פונקציות JavaScript

רכיב df-messenger מספק פונקציות שאפשר להפעיל כדי להשפיע על ההתנהגות שלו.

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

renderCustomText

הפונקציה הזו מעבדת הודעת טקסט פשוטה, כאילו היא הגיעה מ-Dialogflow CX כתגובה פשוטה של טקסט.

לדוגמה:

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

renderCustomCard

הפונקציה הזו מעבדת כרטיס בהתאמה אישית, כאילו הוא הגיע מ-Dialogflow CX fulfillment. הפורמט של תגובת המטען הייעודי (payload) המותאם אישית מוגדר בקטע Fulfillment.

לדוגמה:

const dfMessenger = document.querySelector('df-messenger');
const payload = [
  {
    "type": "info",
    "title": "Info item title",
    "subtitle": "Info item subtitle",
    "image": {
      "src": {
        "rawUrl": "https://example.com/images/logo.png"
      }
    },
    "actionLink": "https://example.com"
  }];
dfMessenger.renderCustomCard(payload);

showMinChat

הפונקציה הזו מציגה גרסה מינימלית של רשימות הודעות.

לדוגמה:

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

טיפול בהזמנות

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

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

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

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

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

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

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

שם	סוג	תיאור
type	מחרוזת	סוג התגובה: 'מידע'
title	מחרוזת	כותרת הכרטיס
subtitle	מחרוזת	כותרת משנה של הכרטיס
image	אובייקט	תמונה
image.src	אובייקט	מקור התמונה
image.src.rawUrl	מחרוזת	כתובת URL לתמונה שגלוי לכולם
actionLink	מחרוזת	כתובת URL שאליה המשתמש מועבר כשהוא לוחץ על הכרטיס

לדוגמה:

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

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

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

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

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

לדוגמה:

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

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

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

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

שם	סוג	תיאור
type	מחרוזת	סוג התגובה: 'תמונה'
rawUrl	מחרוזת	כתובת URL לתמונה שגלוי לכולם
accessibilityText	מחרוזת	טקסט חלופי לתמונה

לדוגמה:

{
  "richContent": [
    [
      {
        "type": "image",
        "rawUrl": "https://example.com/images/logo.png",
        "accessibilityText": "Example logo"
      }
    ]
  ]
}

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

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

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

שם	סוג	תיאור
type	מחרוזת	סוג התגובה: 'לחצן'
icon	אובייקט	סמל של כפתור
icon.type	מחרוזת	סמל מספריית הסמלים של Material. סמל ברירת המחדל הוא חץ
icon.color	מחרוזת	קוד הקסדצימלי של הצבע
text	מחרוזת	טקסט של לחצן
link	מחרוזת	כתובת ה-URL שאליה המשתמש מועבר כשהוא לוחץ על הלחצן
event	אובייקט	אירוע Dialogflow CX שמופעל כשלוחצים על הלחצן.

לדוגמה:

{
  "richContent": [
    [
      {
        "type": "button",
        "icon": {
          "type": "chevron_right",
          "color": "#FF9800"
        },
        "text": "Button text",
        "link": "https://example.com",
        "event": {
          "name": ""
        }
      }
    ]
  ]
}

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

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

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

שם	סוג	תיאור
type	מחרוזת	סוג התגובה: 'רשימה'
title	מחרוזת	שם האפשרות
subtitle	מחרוזת	כותרת משנה של אפשרות
event	אובייקט	אירוע Dialogflow CX שמופעל כשלוחצים על האפשרות.

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

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

לדוגמה:

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

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

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

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

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

לדוגמה:

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

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

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

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

שם	סוג	תיאור
type	מחרוזת	סוג התשובה: 'צ'יפים'
options	array<object>	מערך של אובייקטי אפשרויות
options[].text	מחרוזת	טקסט של אפשרות
options[].image	אובייקט	תמונה של אפשרות
options[].image.src	אובייקט	מקור התמונה של האפשרות
options[].image.src.rawUrl	מחרוזת	כתובת ה-URL הציבורית של התמונה
options[].link	מחרוזת	קישור לאפשרות

לדוגמה:

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

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

אפשר להשתמש ברכיבים הנפרדים של הודעות מורכבות ב-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",
        "actionLink": "https://cloud.google.com/dialogflow/docs"
      },
      {
        "type": "chips",
        "options": [
          {
            "text": "Case Studies",
            "link": "https://cloud.google.com/dialogflow/case-studies"
          },
          {
            "text": "Docs",
            "link": "https://cloud.google.com/dialogflow/docs"
          }
        ]
      }
    ]
  ]
}

ניפוי באגים

כדי לבדוק את הנציג באופן מקומי באמצעות Dialogflow CX Messenger:

• מטמיעים את רכיב Dialogflow CX Messenger בדף כמו שמתואר בקטע התאמות אישיות של HTML.
• מפעילים שרת HTTP מקומי לדף הזה עם יציאה ספציפית.
• אפשר להיכנס לדף הזה בכתובת http://localhost:port_number.