Dialogflow CX Messenger HTML 自定义

您可以对聊天对话框应用许多 HTML 自定义设置。

HTML 聊天元素选项

df-messenger 元素的子元素可以是以下任一元素:

  • df-messenger-chat:智能体对话框始终处于打开状态。
  • df-messenger-chat-bubble:可以使用打开或关闭气泡按钮打开或关闭代理对话框。

df-messenger 的 HTML 自定义

df-messenger HTML 元素具有以下特性 (Attribute):

属性 输入政策 值
agent-id 必填 与 Dialogflow CX 智能体关联的代理 ID。
allow-feedback 可选 设置为 all,以允许最终用户对代理的回答提供反馈。
language-code 必填 默认语言代码。
project-id 必填 代理的项目 ID。
location 可选 代理的区域。默认值为 global。
intent 可选 在聊天对话框打开时调用的自定义事件。如果聊天窗口最初处于打开状态(例如 df-messenger-chat 或 expanded/minimized df-messenger-chat-bubble),则会在网页加载时触发。您可以使用为此事件调用的事件处理脚本,并生成第一条代理消息。
oauth-client-id 可选 OAuth 身份验证需要此权限。默认值为 null。如果您不提供此值并启用 Dialogflow CX Messenger 未经身份验证的访问权限,则未经身份验证的用户可以与代理进行交互。如果您提供此值,代理对话框会显示“请求身份验证”叠加层,要求用户先登录,然后才能使用代理(您可以使用 request-auth-text 属性控制文本)。
storage-option 可选 指定对话消息的本地存储空间。如果消息不应存储,请使用 none。使用 none 会在页面刷新或重新加载时清除所有消息。默认值为 sessionStorage。
session-ttl 可选 设置为以秒为单位的时长,以维持会话,必须严格小于 86400(1 天),默认值为 1800(30 分钟)。
url-allowlist 可选 允许从以英文逗号分隔的网址前缀列表中加载图片。HTML 或 Markdown 响应中使用的图片网址必须以列出的某个前缀开头。使用 * 可允许所有网址。
max-query-length 可选 定义文本查询的最大长度。如果值为负数,则长度不受限制。默认值为 256。其他文档。

df-messenger-chat 的 HTML 自定义

Dialogflow CX Messenger 边栏

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 可选 输入字段为空时要在其中显示的文本。默认值为“Ask something…”。
bot-actor-image 可选 要用作代理角色图片的图片来源。显示在每组代理回答上。
user-actor-image 可选 要用作用户演员图片的图片来源。显示在每条用户消息中。

df-messenger-chat-bubble 的 HTML 自定义

Dialogflow CX Messenger 聊天气泡

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,则在屏幕尺寸小于 500 像素时以全屏模式打开,否则以普通窗口模式打开。如果设置了此属性,则可能会替换 chat-width、chat-height 和 anchor。
minimized 可选 确定聊天最初是否以最小化形式打开。使用与 anchor 相同的逻辑。如果指定,此属性的优先级高于 expanded。这也会在加载时触发初始 intent。