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

Dialogflow Messenger

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

צילום מסך של Messenger

מגבלות

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

הגדרה ובדיקה

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

נכנסים למסוף Dialogflow ES.
בתפריט הצדדי שמימין, לוחצים על Integrations (שילובים).
לוחצים על Dialogflow Messenger.
נפתחת תיבת דו-שיח של הגדרות.
בוחרים סביבה.
לוחצים על Enable.
מעתיקים את קוד ההטמעה כדי להדביק אותו באתר.
כדי לבדוק את הנציג, לוחצים על Try It Now.
בפינה השמאלית התחתונה של החלון מופיע כפתור עם הלוגו של 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 ציבורית. גודל הסמל צריך להיות 36px על 36px.
`chat-title`	חובה	הכותרת שמוצגת בחלק העליון של תיבת הדו-שיח של הצ'אט. השדה הזה מאוכלס מראש בשם של הסוכן.
`expand`	אופציונלי	מאפיין בוליאני שקובע שתיבת הדו-שיח של הצ'אט תיפתח כשהדף ייטען. כברירת מחדל, תיבת הדו-שיח של הצ'אט סגורה כשטעינת הדף מתבצעת.
`intent`	אופציונלי	האירוע שמשמש להפעלת ה-intent הראשון כשתיבת הדו-שיח של הצ'אט נפתחת. השדה הזה מאוכלס מראש באירוע `WELCOME`.
`language-code`	חובה	קוד השפה שמוגדר כברירת מחדל ל-Intent הראשון. השדה הזה מאוכלס מראש בשפת ברירת המחדל של הנציג.
`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 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,
    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();

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

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

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

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

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

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

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

צילום מסך של Messenger

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

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

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

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

צילום מסך של Messenger

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

שם	סוג	תיאור
`type`	מחרוזת	סוג התשובה: "תיאור"
`title`	מחרוזת	כותרת הכרטיס
`text`	array<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`	מחרוזת	סוג התגובה: "button"
`icon`	אובייקט	סמל של כפתור
`icon.type`	מחרוזת	סמל מספריית הסמלים של Material. סמל ברירת המחדל הוא חץ
`icon.color`	מחרוזת	קוד הקסדצימלי של הצבע
`text`	מחרוזת	טקסט הכפתור
`link`	מחרוזת	כתובת ה-URL שאליה המשתמשים יועברו כשהם ילחצו על הכפתור
`event`	אובייקט	אירוע Dialogflow שמופעל כשלוחצים על הכפתור, ראו חומר עזר בנושא EventInput REST

לדוגמה:

{
  "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`	מחרוזת	סוג התשובה: "list"
`title`	מחרוזת	כותרת האפשרות
`subtitle`	מחרוזת	כותרת משנה של האפשרות
`event`	אובייקט	אירוע Dialogflow שמופעל כשלוחצים על האפשרות, ראו חומר עזר בנושא EventInput REST

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

שם	סוג	תיאור
`type`	מחרוזת	סוג התגובה: "divider"

לדוגמה:

{
  "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`	מחרוזת	סוג התשובה: "accordion"
`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`