Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

Dialogflow Messenger

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

צילום מסך של Messenger

מגבלות

השילוב הזה תומך רק בשפת ברירת המחדל של נציג התמיכה.

הגדרה ובדיקה

כדי להגדיר ולהפעיל את Dialogflow Messenger:

עוברים אל מסוף Dialogflow ES.
בתפריט הצד הימני, לוחצים על שילובים.
לוחצים על Dialogflow Messenger.
תיפתח תיבת דו-שיח של הגדרות.
בוחרים סביבה.
לוחצים על Enable.
מעתיקים את קוד ההטמעה כדי להדביק אותו באתר.
לוחצים על אני רוצה לנסות כדי לבדוק את הסוכן.
בפינה השמאלית התחתונה של החלון, מופיע לחצן עם הלוגו של Dialogflow. לוחצים על הלחצן הזה.
תיפתח תיבת דו-שיח של צ'אט שבה תוכלו לנהל אינטראקציה.
בסיום הבדיקה, סוגרים את תיבת הדו-שיח של הצ'אט.
לוחצים על Close (סגירה) בתיבת הדו-שיח של ההגדרות.

הטמע

מדביקים את קוד ההטמעה שהעתקתם למעלה בדף אינטרנט באתר שלכם. רכיבי ה-HTML‏ <script> ו-<df-messenger> צריכים להיות ברכיב <body> של הדף. כדי לאפשר פריסות רספונסיביות, צריך להוסיף לדף גם את הקוד הבא:

<meta name="viewport" content="width=device-width, initial-scale=1">

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

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

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

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

אתם יכולים להתאים אישית את הסגנון של תיבת הדו-שיח של הצ'אט על ידי הגדרת משתני 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>

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

צילום מסך של Messenger

אירועי 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,
    parameters: {},
    languageCode: 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 מספק פונקציות שאפשר להפעיל כדי להשפיע על ההתנהגות שלו.

`renderCustomText`

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

לדוגמה:

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

`renderCustomCard`

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

לדוגמה:

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) בהתאמה אישית בכרטיסיית התשובה Default של הכוונה. תשובות הטקסט משמשות לתשובות בסיסיות של הסוכן, וה-payloads המותאמים אישית משמשים לתשובות מפורטות. הפורמט של המטען הייעודי (payload) המותאם אישית לכל סוגי התגובות הוא:

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

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

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

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

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

צילום מסך של Messenger

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

שם	סוג	תיאור
`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"
      }
    ]
  ]
}

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

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

צילום מסך של Messenger

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

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

לדוגמה:

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

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

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

צילום מסך של Messenger

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

שם	סוג	תיאור
`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 שמופעל כשלוחצים על הלחצן. אפשר לעיין בהפניה ל-REST של EventInput

לדוגמה:

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

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

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

צילום מסך של Messenger

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

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

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

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

לדוגמה:

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

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

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

צילום מסך של Messenger

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

שם	סוג	תיאור
`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"
      }
    ]
  ]
}

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

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

צילום מסך של Messenger

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

שם	סוג	תיאור
`type`	מחרוזת	סוג התגובה: 'צ'יפים'
`options`	array<object>	מערך של אובייקטים מסוג Option
`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 Messenger כדי ליצור כרטיס בהתאמה אישית שמתאים לצרכים שלכם. דוגמה לשימוש בחלק מהרכיבים שצוינו למעלה:

צילום מסך של Messenger

{
  "richContent": [
    [
      {
        "type": "image",
        "rawUrl": "https://example.com/images/logo.png",
        "accessibilityText": "Dialogflow across platforms"
      },
      {
        "type": "info",
        "title": "Dialogflow",
        "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 Messenger באופן מקומי:

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

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

מגבלות

הגדרה ובדיקה

הטמע

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

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

אירועי JavaScript

df-accordion-clicked

df-button-clicked

df-chip-clicked

df-info-card-clicked

df-list-element-clicked

df-messenger-error

df-messenger-loaded

df-request-sent

df-response-received

df-user-input-entered

פונקציות JavaScript

renderCustomText

renderCustomCard

showMinChat

הודעות עם תשובות עשירות

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

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

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

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

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

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

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

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

ניפוי באגים

Dialogflow Messenger

`df-accordion-clicked`

`df-button-clicked`

`df-chip-clicked`

`df-info-card-clicked`

`df-list-element-clicked`

`df-messenger-error`

`df-messenger-loaded`

`df-request-sent`

`df-response-received`

`df-user-input-entered`

`renderCustomText`

`renderCustomCard`

`showMinChat`