אירועי JavaScript ב-Dialogflow CX Messenger

אתם יכולים ליצור רכיבי event listener למגוון אירועים שמופעלים על ידי Dialogflow CX Messenger. מידע נוסף זמין במאמר רכיבי event listener. בחלק מהאירועים יש שדה אובייקט detail שמספק מידע נוסף על האירוע.

df-messenger-loaded

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

מאפייני הפרטים:

• ללא

לדוגמה:

window.addEventListener('df-messenger-loaded', () => {
  // Messenger is now ready.
});

df-chat-open-changed

מתרחש כשפותחים או סוגרים את הצ'אט.

הערה: האפשרות הזו פעילה רק אם משתמשים ב-df-messenger-chat-bubble.

מאפייני הפרטים:

• ‫isOpen (boolean): המצב החדש של הצ'אט

לדוגמה:

window.addEventListener('df-chat-open-changed', (event) => {
  console.log(`Chat is ${event.detail.isOpen ? 'open' : 'closed'}`);
});

df-user-input-entered

מתרחש כשמזינים טקסט בצ'אט.

מאפייני הפרטים:

• ‫input (string): הערך שהמשתמש הזין

לדוגמה:

window.addEventListener('df-user-input-entered', (event) => {
  console.log(event.detail.input);
});

df-request-sent

מתרחשת כששולחים בקשה לקצה העורפי של Dialogflow CX.

הערה: אפשר לשנות את הבקשה. השינויים יופיעו בבקשה שתשלחו. אם ברירת המחדל של האירוע נמנעת, הבקשה לא תישלח.

מאפייני הפרטים:

• ‫data (object): מאגר נתונים
• ‫data.requestBody‏ (object): בקשה שנשלחה

לדוגמה:

window.addEventListener('df-request-sent', (event) => {
  console.log('Request', event.detail.data.requestBody);
});

window.addEventListener('df-request-sent', (event) => {
  event.preventDefault(); // Messenger won't send the request.

  // Send request yourself.
});

df-response-received

מתרחש כשמתקבלת תשובה מתיבת הדו-שיח של הסוכן.

הערה: אפשר לשנות את ההודעות, והשינויים ישפיעו על האופן שבו הנציג מטפל בתשובות. אם ברירת המחדל של האירוע נמנעת, הנציג לא יטפל בתגובה.

מאפייני הפרטים:

• ‫data (object): מאגר נתונים
• ‫data.messages (object[]): רשימה של הודעות תגובה מנותחות
• ‫raw (object): התשובה המילולית שהתקבלה

לדוגמה:

window.addEventListener('df-response-received', (event) => {
  // Remove all non-text messages.
  event.detail.data.messages = event.detail.data.messages.filter(message => {
    return message.type === 'text';
  });
});

window.addEventListener('df-response-received', (event) => {
  event.preventDefault(); // Messenger won't handle the response.

  const messenger = document.querySelector('df-messenger');
  event.detail.data.messages.forEach(message => {
    if (message.type === 'text') {
      messenger.renderCustomText(message.text);
    }
  });
});

df-messenger-error

מתרחשת כשבקשה לקצה העורפי נכשלת.

מאפייני הפרטים:

• ‫error (object): השגיאה שהתרחשה

לדוגמה:

window.addEventListener('df-messenger-error', (event) => {
  console.log(event.detail.error);
});

df-session-expired

מתרחש כשהסשן עם הנציג מסתיים.

מאפייני הפרטים:

• ללא

לדוגמה:

window.addEventListener('df-session-expired', () => {
  const messenger = document.querySelector('df-messenger');
  messenger.renderCustomText(`*Session expired*`, /* isBot= */ true);
  messenger.startNewSession({ retainHistory: true });
});

df-session-ended

מתרחש כשהסשן מסתיים.

מאפייני הפרטים:

• ללא

לדוגמה:

window.addEventListener('df-session-ended', () => {
  const messenger = document.querySelector('df-messenger');
  messenger.renderCustomText(`*Session ended*`, /* isBot= */ true);
  messenger.startNewSession({ retainHistory: true });
});

df-url-suggested

האירוע מתרחש כשמסופקות כתובות URL של משאבים מוצעים.

מאפייני הפרטים:

• suggestedUrls (string[]): רשימה של כתובות URL מוצעות

לדוגמה:

window.addEventListener('df-url-suggested', (event) => {
  if (event.detail.suggestedUrls.length === 1) {
    window.location.href = event.detail.suggestedUrls[0];
  }
});

df-accordion-clicked

מתרחש כשלוחצים על אקורדיון.

מאפייני הפרטים:

• ‫actionLink (string): ה-href של העוגן של האקורדיון, אם צוין

df-button-clicked

מתרחש כשלוחצים על לחצן.

מאפייני הפרטים:

• ‫actionLink (string): ה-href של העוגן של הכפתור שנלחץ, אם צוין
• ‫event (string): אירוע של הכפתור שנלחץ, אם צוין
• languageCode (string): קוד השפה של האירוע, אם צוין, אחרת קוד השפה הראשי
• ‫text (string): הטקסט של הכפתור שנלחץ

window.addEventListener('df-button-clicked', (event) => {
  event.preventDefault(); // Messenger won't send the "event" request.

  // Handle "event" yourself.
});

df-chip-clicked

מתרחש כשלוחצים על צ'יפ.

מאפייני הפרטים:

• ‫actionLink (string): מאפיין href של הצ'יפ שנלחץ, אם צוין
• ‫text (string): הטקסט של הצ'יפ שנלחץ

df-citation-clicked

מתרחש כשלוחצים על ציטוט.

מאפייני הפרטים:

• ‫actionLink (string): ה-href של העוגן של הציטוט
• title (string): שם הציטוט

df-info-card-clicked

מתרחש כשלוחצים על כרטיס מידע.

מאפייני הפרטים:

• ‫actionLink (string): ה-href של העוגן של כרטיס המידע
• ‫title (string): הכותרת של כרטיס המידע

df-list-element-clicked

מתרחש כשלוחצים על רכיב ברשימה.

מאפייני הפרטים:

• ‫actionLink (string): ה-href של העוגן של רכיב הרשימה, אם צוין
• ‫event (string): אירוע של רכיב הרשימה שנלחץ, אם צוין
• languageCode (string): קוד השפה של האירוע, אם צוין, אחרת קוד השפה הראשי
• ‫title (string): שם הרכיב ברשימה

window.addEventListener('df-list-element-clicked', (event) => {
  event.preventDefault(); // Messenger won't send the "event" request.

  // Handle "event" yourself.
});

df-image-clicked

מתרחש כשלוחצים על תמונה.

מאפייני הפרטים:

• actionLink (string): מאפיין href של עוגן התמונה, אם צוין