Dialogflow 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(); // Dialogflow 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(); // Dialogflow 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(object)：用户点击的按钮的事件（如果已指定）
df-chip-clicked
用户点击了某个条状标签。
详情属性：
actionLink(string)：所点击条状标签的锚点 href（如果已指定）text(string)：用户点击的条状标签文本
df-citation-clicked
用户点击了某个引用。
详情属性：
actionLink(string)：引用的锚标记 href
df-info-card-clicked
用户点击了信息卡片。
详情属性：
actionLink(string)：信息卡片的锚标记 href
df-list-element-clicked
用户点击了某个列表元素。
详情属性：
actionLink(string)：列表元素的锚点 href（如果指定）event(object)：用户点击的列表元素的事件（如果已指定）languageCode(string)：列表元素的语言代码（如果指定）
df-image-clicked
用户点击了一张图片。
详情属性：
actionLink(string)：图片的锚点 href（如果已指定）