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（如果已指定）