Dialogflow CX Messenger 执行方式

创建自定义卡片 fulfillment 时，您可以创建文本响应和自定义载荷。文本响应用于纯文本和 Markdown 代理响应，自定义载荷用于富响应。适用于所有响应类型的自定义载荷格式具有以下基本结构：

{
  "richContent": [
    [
      {
        "type": "type-id",
        ...
      },
      {
        "type": "type-id",
        ...
      }
    ],
    [
      {
        "type": "type-id",
        ...
      },
      {
        "type": "type-id",
        ...
      }
    ]
  ]
}

请注意，richContent 值可以为一个外部数组和多个内部数组。内部数组中的响应会绑定到单个可视化卡片中。 当外部数组包含多个内部数组时，会显示多个卡片，每个卡片对应一个内部数组。

其余子部分介绍了您可以为自定义载荷配置的各类型响应。

文本响应

Dialogflow Messenger 文本截图

文本响应支持纯文本和 Markdown。以下是一些 Markdown 示例：

  • *Italic*
  • **Bold**
  • # Title
  • [Link text](Link URL)

  • ![](Image URL)

  • 表格：

    Header 1 | Header 2
-------- | --------
Cell 1   | Cell 2

信息响应类型

Dialogflow Messenger 信息类型屏幕截图

信息响应类型是用户可点击或轻触的简单标题卡片。

下表介绍了各个字段：

名称 类型 说明
type string 响应类型：“信息”
title string 卡片标题
subtitle string 卡片副标题
image object Image
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"
        }
      }
    ]
  ]
}

说明响应类型

Dialogflow Messenger 说明类型屏幕截图

说明响应类型是可以包含多行文本的信息卡片。

下表介绍了各个字段：

名称 类型 说明
type string 响应类型：“说明”
title string 卡片标题
text array<string> 每个字符串都在新行中呈现的字符串数组

例如：

{
  "richContent": [
    [
      {
        "type": "description",
        "title": "Description title",
        "text": [
          "This is text line 1.",
          "This is text line 2."
        ]
      }
    ]
  ]
}

图片响应类型

Dialogflow Messenger 图片类型屏幕截图

图片响应类型是用户可以点击或轻触的图片卡片。此响应类型支持参考条状标签，可将图片的来源作为锚链接添加，并附带简短的描述性文本和图标。

下表介绍了各个字段：

名称 类型 说明
type string 响应类型：“图片”
rawUrl string 图片的公开网址
accessibilityText string 图片的替代文本
reference.text string 要在参考条状标签中显示的文本
reference.anchor.href string 参考条状标签的网址
reference.anchor.target string 参考条状标签中的锚点的目标，默认为 _blank
reference.image.rawUrl string 要在参考条状标签中显示的图片

例如：

{
  "richContent": [
    [
      {
        "type": "image",
        "rawUrl": "https://example.com/images/logo.png",
        "accessibilityText": "Example logo",
        "reference": {
          "text": "Logo",
          "anchor": {
            "href": "https://example.com/images/logo.png"
          },
          "image": {
            "rawUrl": "https://example.com/images/logo_small.png"
          }
        }
      }
    ]
  ]
}

可提供以下 CSS 变量：

属性 输入政策 默认值 说明
df-messenger-image-border-radius 可选 8px 图片的边框半径

视频响应类型

Dialogflow Messenger 视频类型屏幕截图

视频回复类型会呈现视频元素，该元素可以是直接通过网址播放的视频（直接在即时通讯工具中播放），也可以是指向视频的链接。

名称 类型 说明
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 可选 560px 嵌入的视频的宽度（受 max-width\: 100% 限制）
df-messenger-video-embed-height 可选 315 像素 嵌入式视频的高度
df-messenger-video-border 可选 1px solid #e0e0e0 视频的边框
df-messenger-video-border-radius 可选 8px 视频的边框半径

按钮响应类型

Dialogflow Messenger 按钮类型屏幕截图

按钮响应类型是一个带有图标的小按钮，用户可以点击或轻触该按钮。

下表介绍了各个字段：

名称 类型 说明
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”，无衬线字体 按钮的字体系列
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 按钮图片的偏移量，允许使用负值来偏移内边距
df-messenger-button-text-align 可选 center 按钮的文本对齐方式
df-messenger-button-text-wrap 可选 正常 使用 nowrap 禁止使用多行按钮

列表响应类型

Dialogflow Messenger 列表类型屏幕截图

列表响应类型是一个具有多个选项的卡片，用户可以从这些选项中进行选择。

