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

זהירות: הגרסה הקודמת של Dialogflow CX Messenger הוצאה משימוש. ‫Dialogflow CX Messenger היה תכונה בגרסת טרום-השקה (Preview) ולא היה זמין לכלל המשתמשים (GA). מידע נוסף זמין במאמר Dialogflow CX Messenger.

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

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

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

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

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

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

כדי לעבור לגרסה החדשה, צריך לבצע את השלבים הבאים:

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

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

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

לרכיב ה-HTML‏ df-messenger יש את המאפיינים הבאים:

מאפיין	מדיניות הקלט	ערך
agent-id	חובה	מזהה הסוכן שמשויך לסוכן. השדה הזה מאוכלס מראש במזהה הסוכן שלכם.
chat-icon	אופציונלי	הסמל של הכפתור לפתיחת תיבת הדו-שיח של הצ'אט. הסמל של Dialogflow CX הוא ברירת המחדל. השדה הזה חייב להיות כתובת URL ציבורית. גודל הסמל צריך להיות 36px על 36px.
chat-title	חובה	הכותרת שמוצגת בחלק העליון של תיבת הדו-שיח של הצ'אט. השדה הזה מאוכלס מראש בשם של הסוכן.
df-cx	חובה	מציין שהאינטראקציה היא עם סוכן CX. משתמשים בערך true.
expand	אופציונלי	מאפיין בוליאני שקובע שתיבת הדו-שיח של הצ'אט תיפתח כשהדף ייטען. כברירת מחדל, תיבת הדו-שיח של הצ'אט סגורה כשטעינת הדף מתבצעת.
intent	אופציונלי	אירוע מותאם אישית שמופעל כשתיבת הדו-שיח של הצ'אט נפתחת. אפשר להשתמש בגורם מטפל באירועים שמופעל באירוע הזה ומפיק את ההודעה הראשונה של הנציג.
language-code	חובה	קוד השפה שמוגדר כברירת מחדל ל-Intent הראשון. השדה הזה מאוכלס מראש בשפת ברירת המחדל של הנציג.
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 listener.

יעד האירוע של האירועים האלה הוא הרכיב 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. הפורמט של התגובה עם המטען הייעודי (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();

מילוי בקשות

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

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

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

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

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

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

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

שם	סוג	תיאור
type	מחרוזת	סוג התגובה: "info".
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	array<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	מחרוזת	סוג התגובה: "divider".

לדוגמה:

{
  "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	מחרוזת	כתובת ה-URL של הקישור לאפשרות.

לדוגמה:

{
  "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.