Dialogflow CX Messenger

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

צילום מסך של Dialogflow CX Messenger

הגדרה

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

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

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

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

הטמע

מדביקים את קוד ההטמעה שהעתקתם למעלה בדף אינטרנט באתר שלכם. רכיבי ה-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 שמוכל ב-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.