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 后端的请求。
详细属性:
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
用户点击了折叠式动作条。
详细属性:
- 无
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
):引用的锚点 hreftitle
(string
):引文的标题
df-info-card-clicked
用户点击了信息卡片。
详细属性:
actionLink
(string
):信息卡片的锚点 hreftitle
(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(如果已指定)