Dialogflow CX Messenger

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

ממשק Dialogflow CX Messenger

הגדרה

השילוב הזה מאפשר לכם לספק גישה לשאילתות של סוכני משתמשי קצה מאומתים או לא מאומתים.

הגדרה לא מאומתת

כדי להגדיר גישה לא מאומתת לסוכן Dialogflow CX Messenger:

  1. נכנסים למסוף Dialogflow CX.
  2. בוחרים את הפרויקט ב-Google Cloud.
  3. בוחרים את הסוכן.
  4. לוחצים על הכרטיסייה ניהול.
  5. בתפריט הצדדי שמימין, לוחצים על Integrations (שילובים).
  6. לוחצים על Connect (קישור) ב-Dialogflow CX Messenger.
  7. נפתחת תיבת דו-שיח של הגדרות.
  8. אם השילוב כבר הוגדר לנציג הזה, יופיע קוד HTML שניתן להטמעה. לא משנה אם אתם רוצים לאמת או לא, לחצו על הכפתור Disable...‎ בתחתית תיבת הדו-שיח כדי שתוכלו לשנות את ההגדרות בשלב הבא.
  9. בוחרים סביבה.
  10. בוחרים באפשרות Unauthenticated API (API לא מאומת).
  11. בוחרים סגנון.
  12. אפשר להגביל את הגישה לדומיין.
  13. לוחצים על Enable the unauthenticated API.
  14. בתיבת הדו-שיח יוצג קוד ה-HTML שניתן להטמיע באתר. מעתיקים את הקוד הזה.
  15. לוחצים על סיום.

הגדרה מאומתת

כדי להגדיר גישה מאומתת לנציג של Dialogflow CX Messenger:

  1. נכנסים למסוף Dialogflow CX.
  2. בוחרים את הפרויקט ב-Google Cloud.
  3. בוחרים את הסוכן.
  4. לוחצים על הכרטיסייה ניהול.
  5. בתפריט הצדדי שמימין, לוחצים על Integrations (שילובים).
  6. לוחצים על Connect (קישור) ב-Dialogflow CX Messenger.
  7. נפתחת תיבת דו-שיח של הגדרות.
  8. אם השילוב כבר הוגדר לנציג הזה, יופיע קוד HTML שניתן להטמעה. לא משנה אם אתם רוצים לאמת או לא, לחצו על הכפתור Disable...‎ בתחתית תיבת הדו-שיח כדי שתוכלו לשנות את ההגדרות בשלב הבא.
  9. בוחרים סביבה.
  10. בוחרים באפשרות Authorized API (API מורשה).
  11. בוחרים סגנון.
  12. אפשר להגביל את הגישה לדומיין.
  13. לוחצים על הפעלת ה-API המורשה.
  14. בתיבת הדו-שיח יוצג קוד ה-HTML שניתן להטמיע באתר. מעתיקים את הקוד הזה.
  15. לוחצים על סיום.
  16. מגדירים את לקוח ה-OAuth:
    1. יוצרים מסך הסכמה ל-OAuth לארגון. מוסיפים את https://www.googleapis.com/auth/cloud-platform כהיקף הרשאות נדרש.
    2. יצירת מזהה לקוח ב-OAuth 2.0. בקטע Authorized JavaScript origins, מציינים את מקורות ה-HTTP שמורשים לארח את הנציג ולשלוח אליו שאילתות. לדוגמה, https://your-company.com.
    3. לתת למשתמשי הקצה הרשאה לשלוח שאילתות לנציג. מוסיפים כל אחד ממשתמשי הקצה או קבוצה כחשבון משתמש עם התפקידים לקוח Dialogflow API וצרכן של שימוש בשירות.

הטמע

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

אם אתם משתמשים בשילוב מאומת, הגדירו את המאפיין oauth-client-id של <df-messenger> למזהה הלקוח של לקוח OAuth. אם אתם רוצים להשתמש בזהויות של משתמשי הקצה לצורך אימות של כלים, הגדירו את המאפיין access-token-name עם כל שם שתרצו. לאחר מכן משתמשים בטוקן למוכ"ז עם הערך $session.params.ACCESS_TOKEN_NAME לאימות הכלי.

מעדכנים את כל המאפיינים האחרים שצריך לעדכן.

כדי לאפשר פריסות רספונסיביות, צריך להוסיף גם את הקוד הבא לרכיב <head>:

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

התאמה אישית

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

JavaScript

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

דוגמה

בדוגמה הבאה אפשר לראות התאמה אישית של HTML, התאמה אישית של CSS וטיפול באירועים של JavaScript:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
  <meta http-equiv="Pragma" content="no-cache" />
  <meta http-equiv="Expires" content="0" />
  <title>My chat</title>
  <style>
    df-messenger {
      /*
       * Customize as required. df-messenger will fill the
       * space that is provided.
      */
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      width: 320px;
    }
  </style>
  <script src="https://www.gstatic.com/dialogflow-console/fast/df-messenger/prod/v1/df-messenger.js"></script>
</head>
<body>
<df-messenger
    location="global" <!-- TODO: update agent location as needed -->
    project-id="my-project-id" <!-- TODO: update project ID -->
    agent-id="my-agent-id" <!-- TODO: update agent ID -->
    language-code="en" <!-- TODO: update agent language as needed -->
>
  <df-messenger-chat
      chat-title="Agent Name" <!-- TODO: update dialog title as needed -->
  ></df-messenger-chat>
</df-messenger>

<script>
  // An example of handling events: Navigate to the first suggested URL.
  document.addEventListener('df-url-suggested', (event) => {
    if (Array.isArray(event.detail.suggestedUrls) &&
      event.detail.suggestedUrls.length) {
      window.location.href = event.detail.suggestedUrls[0];
  }
});
</script>
</body>
</html>

מילוי בקשות

אתם יכולים להשתמש בהרבה סוגים של תגובות למילוי בקשות לתגובות של הנציג.

משוב על התשובה

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

רכיב משוב בהתאמה אישית

כדי לציין רכיב משוב מותאם אישית, צריך להגדיר רכיב מותאם אישית חדש באתר. כדי לשלוח את המשוב, הרכיב צריך להפעיל אירוע df-custom-submit-feedback-clicked. השדה detail שכלול חייב להיות מחרוזת.

class CustomFeedbackElement extends HTMLElement {
  constructor() {
    super();
    // It is not strictly required but recommended to contain the custom
    // element in a shadow root.
    this.renderRoot = this.attachShadow({mode: 'open'});
  }

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

    // Build the component as required.
    const button = document.createElement('button');
    button.innerText = 'Submit';
    button.addEventListener('click', () => {
      this._onSubmitClick();
    });
    wrapper.appendChild(button);

    this.renderRoot.appendChild(wrapper);
  }

  // Called when Submit button is clicked.
  _onSubmitClick() {
    const event = new CustomEvent("df-custom-submit-feedback-clicked", {
      // `detail` may be any string,
      // this will be sent to the backend to be stored.
      detail: JSON.stringify({
        "usefulness": 2,
        "accuracy": 3,
      }),
      // Required to propagate up the DOM tree
      // https://developer.mozilla.org/en-US/docs/Web/API/Event/bubbles
      bubbles: true,
      // Required to propagate across ShadowDOM
      // https://developer.mozilla.org/en-US/docs/Web/API/Event/composed
      composed: true,
   });
   this.dispatchEvent(event);
  }
}

(function() {
  // Registers the element. This name must be "df-external-custom-feedback".
  customElements.define('df-external-custom-feedback', CustomFeedbackElement);
})();

ניפוי באגים

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

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