Dialogflow Messenger 执行

创建自定义卡执行方式时，您可以创建文本响应和自定义载荷。文本响应用于纯文本和 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.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 图片的替代文本

例如：

{
  "richContent": [
    [
      {
        "type": "image",
        "rawUrl": "https://example.com/images/logo.png",
        "accessibilityText": "Example logo"
      }
    ]
  ]
}

可提供以下 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 可选 560 像素 嵌入式视频的宽度（受 max-width\: 100% 限制）
df-messenger-video-embed-height 可选 315 像素 嵌入视频的高度
df-messenger-video-border 可选 1px 纯色 #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”、“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 按钮图片的偏移量，允许通过负值来偏移内边距

列表响应类型

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.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": ""
        }
      }
    ]
  ]
}

折叠式响应类型

Dialogflow 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 Messenger 条状标签类型屏幕截图

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

下表介绍了各个字段：

名称 类型 说明
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) 条状标签方框阴影

“引用”响应类型

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 可选 行 引用的弹性方向属性，建议使用 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 响应类型

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 可选 下划线 链接元素的装饰
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 表格标题行的背景

自定义模板响应类型

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 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) 自定义卡片的方框阴影