Dialogflow CX Messenger JavaScript 事件

您可以為 Dialogflow CX Messenger 觸發的各種事件建立事件監聽器。詳情請參閱「事件監聽器」。部分事件含有 detail 物件欄位，可提供事件的詳細資訊。

df-messenger-loaded

首次載入代理對話時發生。

詳細資料屬性：

  • 無

例如：

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

df-chat-open-changed

開啟或關閉即時通訊時觸發。

詳細資料屬性：

  • 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

提供建議資源的網址時觸發。

詳細資料屬性：

  • suggestedUrls (string[])：建議網址清單

例如：

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 (如有指定)