响应包含 list 和 divider 响应类型的数组。下表介绍了 list 类型：

名称 类型 说明
type string 响应类型：“列表”
title string 选项标题
subtitle string 选项副标题
event object 点击选项时会触发的 Dialogflow 事件
anchor object 点击元素后要跳转到的锚点
anchor.href string 锚点的网址
anchor.target string 锚点的目标，默认为 _blank
image object Image
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": ""
        }
      }
    ]
  ]
}

可提供以下 CSS 变量：

属性 输入政策 默认值 说明
df-messenger-list-padding 可选 16px 列表元素的内边距
df-messenger-list-inset 可选 0 列表元素的额外水平“内边距”（除了内边距之外），用于控制元素之间边框的扩展
df-messenger-list-spacing 可选 10px 列表元素之间的垂直间距
df-messenger-list-border-bottom 可选 1px solid #e0e0e0 列表元素之间的边框

折叠式响应类型

Dialogflow Messenger 手风琴式屏幕截图

折叠式响应类型是一个小卡片，用户可以点击或轻触该卡片来展开和显示更多文本。

下表介绍了各个字段：

名称 类型 说明
type string 响应类型：“折叠式”
title string 折叠式标题
subtitle string 折叠式副标题
image object Image
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"
      }
    ]
  ]
}

建议内容信息卡响应类型

Dialogflow Messenger 条状标签类型屏幕截图

建议内容信息卡响应类型向最终用户提供可点击的建议内容信息卡列表。

下表介绍了各个字段：

名称 类型 说明
type string 响应类型：“信息卡”
options array<object> 选项对象的数组
options[].mode string 可选，如果设置为“屏蔽”，则在用户点击条状标签之前，系统会停用用户输入
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 可选 999px 条状标签的边框半径
df-messenger-chips-background 可选 白色 条状标签的背景
df-messenger-chips-background-hover 可选 rgba(68, 71, 70, 0.08) 条状标签在悬停时显示的背景
df-messenger-chips-padding 可选 6px 16px 条状标签的内边距
df-messenger-chips-font-color 可选 黑色 条状标签的文字颜色
df-messenger-chips-font-family 可选 “Google Sans”“Helvetica Neue”，无衬线字体 条状标签的字体系列
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) 条状标签的方框阴影
df-messenger-chips-content-align 可选 flex-start 条状标签中内容（例如图片）的垂直对齐
df-messenger-chips-text-wrap 可选 nowrap 使用 normal 允许使用多行条状标签

引用响应类型

Dialogflow Messenger 引文类型屏幕截图

引文响应类型向最终用户提供可点击的引文链接列表。

下表介绍了各个字段：

名称 类型 说明
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 可选 行 引文的 Flex 方向属性，建议使用 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”，无衬线字体 引文的字体系列
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 可选 无 引用的方框阴影

文件响应类型

Dialogflow Messenger 文件类型屏幕截图

“files”响应类型会呈现包含可下载链接的文件元素列表。

下表介绍了各个字段：

名称 类型 说明
type string 响应类型：“文件”
files array<object> File 对象的数组
files[].name string 文件名
files[].image object 文件图片
files[].image.rawUrl string 图片的文件公开网址
files[].anchor object 锚点，用于下载文件
files[].anchor.href string 锚点的网址
files[].anchor.target string 锚点的目标，默认为 _blank

例如：

{
  "richContent": [
    [
      {
        "type": "files",
        "files": [
          {
            "name": "instructions.pdf",
            "image": {
              "rawUrl":
                  "https://fonts.gstatic.com/s/i/short-term/release/googlesymbols/cloud_download/default/24px.svg"
            },
            "anchor": {
              "href": "https://example.com/instructions.pdf"
            }
          },
          {
            "name": "data.csv",
            "image": {
              "rawUrl":
                  "https://fonts.gstatic.com/s/i/short-term/release/googlesymbols/csv/default/24px.svg"
            },
            "anchor": {
              "href": "https://example.com/data.csv"
            }
          }
        ]
      }
    ]
  ]
}

可提供以下 CSS 变量

