Dialogflow CX Messenger 执行方式

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

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

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

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

文本响应

Dialogflow CX Messenger 文本屏幕截图

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

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

  • ![](Image URL)

  • 表：

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

信息响应类型

Dialogflow CX Messenger 信息类型屏幕截图

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

下表介绍了各个字段：

名称 类型 说明
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"
        }
      }
    ]
  ]
}

说明响应类型

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

按钮响应类型

Dialogflow CX Messenger 按钮类型屏幕截图

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

下表介绍了各个字段：

名称 类型 说明
type string 响应类型：“按钮”
icon object 按钮的图标
icon.type string Material 图标库中的图标。默认图标是箭头
icon.color string 颜色的十六进制代码
image object 按钮的图片，优先于 icon
image.rawUrl string 图片的公开网址
mode string 可选，如果设置为“blocking”，则在用户点击按钮之前，用户输入处于停用状态
text string 按钮文字
anchor object 点击元素后要转到的锚点
anchor.href string 锚点的网址
anchor.target string 锚点的目标，默认为 _blank
event object 点击按钮时会触发的 Dialogflow CX 事件。

例如：

{
  "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 CX Messenger 列表类型屏幕截图

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

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

名称 类型 说明
type string 响应类型：“列表”
title string 选项标题
subtitle string 选项副标题
event object 点击选项时会触发的 Dialogflow CX 事件
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": ""
        }
      }
    ]
  ]
}

可提供以下 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 CX Messenger 手风琴类型屏幕截图

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

下表介绍了各个字段：

名称 类型 说明
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"
      }
    ]
  ]
}

建议内容信息卡响应类型

Dialogflow CX Messenger 芯片类型屏幕截图

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

下表介绍了各个字段：

名称 类型 说明
type string 响应类型：“信息卡”
options array<object> 选项对象的数组
options[].mode string 可选，如果设置为“blocking”，则在用户点击 chip 之前，用户输入处于停用状态
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 悬停时 chip 的边框颜色
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 可选 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 可选 正常 悬停时 chip 的字体粗细
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 可选 不换行 使用 normal 允许使用多行 chip

引用响应类型

Dialogflow CX 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-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”无衬线 引用内容的字体系列
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 CX Messenger 文件类型屏幕截图

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

下表介绍了各个字段：

名称 类型 说明
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-direction 属性，建议使用 row（横向，带换行符）或 column（纵向）
df-messenger-files-background 可选 白色 文件的背景
df-messenger-files-border 可选 1px solid #e0e0e0 文件的边框
df-messenger-files-border-radius 可选 999 像素 文件的边框半径
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 CX 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 可选 下划线 链接元素的装饰
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 链接元素的内边距
df-messenger-link-border 可选 无 链接元素的边框
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 CX 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 CX Messenger 自定义卡片屏幕截图

Dialogflow CX Messenger 的各个富消息元素可用于构建自定义卡片，以满足您的需求。

下面是一个使用 fulfillment 部分中列出的一些元素的示例：

{
  "richContent": [
    [
      {
        "type": "image",
        "rawUrl": "https://example.com/images/logo.png",
        "accessibilityText": "Dialogflow CX across platforms"
      },
      {
        "type": "info",
        "title": "Dialogflow CX",
        "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 工具向 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);