此集成为您的代理提供了可嵌入到您网站的可自定义聊天对话框。
设置
此集成可允许通过身份验证或未经身份验证的最终用户代理查询访问。
未通过身份验证的设置
如需设置对 Dialogflow Messenger 代理的未经身份验证的访问权限，请执行以下操作：
- 转到 Dialogflow CX 控制台。
- 选择您的 Google Cloud 项目。
- 选择您的代理。
- 选择管理标签页。
- 点击左侧边栏菜单中的集成。
- 点击 Dialogflow Messenger 上的连接。
- 此时将打开一个配置对话框。
- 如果之前已为此代理设置了集成，您将看到可嵌入的 HTML 代码。无论您想要了解哪些已通过身份验证，哪些需要未通过身份验证，请点击对话框底部的停用...按钮，以便在下一步中重新配置设置。
- 选择环境。
- 选择未通过身份验证的 API。
- 选择一种风格。
- （可选）限制网域访问权限。
- 点击启用未经身份验证的 API。
- 该对话框会显示可嵌入到您网站上的可嵌入 HTML 代码。 复制此验证码。
- 点击完成。
基于身份验证的设置
如需设置对 Dialogflow Messenger 代理的经过身份验证的访问权限，请执行以下操作：
- 转到 Dialogflow CX 控制台。
- 选择您的 Google Cloud 项目。
- 选择您的代理。
- 选择管理标签页。
- 点击左侧边栏菜单中的集成。
- 点击 Dialogflow Messenger 上的连接。
- 此时将打开一个配置对话框。
- 如果之前已为此代理设置了集成，您将看到可嵌入的 HTML 代码。无论您想要了解哪些已通过身份验证，哪些需要未通过身份验证，请点击对话框底部的停用...按钮，以便在下一步中重新配置设置。
- 选择环境。
- 选择已获授权的 API。
- 选择一种风格。
- （可选）限制网域访问权限。
- 点击启用已获授权的 API。
- 该对话框会显示可嵌入到您网站上的可嵌入 HTML 代码。 复制此验证码。
- 点击完成。
- 设置 OAuth 客户端：
- 为您的组织创建 OAuth 权限请求页面。
将
./auth/cloud-platform添加为必需的范围。 - 创建 OAuth 2.0 客户端 ID。
在已获授权的 JavaScript 来源下，指定允许托管和查询代理的 HTTP 来源。例如
https://your-company.com。 - 向最终用户提供查询代理的权限。将每个最终用户或一个群组添加为主帐号，并为其授予 Dialogflow API 客户端角色。
- 为您的组织创建 OAuth 权限请求页面。
将
嵌入版
将您之前复制的嵌入代码粘贴到您网站上的网页中。<script> 和 <df-messenger> HTML 元素应位于网页的 <body> 元素中。
如果您使用的是经过身份验证的集成，请将 <df-messenger> 的 oauth-client-id 属性设置为您的 OAuth 客户端 ID。
更新任何其他需要更新的属性。
如需支持自适应布局，请将以下代码添加到 <head> 元素中：
<meta name="viewport" content="width=device-width, initial-scale=1">
HTML 聊天元素选项
df-messenger 元素的子元素可以是以下任何一种：
df-messenger-chat：代理对话框始终处于打开状态df-messenger-chat-bubble：可以使用打开/关闭气泡按钮打开或关闭代理对话框
HTML 自定义
您可以自定义聊天对话框的显示方式和行为的各个方面。
针对 df-messenger 的 HTML 自定义
df-messenger HTML 元素具有以下特性 (Attribute)：
| 特性 | 输入政策 | 值 |
|---|---|---|
agent-id |
需要 | 与 Dialogflow 代理关联的代理 ID。 |
allow-feedback |
可选 | 设置为 all 以允许最终用户就代理的回答提供反馈。 |
language-code |
需要 | 默认语言代码。 |
project-id |
需要 | 代理的项目 ID。 |
location |
可选 | 代理的区域。默认值为 global。 |
intent |
可选 | 将在聊天对话框打开时调用的自定义事件。您可以使用将针对此事件调用并生成第一条客服人员消息的事件处理脚本。 |
oauth-client-id |
可选 | OAuth 身份验证是必需的。默认值为 null。如果未提供此属性的值，并且启用了 Dialogflow Messenger 的未经身份验证的访问权限，则未经身份验证的用户可以与该代理互动。如果提供了值，代理对话框将叠加“请求身份验证”（文本可以控制，请参阅下文的 request-auth-text）通知，该通知要求用户登录才能使用代理。 |
storage-option |
可选 | 指定对话消息的本地存储空间。如果不应存储消息，请使用 none。如果使用 none，系统将在页面刷新或重新加载时清除所有消息。默认值为 sessionStorage。 |
session-ttl |
可选 | 设为持续会话的时长（以秒为单位），必须严格低于 86400 (1d) 且默认值为 1800（30 分钟）。 |
url-allowlist |
可选 | 允许从以逗号分隔的网址前缀列表加载图片。HTML 或 Markdown 响应中使用的图片网址必须以列出的前缀之一开头。使用 * 可允许所有网址。 |
针对 df-messenger-chat 的 HTML 自定义
df-messenger-chat HTML 元素具有以下特性 (Attribute)：
| 特性 | 输入政策 | 值 |
|---|---|---|
chat-title |
可选 | 聊天框的标题，显示在其上方。 |
chat-subtitle |
可选 | 聊天框的副标题，显示在其上方，位于 chat-title 下方 |
chat-title-icon |
可选 | 聊天框标题中显示的图标，默认位于 chat-title 左侧 |
bot-writing-text |
可选 | 代理书写时显示的文字 |
bot-writing-image |
可选 | 代理编写代码时显示的图片。优先级高于 bot-writing-text。 |
request-auth-text |
可选 | 用于身份验证的按钮文字。 |
placeholder-text |
可选 | 在输入字段中显示的文本（当该值为空时）。默认设置为“提问...”。 |
针对 df-messenger-chat-bubble 的 HTML 自定义
df-messenger-chat-bubble HTML 元素具有与 df-messenger-chat 相同的属性以及下列附加属性：
| 属性 | 输入政策 | 值 |
|---|---|---|
expanded |
可选 | 布尔值，用于确定聊天是否最初处于打开状态。如果未设置此政策，聊天对话中会记住最后一次的状态。 |
chat-icon |
可选 | 聊天气泡的图标。必须是可公开访问的 URI。 |
chat-close-icon |
可选 | 聊天气泡的关闭图标。必须是可公开访问的 URI。 |
chat-collapse-icon |
可选 | 标题栏中“收起”按钮的图标。必须是可公开访问的 URI。 |
anchor |
可选 | 定义聊天对话框相对于打开或关闭气泡的位置。值为以 - 分隔的两个方向单词（top、bottom、left、right）。默认值为 top-left。第一个方向定义锚点，第二个方向定义远离气泡的主展开方向。例如：top-left 位于气泡顶部，并向左上方展开（远离气泡）。 |
chat-width |
可选 | 定义聊天窗口的宽度。数值（以像素为单位）。默认值为 320 像素。 |
chat-height |
可选 | 定义聊天窗口的高度。数值（以像素为单位）。默认值为 480 像素。 |
allow-fullscreen |
可选 | 定义聊天窗口是否可以全屏打开。如果设置为 always，则所有屏幕尺寸都将以全屏模式打开。如果设置为 small，则在屏幕尺寸低于 500px 时打开全屏模式，否则作为正常窗口打开。可能会替换 chat-width、chat-height 和 anchor（如果已设置）。 |
CSS 自定义
您可以通过设置 CSS 变量来自定义聊天对话框的样式。
常规样式
以下 CSS 变量提供了常规样式选项：
| 属性 | 输入政策 | 默认值 | 说明 |
|---|---|---|---|
df-messenger-font-family |
可选 | “Google Sans”“Helvetica Neue”、“sans-serif” | 要在整个 widget 中使用的字体系列 |
df-messenger-font-size |
可选 | 14px | 要在整个 widget 中使用的文本大小 |
df-messenger-font-color |
可选 | #1f1f1f | 要在整个 widget 中使用的文本颜色 |
df-messenger-primary-color |
可选 | #0b57d0 | 整个 widget 中各元素的主要颜色（例如标题栏背景、操作按钮背景等） |
df-messenger-focus-color |
可选 | #1e88e5 | 元素周围聚焦环的颜色 |
df-messenger-focus-color-contrast |
可选 | 白色 | 位于具有背景颜色的父元素（例如标题栏）中时元素周围的聚焦环的颜色 |
df-messenger-chat-border |
可选 | 无 | 对话框的边框 |
df-messenger-chat-border-radius |
可选 | 0 | 对话框的圆角半径 |
样式设置（df-messenger-chat-bubble）
使用 df-messenger-chat-bubble 元素时，可以提供以下 CSS 变量：
| 属性 | 输入政策 | 默认值 | 说明 |
|---|---|---|---|
df-messenger-chat-window-height |
可选 | 480px | 聊天窗口的高度 |
df-messenger-chat-window-width |
可选 | 320 像素 | 聊天窗口的宽度 |
df-messenger-chat-window-offset |
可选 | 16px | 聊天气泡和聊天窗口之间的距离 |
df-messenger-chat-window-box-shadow |
可选 | 无 | 聊天窗口的方框阴影 |
df-messenger-chat-bubble-close-icon-size |
可选 | 24px | 聊天气泡的关闭图标大小 |
df-messenger-chat-collapse-icon-size |
可选 | 未设置 | 标题栏中的收起按钮图标的尺寸 |
df-messenger-chat-bubble-close-icon-transform-rotate |
可选 | -90 度 | 旋转聊天气泡的“关闭”图标，关闭聊天时旋转到 0° |
df-messenger-chat-bubble-size |
可选 | 64px | 聊天气泡的大小 |
df-messenger-chat-bubble-border-radius |
可选 | 32px | 聊天气泡的边框半径 |
df-messenger-chat-bubble-border |
可选 | 无 | 聊天气泡的边框 |
标题栏的样式
对于标题栏，可以提供以下 CSS 变量：
| 属性 | 输入政策 | 默认值 | 说明 |
|---|---|---|---|
df-messenger-titlebar-background |
可选 | #0b57d0 | 标题栏的背景 |
df-messenger-titlebar-padding |
可选 | 0 15 像素 | 标题栏的内边距 |
df-messenger-titlebar-border |
可选 | 无 | 标题栏的边框 |
df-messenger-titlebar-border-bottom |
可选 | 无 | 标题栏的下边框 |
df-messenger-titlebar-title-align |
可选 | 启动 | 标题栏中标题文字的文字对齐方式，允许的值为 start、center 或 end |
df-messenger-titlebar-font-color |
可选 | 白色 | 标题栏中文字的文字颜色 |
df-messenger-titlebar-letter-spacing |
可选 | 正常 | 标题栏中文字的字母间距 |
df-messenger-titlebar-title-font-size |
可选 | 18px | 标题栏中标题文字的文字大小 |
df-messenger-titlebar-title-font-family |
可选 | “Google Sans”“Helvetica Neue”、“sans-serif” | 标题栏中标题文字的字体系列 |
df-messenger-titlebar-title-font-weight |
可选 | 400 | 标题栏中标题文字的字体粗细 |
df-messenger-titlebar-title-line-height |
可选 | 正常 | 标题栏中标题文字的行高 |
df-messenger-titlebar-title-letter-spacing |
可选 | 正常 | 标题栏中标题文字的字母间距 |
df-messenger-titlebar-subtitle-font-color |
可选 | 白色 | 标题栏中字幕文字的文字颜色 |
df-messenger-titlebar-subtitle-font-size |
可选 | 18px | 标题栏中字幕文字的大小 |
df-messenger-titlebar-subtitle-font-family |
可选 | “Google Sans”“Helvetica Neue”、“sans-serif” | 标题栏中字幕文字的字体系列 |
df-messenger-titlebar-subtitle-font-weight |
可选 | 400 | 标题栏中字幕文字的字体粗细 |
df-messenger-titlebar-subtitle-line-height |
可选 | 正常 | 标题栏中字幕文字的行高 |
df-messenger-titlebar-subtitle-letter-spacing |
可选 | 正常 | 标题栏中字幕文字的字母间距 |
df-messenger-titlebar-title-order |
可选 | 行 | 标题栏中的顺序元素，允许的值为 row 或 row-reverse。仅当已指定 chat-title-icon 属性时，此值才有效。 |
df-messenger-titlebar-icon-width |
可选 | 18px | 标题栏中图标的宽度。仅当已指定 chat-title-icon 时，才会应用此值。 |
df-messenger-titlebar-icon-height |
可选 | 18px | 标题栏中图标的高度。仅当已指定 chat-title-icon 时，才会应用此值。 |
df-messenger-titlebar-icon-padding |
可选 | 0 12 像素 0 0 | 标题栏中图标周围的内边距。仅当已指定 chat-title-icon 时，才会应用此值。 |
聊天窗口的样式
对于聊天窗口，可以提供以下 CSS 变量：
| 属性 | 输入政策 | 默认值 | 说明 |
|---|---|---|---|
df-messenger-chat-background |
可选 | #fafafa | 显示消息的代理对话框的背景 |
df-messenger-chat-padding |
可选 | 10px | 显示消息的代理对话框的内边距 |
df-messenger-messagelist-border |
可选 | 无 | 消息列表的边框 |
df-messenger-message-border |
可选 | 无 | 代理对话消息的边框 |
df-messenger-message-font-size |
可选 | 14px | 代理对话消息的文字大小 |
df-messenger-message-font-family |
可选 | “Google Sans”“Helvetica Neue”、“sans-serif” | 代理对话消息的字体系列 |
df-messenger-message-font-weight |
可选 | 正常 | 代理对话框消息的字体粗细 |
df-messenger-message-bot-background |
可选 | #ecf3fe | 代理发送的消息的背景 |
df-messenger-message-bot-border |
可选 | 无 | 代理发送的邮件的边框 |
df-messenger-message-bot-font-color |
可选 | #1f1f1f | 代理发送的消息的文字颜色 |
df-messenger-message-bot-font-weight |
可选 | 正常 | 代理发送的消息的字体粗细 |
df-messenger-message-user-background |
可选 | #e1e3e1 | 用户发送的消息的背景 |
df-messenger-message-user-border |
可选 | 无 | 用户发送的邮件的边框 |
df-messenger-message-user-font-color |
可选 | #1f1f1f | 用户发送的邮件的文字颜色 |
df-messenger-message-user-font-weight |
可选 | 正常 | 用户发送的邮件的字体粗细 |
df-messenger-feedback-font-color |
可选 | #333333 | 反馈按钮的文字颜色 |
df-messenger-feedback-spacing |
可选 | 10px | 最后一条消息与反馈按钮之间的间距 |
df-messenger-message-spacing |
可选 | 10px | 两封邮件之间有空格 |
df-messenger-message-border-radius |
可选 | 8px | 消息的边框半径，应用于所有角 |
df-messenger-message-bot-border-top-left-radius |
可选 | 8px | 显示代理消息的左上角半径范围，覆盖一般半径 |
df-messenger-message-bot-border-top-right-radius |
可选 | 8px | 代理消息右上角的边框半径，覆盖一般半径 |
df-messenger-message-bot-border-bottom-left-radius |
可选 | 8px | 代理消息的左下角半径范围（覆盖一般半径） |
df-messenger-message-bot-border-bottom-right-radius |
可选 | 8px | 代理消息的右下角半径，覆盖一般半径 |
df-messenger-message-user-border-top-left-radius |
可选 | 8px | 用户消息的左上角半径范围，覆盖一般半径 |
df-messenger-message-user-border-top-right-radius |
可选 | 8px | 向用户显示消息右上角的边框半径，会覆盖一般半径 |
df-messenger-message-user-border-bottom-left-radius |
可选 | 8px | 用户消息的左下角半径范围，覆盖一般半径 |
df-messenger-message-user-border-bottom-right-radius |
可选 | 8px | 用户消息的右下角半径，会覆盖一般半径 |
df-messenger-message-stack-spacing |
可选 | 10px | 连续两条消息之间有空格 |
df-messenger-message-bot-stack-border-top-left-radius |
可选 | 8px | 连续代理消息的左上角半径范围，覆盖代理左上角半径 |
df-messenger-message-bot-stack-border-top-right-radius |
可选 | 8px | 连续代理消息右上角圆角半径，覆盖代理右上角半径 |
df-messenger-message-bot-stack-border-bottom-left-radius |
可选 | 8px | 显示连续的客服人员消息的左下角半径范围（覆盖客服人员左下角半径） |
df-messenger-message-bot-stack-border-bottom-right-radius |
可选 | 8px | 显示连续的客服人员消息的右下角半径，覆盖客服人员右下角的半径 |
df-messenger-message-user-stack-border-top-left-radius |
可选 | 8px | 连续用户消息的左上角半径范围，覆盖用户左上角半径 |
df-messenger-message-user-stack-border-top-right-radius |
可选 | 8px | 显示连续用户消息右上角的边框半径，会覆盖用户右上角半径 |
df-messenger-message-user-stack-border-bottom-left-radius |
可选 | 8px | 显示连续用户消息的左下角半径，覆盖用户左下角半径 |
df-messenger-message-user-stack-border-bottom-right-radius |
可选 | 8px | 显示连续用户消息的右下角半径，覆盖用户右下角半径 |
df-messenger-message-user-writing-image-width |
可选 | 24px | 代理写入数据时显示的图片的宽度，仅在设置了 bot-writing-image 时才处于活动状态 |
df-messenger-message-bot-writing-image-height |
可选 | 24px | 代理写入数据时显示的图片的高度，仅在设置了 bot-writing-image 时才处于活动状态 |
df-messenger-message-bot-writing-font-weight |
可选 | 正常 | 代理书写时所显示文字的字体粗细，仅在设置了 bot-writing-text 时才处于活动状态 |
df-messenger-message-bot-writing-font-size |
可选 | 14px | 代理写入数据时显示的文本大小，仅在设置了 bot-writing-text 时才处于活动状态 |
df-messenger-message-bot-writing-border |
可选 | 无 | 客服人员撰写消息时显示的消息边框 |
df-messenger-message-bot-writing-background |
可选 | #ecf3fe | 客服人员写邮件时所显示的消息的背景 |
df-messenger-message-bot-writing-padding |
可选 | 12px | 代理写入时显示消息的内边距 |
df-messenger-message-bot-writing-spacing |
可选 | 10px | 客服人员撰写消息时显示的与上一条消息之间的间隔 |
df-messenger-message-error-background |
可选 | 黑色 | 代理对话框中显示的错误消息的背景 |
df-messenger-message-error-font-family |
可选 | “Google Sans”“Helvetica Neue”、“sans-serif” | 代理对话框中显示的错误消息的字体系列 |
df-messenger-message-error-font-size |
可选 | 12px | 代理对话框中显示的错误消息的字体大小 |
df-messenger-message-error-font-color |
可选 | 白色 | 代理对话框中显示的错误消息的文字颜色 |
df-messenger-chat-scroll-button-display |
可选 | 无 | 定义“跳至底部”按钮的显示方式，允许的值为 block 或 none |
df-messenger-chat-scroll-button-container-padding |
可选 | 8px | 容器与“跳到底部”按钮周围的内边距 |
df-messenger-chat-scroll-button-font-size |
可选 | 14px | “跳至底部”按钮的文字大小 |
df-messenger-chat-scroll-button-font-color |
可选 | 白色 | “跳至底部”按钮的文字颜色 |
df-messenger-chat-scroll-button-background |
可选 | #0b57d0 | “跳至底部”按钮的背景 |
df-messenger-chat-scroll-button-border-radius |
可选 | 999 像素 | “跳到底部”按钮的边框半径 |
df-messenger-chat-messagelist-scroll-shadow-background |
可选 | 径向-渐变（最远边为 50% 100%，RGBa(0,0,0,.2)，透明）底部 | 未滚动到底部时在消息列表底部显示的阴影，设置为 none 可停用阴影 |
用户输入的样式
对于用户输入，可提供以下 CSS 变量：
| 属性 | 输入政策 | 默认值 | 说明 |
|---|---|---|---|
df-messenger-send-icon-color |
可选 | #0b57d0 | 用户输入中“发送”图标的颜色 |
df-messenger-send-icon-color-hover |
可选 | #0b57d0 | 将鼠标悬停在用户输入中时“发送”图标的颜色 |
df-messenger-send-icon-color-active |
可选 | #0b57d0 | 可以发送文本时，用户输入中“发送”图标的颜色 |
df-messenger-send-icon-offset-x |
可选 | 0 | 用户输入中“发送”图标的垂直偏移量 |
df-messenger-send-icon-offset-y |
可选 | -2 像素 | 用户输入中“发送”图标的水平偏移量 |
df-messenger-input-background |
可选 | 白色 | 用户输入的背景 |
df-messenger-input-padding |
可选 | 8px | 用户输入字段（包括“发送消息”按钮）和容器之间的总内边距。 |
df-messenger-input-inner-padding |
可选 | 5px 48px 5px 0 | 用户输入字段（不包括“发送消息”按钮）与容器之间的内边距。 |
df-messenger-input-border |
可选 | 无 | 用户输入的边框 |
df-messenger-input-border-top |
可选 | 1px 纯色 #e0e0e0 | 用户输入的上边框 |
df-messenger-input-border-bottom |
可选 | 无 | 用户输入的文本字段的下边框 |
df-messenger-input-font-family |
可选 | “Google Sans”“Helvetica Neue”、“sans-serif” | 用户输入的字体系列 |
df-messenger-input-font-color |
可选 | #1f1f1f | 用户输入的文本颜色 |
df-messenger-input-font-size |
可选 | 14px | 用户输入的文字大小 |
df-messenger-input-font-weight |
可选 | 正常 | 用户输入的字体粗细 |
df-messenger-input-box-border |
可选 | 无 | 用户输入框的边框 |
df-messenger-input-box-focus-border |
可选 | 无 | 获得焦点时用户输入框的边框 |
df-messenger-input-box-border-radius |
可选 | 0 | 用户输入框的边框半径 |
df-messenger-input-box-padding |
可选 | 8 像素 0 | 用户输入框的内边距 |
df-messenger-input-box-focus-padding |
可选 | 8 像素 0 | 获得焦点时用户输入框的内边距 |
df-messenger-input-gutter |
可选 | 稳定版 | 用户输入的滚动条边线 |
身份验证叠加层的样式
使用经过身份验证的设置时，可以为叠加层提供以下 CSS 变量：
| 属性 | 输入政策 | 默认值 | 说明 |
|---|---|---|---|
df-messenger-auth-background |
可选 | rgba(204, 204, 204, .8) | 显示身份验证时代理对话框的背景 |
df-messenger-auth-button-background |
可选 | #0b57d0 | 身份验证按钮的背景 |
df-messenger-auth-button-font-family |
可选 | “Google Sans”“Helvetica Neue”、“sans-serif” | 身份验证按钮的字体系列 |
df-messenger-auth-button-font-color |
可选 | 白色 | 身份验证按钮的文字颜色 |
df-messenger-auth-button-font-size |
可选 | 14px | 身份验证按钮的文字大小 |
df-messenger-auth-button-border |
可选 | 无 | 身份验证按钮的边框 |
df-messenger-auth-button-border-radius |
可选 | 8px | 身份验证按钮的边框半径 |
反馈样式
启用回答反馈功能后，可以为反馈控制提供以下 CSS 变量。
| 属性 | 输入政策 | 默认值 | 说明 |
|---|---|---|---|
df-messenger-message-feedback-icon-distance |
可选 | 8px | “我喜欢”和“不喜欢”按钮之间的距离 |
df-messenger-message-feedback-icon-font-color |
可选 | #444746 | “我喜欢”和“不喜欢”按钮的颜色 |
df-messenger-message-feedback-icon-font-color-active |
可选 | #444746 | “我喜欢”和“不喜欢”按钮处于活动状态时的颜色 |
df-messenger-message-feedback-icon-border |
可选 | 无 | “我喜欢”和“不喜欢”按钮的边框 |
df-messenger-message-feedback-icon-border-radius |
可选 | 0 | “我喜欢”和“不喜欢”按钮的边框半径 |
df-messenger-message-feedback-icon-background |
可选 | 无 | “我喜欢”和“不喜欢”按钮的背景 |
df-messenger-message-feedback-icon-background-hover |
可选 | 无 | 将鼠标悬停在“我喜欢”和“不喜欢”按钮时的背景 |
df-messenger-message-feedback-icon-padding |
可选 | 0 | “我喜欢”和“不喜欢”按钮的内边距 |
df-messenger-message-rich-feedback-spacing |
可选 | 10px | 丰富反馈中的元素间距 |
df-messenger-message-rich-feedback-padding |
可选 | 0 | 丰富反馈的内边距 |
df-messenger-message-rich-feedback-background |
可选 | 无 | 丰富反馈的背景 |
df-messenger-message-rich-feedback-border-radius |
可选 | 0 | 丰富反馈的边框半径 |
df-messenger-message-rich-feedback-border |
可选 | 无 | 丰富反馈的边框 |
df-messenger-rich-feedback-offset-left |
可选 | 0 | 左侧偏移量 |
JavaScript 事件
Dialogflow Messenger 会触发各种事件，您可以为这些事件创建事件监听器。某些事件具有 detail 对象字段，该字段可提供有关相应事件的更多信息。
支持以下事件：
| 事件 | 触发器 | 详细信息字段 |
|---|---|---|
df-messenger-loaded |
代理对话框首先加载。 | 无。 |
df-accordion-clicked |
用户点击了手风琴。 | 无。 |
df-button-clicked |
用户点击了某个按钮。 | actionLink：用户点击的按钮的锚点 href（如果指定）。event：用户点击的按钮的事件（如果已指定）。 |
df-chip-clicked |
用户点击了某个条状标签。 | actionLink：用户点击的条状标签（如已指定）的锚点 href。text：用户点击的条状标签的文本。 |
df-citation-clicked |
用户点击了某个引用。 | actionLink：引用的锚标记 href。 |
df-info-card-clicked |
用户点击了信息卡片。 | actionLink：信息卡片的锚点 href。 |
df-list-element-clicked |
用户点击了某个列表元素。 | event：用户点击的列表元素的事件（如果已指定）。 |
df-messenger-error |
对后端的请求失败。 | error：发生了错误。 |
df-request-sent |
发送到后端的请求。 | requestBody：已发送的请求。 |
df-response-received |
代理对话框已接收响应。 | messages：经过解析的响应消息的列表。raw：收到的逐字响应。 |
df-session-expired |
与客服人员的会话已过期。 | 无。 |
df-session-ended |
会话已结束。 | 无。 |
df-url-suggested |
建议资源的网址。 | suggestedUrls：建议网址的列表。 |
df-user-input-entered |
用户输入的文本。 | input：用户输入的值。 |
df-chat-open-changed |
聊天会话已打开或关闭。 仅在使用 df-messenger-chat-bubble 时才处于活动状态。 |
isOpen：聊天的新状态 |
事件处理示例：
document.addEventListener('df-user-input-entered', (event) => {
// Extract the user input.
const userInput = event.detail.input;
});
document.addEventListener('df-url-suggested', (event) => {
// Extract the URLs suggested by the agent.
const agentSuggestedUrls = event.detail.suggestedUrls;
});
自定义示例
以下示例展示了 HTML 自定义、CSS 自定义和事件处理：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<title>My chat</title>
<style>
df-messenger {
/*
* Customize as required. df-messenger will fill the
* space that is provided.
*/
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 320px;
}
</style>
<script src="https://www.gstatic.com/dialogflow-console/fast/df-messenger/prod/v1/df-messenger.js"></script>
</head>
<body>
<df-messenger
location="global" <!-- TODO: update agent location as needed -->
project-id="my-project-id" <!-- TODO: update project ID -->
agent-id="my-agent-id" <!-- TODO: update agent ID -->
language-code="en" <!-- TODO: update agent language as needed -->
>
<df-messenger-chat
chat-title="Agent Name" <!-- TODO: update dialog title as needed -->
></df-messenger-chat>
</df-messenger>
<script>
// An example of handling events: Navigate to the first suggested URL.
document.addEventListener('df-url-suggested', (event) => {
if (Array.isArray(event.detail.suggestedUrls) &&
event.detail.suggestedUrls.length) {
window.location.href = event.detail.suggestedUrls[0];
}
});
</script>
</body>
</html>
JavaScript 函数
Dialogflow Messenger 提供了您可以通过调用来影响其行为的函数。
renderCustomText
此函数呈现一条简单的文本消息，就像它以简单的文本响应的形式来自代理或者由最终用户输入一样。
参数：
string：短信boolean：如果是来自代理的消息，则为 true；如果是来自最终用户，则为 false
返航：
void
例如：
const dfMessenger = document.querySelector('df-messenger');
dfMessenger.renderCustomText('Custom text', true);
renderCustomCard
此函数会呈现自定义卡片，就像它来自 Dialogflow 执行方式一样。
参数：
payload：自定义载荷响应的列表，在 Fulfillment 部分进行定义。
返航：
void
例如：
const dfMessenger = document.querySelector('df-messenger');
const payload = [
{
"type": "info",
"title": "Info item title",
"subtitle": "Info item subtitle",
"image": {
"rawUrl": "https://example.com/images/logo.png"
},
"anchor": {
"href": "https://example.com",
"target": "_blank"
}
}
];
dfMessenger.renderCustomCard(payload);
sendQuery
此函数向 Dialogflow API 发送查询并等待响应。 这样可以有效地模拟通常提供给代理对话框的最终用户输入。系统将按照任何最终用户的查询来处理响应。
参数：
string：文本查询
返航：
Promise<void>：异步操作的返回值
例如：
const dfMessenger = document.querySelector('df-messenger');
dfMessenger.sendQuery('Describe shipping costs.');
sendRequest
此函数向 Dialogflow API 发送请求并等待响应。
参数：
返航：
Promise<void>：异步操作的返回值
例如：
const dfMessenger = document.querySelector('df-messenger');
dfMessenger.sendRequest('query', 'Describe shipping costs.');
setQueryParameters
此函数为 Dialogflow API detectIntent 请求的 queryParams 字段设置默认值。其他 Dialogflow Messenger 方法可能会替换查询参数中的相应默认值。
参数：
object：JSON 数据。如需了解查询参数的架构，请参阅 QueryParameters
返航：
void
例如：
const dfMessenger = document.querySelector('df-messenger');
const queryParameters = {
timeZone: "America/New_York"
};
dfMessenger.setQueryParameters(queryParameters);
setContext
此函数将有关最终用户的生成式个性化信息发送到 Dialogflow。此信息将在会话的剩余时间内保留。
参数：
object：JSON 数据，请参阅生成式个性化文档
返航：
void
例如：
const dfMessenger = document.querySelector('df-messenger');
const metadata = {
"subscription plan": "Business Premium Plus",
"devices owned": [
{
model: "Google Pixel 7",
},
{
model: "Google Pixel Tablet",
},
],
};
dfMessenger.setContext(metadata);
clearStorage
此函数会清除代理对话框的永久性存储空间。此操作还会清除代理对话框的当前状态。
参数：
- 无
返航：
void
例如：
const dfMessenger = document.querySelector('df-messenger');
dfMessenger.clearStorage();
clearAuthentication
此函数会清除代理的身份验证对话框。
参数：
- 无
返航：
void
例如：
const dfMessenger = document.querySelector('df-messenger');
dfMessenger.clearAuthentication();
startNewSession
此函数会在代理对话框内启动新会话。它可以保留或重置当前消息记录。此操作不会清除用户身份验证。
参数：
| 名称 | 类型 | 说明 |
|---|---|---|
args |
object? |
用于配置新会话创建过程的可选参数。 |
args.retainHistory |
boolean? |
用于保留历史记录的可选标志。如果设为 true，系统会保留历史记录，否则会清除历史记录。 |
返航：
void
例如：
const dfMessenger = document.querySelector('df-messenger');
dfMessenger.startNewSession({ retainHistory: true });
openChat
此函数会打开聊天窗口。在 df-messenger-chat-bubble 元素上调用它以打开聊天。如果聊天已打开，则不执行任何操作。
参数：
- 无
返航：
void
例如，
const dfMessengerBubble = document.querySelector('df-messenger-chat-bubble');
dfMessengerBubble.openChat();
closeChat
此函数会关闭聊天。在 df-messenger-chat-bubble 元素上调用它可关闭聊天。如果聊天已结束，则无需执行任何操作。
参数：
- 无
返航：
void
例如，
const dfMessengerBubble = document.querySelector('df-messenger-chat-bubble');
dfMessengerBubble.closeChat();
Fulfillment
创建自定义卡执行方式时，您可以创建文本响应和自定义载荷。文本响应用于纯文本和 Markdown 代理响应，自定义载荷用于富响应。所有响应类型的自定义载荷格式都具有以下基本结构：
{
"richContent": [
[
{
"type": "type-id",
...
},
{
"type": "type-id",
...
}
],
[
{
"type": "type-id",
...
},
{
"type": "type-id",
...
}
]
]
}
请注意，richContent 值可以为一个外部数组和多个内部数组。内部数组中的响应会绑定到单个可视化卡片中。
当外部数组包含多个内部数组时，会显示多个卡片，每个卡片对应一个内部数组。
其余子部分介绍了您可以为自定义载荷配置的各类型响应。
文本响应
文本响应支持纯文本和 Markdown。
信息响应类型
信息响应类型是用户可点击或轻触的简单标题卡片。
下表介绍了各个字段：
| 名称 | 类型 | 说明 |
|---|---|---|
type |
string |
响应类型：“信息” |
title |
string |
卡片标题 |
subtitle |
string |
卡片副标题 |
image |
object |
映像 |
image.rawUrl |
string |
图片的公开网址 |
anchor |
object |
点击元素后要遵循的锚点 |
anchor.href |
string |
锚点网址 |
anchor.target |
string |
锚点的目标，默认为 _blank |
例如：
{
"richContent": [
[
{
"type": "info",
"title": "Info item title",
"subtitle": "Info item subtitle",
"image": {
"rawUrl": "https://example.com/images/logo.png"
},
"anchor": {
"href": "https://example.com"
}
}
]
]
}
说明响应类型
说明响应类型是可以包含多行文本的信息卡片。
下表介绍了各个字段：
| 名称 | 类型 | 说明 |
|---|---|---|
type |
string |
响应类型：“说明” |
title |
string |
卡片标题 |
text |
array<string> |
每个字符串都在新行中呈现的字符串数组 |
例如：
{
"richContent": [
[
{
"type": "description",
"title": "Description title",
"text": [
"This is text line 1.",
"This is text line 2."
]
}
]
]
}
图片响应类型
图片响应类型是用户可以点击或轻触的图片卡片。
下表介绍了各个字段：
| 名称 | 类型 | 说明 |
|---|---|---|
type |
string |
响应类型：“图片” |
rawUrl |
string |
图片的公开网址 |
accessibilityText |
string |
图片的替代文本 |
例如：
{
"richContent": [
[
{
"type": "image",
"rawUrl": "https://example.com/images/logo.png",
"accessibilityText": "Example logo"
}
]
]
}
可提供以下 CSS 变量：
| 属性 | 输入政策 | 默认值 | 说明 |
|---|---|---|---|
df-messenger-image-border-radius |
可选 | 8px | 图片的边框半径 |
视频回复类型
视频响应类型会呈现视频元素，可以是网址中的直接视频、直接在通讯工具中播放的视频，也可以是指向视频的链接。
| 名称 | 类型 | 说明 |
|---|---|---|
type |
string |
响应类型：“视频” |
title |
string |
视频标题（可选） |
source |
object |
视频的来源 |
source.type |
string |
一种视频来源类型，值为 link 或 raw |
source.anchor |
object |
点击元素后要遵循的锚点 |
source.embeddedPlayer |
string |
系统可能会嵌入 link 类型的视频，而不显示指向播放器网页的链接。这仅适用于一组已知玩家，支持 youtube。 |
source.thumbnail |
object |
显示的anchor的缩略图 |
source.thumbnail.rawUrl |
string |
缩略图的网址 |
source.rawUrl |
string |
raw 类型视频的网址 |
例如：
{
"richContent": [
[
{
"type": "video",
"source": {
"type": "link",
"anchor": {
"href": "https://www.youtube.com/watch?v=cNfINi5CNbY"
}
}
}
]
]
}
可提供以下 CSS 变量：
| 属性 | 输入政策 | 默认值 | 说明 |
|---|---|---|---|
df-messenger-video-width |
可选 | 自动 | 视频的宽度（受 max-width\: 100% 限制） |
df-messenger-video-height |
可选 | 自动 | 视频高度 |
df-messenger-video-embed-width |
可选 | 560 像素 | 嵌入式视频的宽度（受 max-width\: 100% 限制） |
df-messenger-video-embed-height |
可选 | 315 像素 | 嵌入视频的高度 |
df-messenger-video-border |
可选 | 1px 纯色 #e0e0e0 | 视频的边框 |
df-messenger-video-border-radius |
可选 | 8px | 视频的边框半径 |
按钮响应类型
按钮响应类型是一个带有图标的小按钮，用户可以点击或轻触该按钮。
下表介绍了各个字段：
| 名称 | 类型 | 说明 |
|---|---|---|
type |
string |
响应类型：“按钮” |
icon |
object |
按钮的图标 |
icon.type |
string |
Material 图标库中的图标。默认图标是箭头 |
icon.color |
string |
颜色的十六进制代码 |
image |
object |
按钮的图片，优先级高于 icon |
image.rawUrl |
string |
图片的公开网址 |
mode |
string |
可选；如果设置为“屏蔽”，则用户输入将停用，直到用户点击该按钮 |
text |
string |
按钮文字 |
anchor |
object |
点击元素后要遵循的锚点 |
anchor.href |
string |
锚点网址 |
anchor.target |
string |
锚点的目标，默认为 _blank |
event |
object |
点击按钮时会触发的 Dialogflow 事件。 |
例如：
{
"richContent": [
[
{
"type": "button",
"icon": {
"type": "chevron_right",
"color": "#FF9800"
},
"mode": "blocking",
"text": "Button text",
"anchor": {
"href": "https://example.com"
},
"event": {
"event": ""
}
}
]
]
}
可提供以下 CSS 变量：
| 属性 | 输入政策 | 默认值 | 说明 |
|---|---|---|---|
df-messenger-button-border |
可选 | 无 | 按钮边框 |
df-messenger-button-border-radius |
可选 | 8px | 按钮的边框半径 |
df-messenger-button-font-color |
可选 | #1f1f1f | 按钮的文字颜色 |
df-messenger-button-font-family |
可选 | “Google Sans”“Helvetica Neue”、“sans-serif” | 按钮的字体系列 |
df-messenger-button-font-size |
可选 | 14px | 按钮的字体大小 |
df-messenger-button-padding |
可选 | 12px | 按钮的内边距 |
df-messenger-button-icon-spacing |
可选 | 12px | 按钮图标和文本之间的间距 |
df-messenger-button-icon-font-size |
可选 | 24px | 按钮图标的尺寸 |
df-messenger-button-image-size |
可选 | 24px | 按钮图片的尺寸 |
df-messenger-button-image-offset |
可选 | 0 | 按钮图片的偏移量，允许通过负值来偏移内边距 |
列表响应类型
列表响应类型是一个具有多个选项的卡片，用户可以从这些选项中进行选择。
响应包含 list 和 divider 响应类型的数组。下表介绍了 list 类型：
| 名称 | 类型 | 说明 |
|---|---|---|
type |
string |
响应类型：“列表” |
title |
string |
选项标题 |
subtitle |
string |
选项副标题 |
event |
object |
点击选项时会触发的 Dialogflow 事件 |
anchor |
object |
点击元素后要遵循的锚点 |
anchor.href |
string |
锚点网址 |
anchor.target |
string |
锚点的目标，默认为 _blank |
image |
object |
映像 |
image.rawUrl |
string |
图片的公开网址 |
下表介绍了 divider 类型：
| 名称 | 类型 | 说明 |
|---|---|---|
type |
string |
响应类型：“分隔器” |
例如：
{
"richContent": [
[
{
"type": "list",
"title": "List item 1 title",
"subtitle": "List item 1 subtitle",
"event": {
"event": ""
}
},
{
"type": "list",
"title": "List item 2 title",
"subtitle": "List item 2 subtitle",
"event": {
"event": ""
}
}
]
]
}
折叠式响应类型
折叠式响应类型是一个小卡片，用户可以点击或轻触该卡片来展开和显示更多文本。
下表介绍了各个字段：
| 名称 | 类型 | 说明 |
|---|---|---|
type |
string |
响应类型：“折叠式” |
title |
string |
折叠式标题 |
subtitle |
string |
折叠式副标题 |
image |
object |
映像 |
image.rawUrl |
string |
图片的公开网址 |
text |
string |
折叠式文本 |
例如：
{
"richContent": [
[
{
"type": "accordion",
"title": "Accordion title",
"subtitle": "Accordion subtitle",
"image": {
"rawUrl": "https://example.com/images/logo.png"
},
"text": "Accordion text"
}
]
]
}
建议内容信息卡响应类型
建议内容信息卡响应类型向最终用户提供可点击的建议内容信息卡列表。
下表介绍了各个字段：
| 名称 | 类型 | 说明 |
|---|---|---|
type |
string |
响应类型：“信息卡” |
options |
array<object> |
选项对象的数组 |
options[].mode |
string |
可选；如果设置为“blocking”，则系统会在用户点击条状标签之前停用用户输入 |
options[].text |
string |
选项文本 |
options[].image |
object |
可选，选项“图片” |
options[].image.rawUrl |
string |
选项图片的公开网址 |
options[].anchor |
object |
可选，点击元素后要跟随的锚点 |
options[].anchor.href |
string |
锚点网址 |
options[].anchor.target |
string |
锚点的目标，默认为 _blank |
例如：
{
"richContent": [
[
{
"type": "chips",
"options": [
{
"mode": "blocking",
"text": "Chip 1",
"image": {
"rawUrl": "https://example.com/images/logo.png"
},
"anchor": {
"href": "https://example.com"
}
},
{
"text": "Chip 2",
"image": {
"rawUrl": "https://example.com/images/logo.png"
},
"anchor": {
"href": "https://example.com"
}
}
]
}
]
]
}
可提供以下 CSS 变量：
| 属性 | 输入政策 | 默认值 | 说明 |
|---|---|---|---|
df-messenger-chips-spacing |
可选 | 10px | 条状标签与上一封邮件之间的空间 |
df-messenger-chips-border-color |
可选 | #e0e0e0 | 条状标签的边框颜色 |
df-messenger-chips-border-color-hover |
可选 | #e0e0e0 | 将光标悬停在条状标签上时的边框颜色 |
df-messenger-chips-border-radius |
可选 | 999 像素 | 条状标签的边框半径 |
df-messenger-chips-background |
可选 | 白色 | 条状标签背景 |
df-messenger-chips-background-hover |
可选 | RGBa(68, 71, 70, 0.08) | 将光标悬停在条状标签上时的背景 |
df-messenger-chips-padding |
可选 | 6 像素 16 像素 | 条状标签的内边距 |
df-messenger-chips-font-color |
可选 | 黑色 | 条状标签的文字颜色 |
df-messenger-chips-font-family |
可选 | “Google Sans”“Helvetica Neue”、“sans-serif” | 条状标签的字体系列 |
df-messenger-chips-font-size |
可选 | 14px | 条状标签的文字大小 |
df-messenger-chips-font-weight |
可选 | 正常 | 条状标签的字体粗细 |
df-messenger-chips-font-weight-hover |
可选 | 正常 | 将光标悬停在条状标签上时的字体粗细 |
df-messenger-chips-box-shadow |
可选 | 0 2px 2px 0 rgba(0, 0, 0, 0.24) | 条状标签方框阴影 |
“引用”响应类型
引用响应类型为最终用户提供了一系列可点击的引用链接。
下表介绍了各个字段：
| 名称 | 类型 | 说明 |
|---|---|---|
type |
string |
响应类型：“match_citations” |
citations |
array<object> |
Citation 对象的数组 |
citations[].title |
string |
引用标题 |
citations[].subtitle |
string |
引用副标题（目前已忽略） |
citations[].anchor |
object |
点击元素后要遵循的锚点 |
citations[].anchor.href |
string |
锚点网址 |
citations[].anchor.target |
string |
锚点的目标，默认为 _blank |
例如：
{
"richContent": [
[
{
"type": "match_citations",
"citations": [
{
"title": "Source 1",
"subtitle": "",
"anchor": {
"href": "https://example.com/1"
}
},
{
"title": "Source 2",
"subtitle": "",
"anchor": {
"href": "https://example.com/2"
}
}
]
}
]
]
}
可提供以下 CSS 变量：
| 属性 | 输入政策 | 默认值 | 说明 |
|---|---|---|---|
df-messenger-citations-spacing |
可选 | 10px | 上一条消息的引用上方空格 |
df-messenger-citations-message-display |
可选 | 组成块 | 定义对以上引用的说明显示，允许的值为 block 或 none |
df-messenger-citations-message-font-color |
可选 | #041e49 | 引用上方备注的文字颜色 |
df-messenger-citations-message-font-size |
可选 | 12px | 引用上方备注的文字大小 |
df-messenger-citations-flex-direction |
可选 | 行 | 引用的弹性方向属性，建议使用 row（水平方向，带换行符）或 column（垂直） |
df-messenger-citations-border-color |
可选 | #1a73e8 | 引用的边框颜色 |
df-messeenger-citations-border-color-hover |
可选 | #1a73e8 | 悬停鼠标时引用的边框颜色 |
df-messenger-citations-border-radius |
可选 | 4px | 引用的边框半径 |
df-messenger-citations-padding |
可选 | 8px | 引用的内边距 |
df-messenger-citations-background |
可选 | 白色 | 引用的背景 |
df-messenger-citations-background-hover |
可选 | RGBa(68, 71, 70, 0.08) | 悬停鼠标时引用的背景 |
df-messenger-citations-font-color |
可选 | #1a73e8 | 引用的文本颜色 |
df-messenger-citations-font-family |
可选 | “Google Sans”“Helvetica Neue”、“sans-serif” | 引用的字体系列 |
df-messenger-citations-font-size |
可选 | 11px | 引用的文字大小 |
df-messenger-citations-icon-font-size |
可选 | 14px | 引用图标的文字大小 |
df-messenger-citations-font-weight |
可选 | 正常 | 引用的字体粗细 |
df-messenger-citations-font-weight-hover |
可选 | 正常 | 悬停鼠标时引用的字体粗细 |
df-messenger-citations-icon-spacing |
可选 | 4px | 引用中图标和文本之间的空格 |
df-messenger-citations-box-shadow |
可选 | 无 | 引用的方框阴影 |
HTML 响应类型
HTML 响应类型向最终用户提供 HTML 消息。
下表介绍了各个字段：
| 名称 | 类型 | 说明 |
|---|---|---|
type |
string |
响应类型：“html” |
html |
string |
消息的文本内容，支持 HTML |
支持的 HTML 标记：
a- 锚点元素（用于创建超链接）b- 粗体元素（用于加粗文字）i- 斜体元素（用于为文本设置斜体）u- 下划线元素（用于为文本添加下划线）h1- 标题 1 元素（用于网页的主标题）h2- 标题 2 元素（用于子标题）h3- 标题 3 元素（用于子标题）p- 段落元素（用于创建文本段落）br- 换行符元素（用于在段落内创建换行符）table- 表格元素（用于创建表）tr- 表格行元素（用于在表格中创建行）thead- 表格标题元素（用于在表格中创建标题）th- 表格标题数据/单元格元素（用于在表格标题行内创建单元格）tbody- 表格正文元素（用于在表格中创建正文）td- 表格数据/单元格元素（用于在表格行内创建单元格）ul- 无序列表元素（用于创建项目符号列表）ol- 有序列表元素（用于创建编号列表）li- 列表项元素（用于在列表中创建项）img- 图片元素（用于显示图片，另请参阅上文的url-allowlist）div- 容器元素span- 内嵌容器元素
例如：
{
"richContent": [
[
{
"type": "html",
"html": "<b>Bold text</b> <i>Italic text</i> <u>Underlined text</u>"
}
]
]
}
设置 HTML 和 Markdown 样式
对于锚点元素（HTML a 元素和 Markdown 链接），可以提供以下 CSS 变量：
| 属性 | 输入政策 | 默认值 | 说明 |
|---|---|---|---|
df-messenger-link-decoration |
可选 | 下划线 | 链接元素的装饰 |
df-messenger-link-font-color |
可选 | #0b57d0 | 未访问过的链接元素的字体颜色 |
df-messenger-link-visited-font-color |
可选 | #0b57d0 | 已访问链接元素的字体颜色 |
df-messenger-link-hover-font-color |
可选 | #0b57d0 | 将鼠标悬停在链接元素上时的字体颜色 |
df-messenger-link-background |
可选 | transparent | link 元素的背景 |
df-messenger-link-padding |
可选 | 0 | link 元素的内边距 |
df-messenger-link-border |
可选 | 无 | 链接元素的边框 |
df-messenger-link-border-radius |
可选 | 0 | link 元素的边框半径 |
对于表格元素（HTML table 元素和 Markdown 表格），可提供以下 CSS 变量：
| 属性 | 输入政策 | 默认值 | 说明 |
|---|---|---|---|
df-messenger-table-font-size |
可选 | 14px | 表格元素中的文字大小 |
df-messenger-table-font-color |
可选 | #1f1f1f | 表格元素中的文本颜色 |
df-messenger-table-align |
可选 | 左 | 表格单元格中的文本对齐方式 |
df-messenger-table-padding |
可选 | 0 | 表格单元格中的内边距 |
df-messenger-table-border-collapse |
可选 | 单独 | 表格的边框收起模式，使用 separate 可启用 border-radius |
df-messenger-table-border-radius |
可选 | 0 | 表格的边框半径 |
df-messenger-table-header-border-radius |
可选 | 0 | 表格标题的边框半径 |
df-messenger-table-border-top |
可选 | 无 | 表格行顶部边框 |
df-messenger-table-border-top-first |
可选 | 无 | 表格中第 1 行的上边框 |
df-messenger-table-border-bottom |
可选 | 无 | 表格行底部边框 |
df-messenger-table-border-bottom-last |
可选 | 无 | 表格最后一行的底部边框 |
df-messenger-table-border-left |
可选 | 无 | 表格单元格左边框 |
df-messenger-table-border-left-first |
可选 | 无 | 行中第一个表格单元格的左边框 |
df-messenger-table-border-right |
可选 | 无 | 表格单元格右侧边框 |
df-messenger-table-border-right-last |
可选 | 无 | 行中最后一个表格单元格的右侧边框 |
df-messenger-table-background |
可选 | transparent | 表格行的背景 |
df-messenger-table-even-background |
可选 | transparent | 偶数编号表格行的背景 |
df-messenger-table-odd-background |
可选 | transparent | 奇数编号表格行的背景 |
df-messenger-table-header-font-size |
可选 | 14px | 表格标题元素中的文字大小 |
df-messenger-table-header-font-weight |
可选 | 粗体 | 表格标题元素中的字体粗细 |
df-messenger-table-header-font-color |
可选 | #1f1f1f | 表格标题元素中的文本颜色 |
df-messenger-table-header-align |
可选 | 左 | 表格标题单元格中的文本对齐方式 |
df-messenger-table-header-padding |
可选 | 0 | 表格标题单元格中的内边距 |
df-messenger-table-header-border-top |
可选 | 无 | 表格标题行顶部边框 |
df-messenger-table-header-border-bottom |
可选 | 无 | 表格标题行下边框 |
df-messenger-table-header-border-left |
可选 | 无 | 表格标题行中单元格左边框 |
df-messenger-table-header-border-left-first |
可选 | 无 | 表格标题行中第一个单元格左边框 |
df-messenger-table-header-border-right |
可选 | 无 | 表格标题行中单元格右侧边框 |
df-messenger-table-header-border-right-last |
可选 | 无 | 表格标题行中最后一个单元格的右侧边框 |
df-messenger-table-header-background |
可选 | transparent | 表格标题行的背景 |
自定义模板响应类型
自定义模板响应类型会呈现客户网站上定义的自定义元素。该元素并非放置在卡片内，而是始终独立存在。
下表介绍了各个字段：
| 名称 | 类型 | 说明 |
|---|---|---|
type |
string |
响应类型：“custom_template” |
name |
string |
自定义元素的名称 |
payload |
Object |
要传递给自定义元素的载荷 |
例如：
{
"richContent": [
[
{
"type": "custom_template",
"name": "custom-element-example",
"payload": {
"text": "Hello World"
}
}
]
]
}
在您的网站上，自定义元素需要使用响应的 name 字段中的确切名称进行注册。payload 字段在构造完成后（但在 connectedCallback 之前）作为 dfPayload 传递给自定义元素。该字段可能包含任意 JSON。此外，系统会将 dfResponseId 传递给该元素。
使用示例中的响应，以下是自定义元素的实现示例：
class CustomElementExample extends HTMLElement {
constructor() {
super();
// The `dfPayload` field will be provided before `connectedCallback` is
// being called.
this.dfPayload = null;
// The `dfResponseId` field will be provided before `connectedCallback` is
// being called.
this.dfResponseId = null;
// It is not strictly required but recommended to contain the custom
// element in a shadow root.
// https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot
this.renderRoot = this.attachShadow({mode: 'open'});
}
/** Web component Lifecycle method. */
connectedCallback() {
const div = document.createElement('div');
// The `.text` must match the payload's structure in `richContent.payload`.
div.innerText = this.dfPayload.text;
this.renderRoot.appendChild(div);
}
}
(function() {
// Registers the element. This name must match the name in
// `richContent.payload`.
customElements.define('custom-element-example', CustomElementExample);
})();
合并响应类型
Dialogflow Messenger 的各个富消息元素可用于构建自定义卡片，以满足您的需求。
下面是一个使用执行方式部分中列出的一些元素的示例：
{
"richContent": [
[
{
"type": "image",
"rawUrl": "https://example.com/images/logo.png",
"accessibilityText": "Dialogflow across platforms"
},
{
"type": "info",
"title": "Dialogflow",
"subtitle": "Build natural and rich conversational experiences",
"anchor": {
"href": "https://cloud.google.com/dialogflow/docs"
}
},
{
"type": "chips",
"options": [
{
"text": "Case Studies",
"anchor": {
"href": "https://cloud.google.com/dialogflow/case-studies"
}
},
{
"text": "Docs",
"anchor": {
"href": "https://cloud.google.com/dialogflow/docs"
}
}
]
}
]
]
}
可提供以下 CSS 变量：
| 属性 | 输入政策 | 默认值 | 说明 |
|---|---|---|---|
df-messenger-card-background |
可选 | 白色 | 自定义卡片的背景 |
df-messenger-card-padding |
可选 | 16px | 自定义卡片中的元素内边距 |
df-messenger-card-border |
可选 | 1px 纯色 #e0e0e0 | 自定义卡片的边框 |
df-messenger-card-border-radius |
可选 | 8px | 自定义卡片的边框半径 |
df-messenger-card-border-top-left-radius |
可选 | 8px | 自定义卡片左上角的边框半径 |
df-messenger-card-border-top-right-radius |
可选 | 8px | 自定义卡片右上角的边框半径 |
df-messenger-card-border-bottom-left-radius |
可选 | 8px | 自定义卡片左下角半径 |
df-messenger-card-border-bottom-right-radius |
可选 | 8px | 卡片右下角的圆角半径 |
df-messenger-card-stack-border-top-left-radius |
可选 | 8px | 连续自定义卡片的左上角半径会替换左上角半径 |
df-messenger-card-stack-border-top-right-radius |
可选 | 8px | 连续自定义卡片右上角的边框半径会覆盖右上角半径 |
df-messenger-card-stack-border-bottom-left-radius |
可选 | 8px | 对于连续的自定义卡片，左下角半径会替换左下半径 |
df-messenger-card-stack-border-bottom-right-radius |
可选 | 8px | 对于连续的自定义卡片，右下角的圆角半径会覆盖右下角半径 |
df-messenger-card-box-shadow |
可选 | 0 2px 2px 0 rgba(0, 0, 0, 0.24) | 自定义卡片的方框阴影 |
回答反馈
如果启用了回答反馈，聊天对话框会默认向界面添加“我喜欢” 和“不喜欢” 按钮。在对话期间，最终用户可以点击这些按钮来提供有关代理响应的反馈。如果用户选择“不喜欢”，则可以选择提供负面反馈的原因。
自定义反馈组件
若要指定自定义反馈元素，必须在网站上定义新的自定义元素。如需提交反馈，元素必须发出 df-custom-submit-feedback-clicked 事件。包含的 detail 字段必须是字符串。
class CustomFeedbackElement extends HTMLElement {
constructor() {
super();
// It is not strictly required but recommended to contain the custom
// element in a shadow root.
this.renderRoot = this.attachShadow({mode: 'open'});
}
// Web component Lifecycle method.
connectedCallback() {
const wrapper = document.createElement('div');
// Build the component as required.
const button = document.createElement('button');
button.innerText = 'Submit';
button.addEventListener('click', () => {
this._onSubmitClick();
});
wrapper.appendChild(button);
this.renderRoot.appendChild(wrapper);
}
// Called when Submit button is clicked.
_onSubmitClick() {
const event = new CustomEvent("df-custom-submit-feedback-clicked", {
// `detail` may be any string,
// this will be sent to the backend to be stored.
detail: JSON.stringify({
"usefulness": 2,
"accuracy": 3,
}),
// Required to propagate up the DOM tree
// https://developer.mozilla.org/en-US/docs/Web/API/Event/bubbles
bubbles: true,
// Required to propagate across ShadowDOM
// https://developer.mozilla.org/en-US/docs/Web/API/Event/composed
composed: true,
});
this.dispatchEvent(event);
}
}
(function() {
// Registers the element. This name must be "df-external-custom-feedback".
customElements.define('df-external-custom-feedback', CustomFeedbackElement);
})();
调试
要在本地使用 Dialogflow Messenger 测试您的代理，请执行以下操作：
- 按上述说明将 Dialogflow Messenger 元素嵌入页面中。
- 使用特定端口启动该页面的本地 HTTP 服务器。
- 通过
http://localhost:port_number访问该页面。