属性 输入政策 默认值 说明
df-messenger-files-spacing 可选 10px 文件上方与上一封邮件之间的空格
df-messenger-files-distance 可选 8px 列表中文件之间的距离
df-messenger-files-flex-direction 可选 行 文件的 Flex 方向属性，建议使用 row（水平且有换行）或 column（垂直）
df-messenger-files-background 可选 白色 文件的背景
df-messenger-files-border 可选 1px solid #e0e0e0 文件边框
df-messenger-files-border-radius 可选 999px 文件的边框半径
df-messenger-files-box-shadow 可选 0 2px 2px 0 rgba(0, 0, 0, 0.24) 文件的方框阴影
df-messenger-files-padding 可选 6px 16px 文件的填充
df-messenger-files-font-color 可选 #1f1f1f 文件的文本颜色
df-messenger-files-font-family 可选 “Google Sans”“Helvetica Neue”，无衬线字体 文件的字体系列
df-messenger-files-font-size 可选 14px 文件的文本大小
df-messenger-files-font-weight 可选 正常 文件的字体粗细
df-messenger-files-background-hover 可选 白色 文件在悬停时的背景
df-messenger-files-border-hover 可选 1px solid #e0e0e0 文件在悬停时显示的边框
df-messenger-files-font-weight-hover 可选 正常 文件在悬停时显示的字体粗细
df-messenger-files-image-offset 可选 0 0 0 -8px 左侧图片的偏移量
df-messenger-files-image-size 可选 18px 左侧图片的尺寸
df-messenger-files-text-spacing 可选 8px 左侧图片文字与右侧文本图标之间的距离
df-messenger-files-icon-offset 可选 0 -8px 0 0 右侧下载图标的偏移
df-messenger-files-icon-size 可选 18px 右侧下载图标的大小
df-messenger-files-icon-font-color 可选 #444746 右侧下载图标的颜色

HTML 响应类型

Dialogflow Messenger 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 HTML 自定义）
  • 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 可选 下划线 link 元素的装饰
df-messenger-link-font-color 可选 #0b57d0 未访问过的链接元素的字体颜色
df-messenger-link-visited-font-color 可选 #0b57d0 已访问的链接元素的字体颜色
df-messenger-link-hover-font-color 可选 #0b57d0 悬停在链接元素上时的字体颜色
df-messenger-link-background 可选 透明 链接元素的背景
df-messenger-link-padding 可选 0 link 元素的内边距
df-messenger-link-border 可选 无 link 元素的边框
df-messenger-link-border-radius 可选 0 链接元素的边框半径

对于表格元素（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 可选 无 第一行表格顶部的边框
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 可选 透明 表格行的背景
df-messenger-table-even-background 可选 透明 偶数表格的行背景
df-messenger-table-odd-background 可选 透明 奇数表行的背景
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 可选 透明 表格标题行的背景

自定义模板回复类型

Dialogflow Messenger 自定义模板类型屏幕截图

自定义模板响应类型会呈现客户网站上定义的自定义元素。此元素不会放置在卡片内，始终独立显示。

下表介绍了各个字段：

名称 类型 说明
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 自定义卡片屏幕截图

Dialogflow CX 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 solid #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) 自定义卡片的阴影

通过 Playbook 工具创建富媒体内容

您可以使用 Playbook 工具向 Dialogflow CX Messenger 发送富内容。

第 1 步：在代理中创建 addRichContent 工具

创建一个名为 addRichContent 的函数工具，并为其提供以下数据：

工具输入：

properties: {}
type: object

工具输出：

properties:
  status:
    type: string
  reason:
    type: string
type: object

第 2 步：告知客服人员如何使用此工具

在说明和示例中告知客服人员如何使用该工具。

例如，请在说明中添加以下内容：

-  Greet  the  user
-  Ask  the  user  what  their  favorite  color  is.
   At  the  same  time  run  ${TOOL:  addRichContent}  to  display  buttons
   for  blue,  red,  yellow,  and  green.
-  Thank  the  user

例如，创建如下示例：

示例屏幕截图

请注意，富内容的语法与您在基于流程的虚拟客服中返回自定义载荷时使用的语法相同。

第 3 步：定义 JavaScript

在托管 df-messenger 的网页的代码中，您需要创建 JavaScript 代码来定义一个函数，用于指示 df-messenger 呈现富媒体内容。您还需要向 df-messenger 注册该函数，以便它知道在虚拟客服人员需要时执行该函数。

确保已声明变量 dfMessenger 并将其指向 df-messenger 实例。

以下是可用于此目的的一些示例代码：

const dfMessenger = document.querySelector('df-messenger');

function  addRichContent(customPayload)  {
  dfMessenger.renderCustomCard(customPayload.richContent);

  // add error handling

  return  Promise.resolve({  status:  "OK",  reason:  null  });
}

// substitute your own tool id

const  toolId  =  'projects/PROJECT_ID/locations/LOCATION/agents/AGENT_ID/tools/TOOL_ID'
dfMessenger.registerClientSideFunction(toolId,  addRichContent.name,  addRichContent);