丰富的回复

丰富响应会添加视觉元素,以增强用户与 Action 的互动。您可以在提示中使用以下丰富的响应类型:

  • 基本卡片
  • 图片卡片
  • 表格卡片

定义丰富响应时,请使用具有 RICH_RESPONSE surface 功能的候选响应,以便 Google 助理仅在支持的设备上返回富响应。在提示中,每个 content 对象只能使用一个富响应。

基本卡片

基本卡片旨在简洁明了,用于向用户显示关键(或摘要)信息,并允许用户在您选择的情况下(使用网页链接)了解详情。

基本卡片主要用于显示目的,因为它们没有按钮,就没有互动功能。如需将按钮关联到 Web,Surface 还必须具有 WEB_LINK 功能。

智能显示屏上的基本卡片示例

属性

基本卡片响应类型具有以下属性:

媒体资源 类型 要求 说明
title string 可选 卡片的纯文本标题。标题采用固定的字体和大小,第一行之后的字符会被截断。如果未指定标题,卡片高度会收起。
subtitle string 可选 卡片的纯文本副标题。标题采用固定的字体和大小,第一行之后的字符会被截断。如果未指定副标题,卡片高度会收起。
text string 基于条件

卡片的纯文本内容。过长的文本会在最后一个单词中断处以省略号截断。除非存在 image,否则此属性是必需的。

此媒体资源具有以下限制:

  • 最多 15 行(不含图片)或 10 行(包含 image)。这大约是 750 个字符(不带图片)或 500 个(带图片)字符。请注意,移动设备会比屏幕更大的 Surface 更早截断文本。
  • 文字不能包含链接。

仅支持有限的 Markdown 子集:

  • 换行符包含双空格,后跟 \n
  • **bold**
  • *italics*
image Image 可选 卡片中显示的图片。图片可以是 JPG、PNG 和 GIF(动画和非动画)。
image_fill ImageFill 可选 当图片的宽高比与图片容器的宽高比不符时,要使用的卡片与图片容器之间的边框。
button Link 可选 点按此按钮可将用户链接到某个网址。该按钮必须具有 name 属性(包含按钮文本)和 url 属性(包含链接网址)。按钮文字不得具有误导性,并在审核流程中检查。

示例代码

YAML

candidates:
  - first_simple:
      variants:
        - speech: This is a card.
          text: This is a card.
    content:
      card:
        title: Card Title
        subtitle: Card Subtitle
        text: Card Content
        image:
          url: 'https://developers.google.com/assistant/assistant_96.png'
          alt: Google Assistant logo

JSON

{
  "candidates": [
    {
      "first_simple": {
        "variants": [
          {
            "speech": "This is a card.",
            "text": "This is a card."
          }
        ]
      },
      "content": {
        "card": {
          "title": "Card Title",
          "subtitle": "Card Subtitle",
          "text": "Card Content",
          "image": {
            "url": "https://developers.google.com/assistant/assistant_96.png",
            "alt": "Google Assistant logo"
          }
        }
      }
    }
  ]
}

Node.js

app.handle('Card', conv => {
  conv.add('This is a card.');
  conv.add(new Card({
    "title": "Card Title",
    "subtitle": "Card Subtitle",
    "text": "Card Content",
    "image": new Image({
      url: 'https://developers.google.com/assistant/assistant_96.png',
      alt: 'Google Assistant logo'
    })
  }));
});

JSON

{
  "responseJson": {
    "session": {
      "id": "session_id",
      "params": {}
    },
    "prompt": {
      "override": false,
      "content": {
        "card": {
          "title": "Card Title",
          "subtitle": "Card Subtitle",
          "text": "Card Content",
          "image": {
            "alt": "Google Assistant logo",
            "height": 0,
            "url": "https://developers.google.com/assistant/assistant_96.png",
            "width": 0
          }
        }
      },
      "firstSimple": {
        "speech": "This is a card.",
        "text": "This is a card."
      }
    }
  }
}

图片卡片

图片卡片旨在作为同时包含图片的基本卡片提供更简单的替代方案。如果要显示图片并且不需要支持文本或互动组件,请使用图片卡片。

属性

图片卡片响应类型具有以下属性:

媒体资源 类型 要求 说明
url string 必需 图片的来源网址。图片可以是 JPG、PNG 或 GIF(动画和非动画)。
alt string 必需 要用于无障碍功能的图片的文字说明。
height int32 可选 图片的高度,以像素为单位。
width int32 可选 此图片的宽度,以像素为单位。

示例代码

YAML

candidates:
  - first_simple:
      variants:
        - speech: This is an image prompt.
          text: This is an image prompt.
    content:
      image:
        alt: Google Assistant logo
        url: 'https://developers.google.com/assistant/assistant_96.png'

JSON

{
  "candidates": [
    {
      "first_simple": {
        "variants": [
          {
            "speech": "This is an image prompt.",
            "text": "This is an image prompt."
          }
        ]
      },
      "content": {
        "image": {
          "alt": "Google Assistant logo",
          "url": "https://developers.google.com/assistant/assistant_96.png"
        }
      }
    }
  ]
}

Node.js

app.handle('Image', conv => {
  conv.add("This is an image prompt!");
  conv.add(new Image({
      url: 'https://developers.google.com/assistant/assistant_96.png',
      alt: 'Google Assistant logo'
  }));
});

JSON

{
  "responseJson": {
    "session": {
      "id": "session_id",
      "params": {}
    },
    "prompt": {
      "override": false,
      "content": {
        "image": {
          "alt": "Google Assistant logo",
          "height": 0,
          "url": "https://developers.google.com/assistant/assistant_96.png",
          "width": 0
        }
      },
      "firstSimple": {
        "speech": "This is an image prompt.",
        "text": "This is an image prompt."
      }
    }
  }
}

表格卡片

利用表格卡片,您可以在响应中显示表格数据(例如,体育积分榜、选举结果和航班)。您可以定义 Google 助理在表格卡片中显示的列和行(每个列和行最多 3 个)。您还可以定义其他列和行以及它们的优先级。

智能显示屏上的表格卡片示例

表显示静态数据且不可互动。对于交互式选择响应,请改用可视化选择响应

属性

表卡片响应类型具有以下属性:

媒体资源 类型 要求 说明
title string 基于条件 表格的纯文本标题。如果设置了 subtitle,则必须使用此属性。
subtitle string 可选 表格的纯文本副标题。表格卡片中的字幕不受主题自定义设置的影响。
columns TableColumn 的数组 必需 标题和列的对齐方式。每个 TableColumn 对象描述了同一表中不同列的标题和对齐方式。
rows TableRow 的数组 必需

表的行数据。前 3 行一定会显示,但其他行可能不会在某些 surface 中显示。您可以使用模拟器进行测试,以查看针对给定 surface 显示哪些行。

每个 TableRow 对象都描述了同一表中不同行的单元格。

image Image 可选 与表关联的图片。
button Link 可选 点按此按钮可将用户链接到某个网址。该按钮必须具有 name 属性(包含按钮文本)和 url 属性(包含链接网址)。按钮文字不得具有误导性,并在审核流程中检查。

示例代码

以下代码段展示了如何实现表格卡片:

YAML

candidates:
  - first_simple:
      variants:
        - speech: This is a table.
          text: This is a table.
    content:
      table:
        title: Table Title
        subtitle: Table Subtitle
        columns:
          - header: Column A
          - header: Column B
          - header: Column C
        rows:
          - cells:
              - text: A1
              - text: B1
              - text: C1
          - cells:
              - text: A2
              - text: B2
              - text: C2
          - cells:
              - text: A3
              - text: B3
              - text: C3
        image:
          alt: Google Assistant logo
          url: 'https://developers.google.com/assistant/assistant_96.png'

JSON

{
  "candidates": [
    {
      "first_simple": {
        "variants": [
          {
            "speech": "This is a table.",
            "text": "This is a table."
          }
        ]
      },
      "content": {
        "table": {
          "title": "Table Title",
          "subtitle": "Table Subtitle",
          "columns": [
            {
              "header": "Column A"
            },
            {
              "header": "Column B"
            },
            {
              "header": "Column C"
            }
          ],
          "rows": [
            {
              "cells": [
                {
                  "text": "A1"
                },
                {
                  "text": "B1"
                },
                {
                  "text": "C1"
                }
              ]
            },
            {
              "cells": [
                {
                  "text": "A2"
                },
                {
                  "text": "B2"
                },
                {
                  "text": "C2"
                }
              ]
            },
            {
              "cells": [
                {
                  "text": "A3"
                },
                {
                  "text": "B3"
                },
                {
                  "text": "C3"
                }
              ]
            }
          ],
          "image": {
            "alt": "Google Assistant logo",
            "url": "https://developers.google.com/assistant/assistant_96.png"
          }
        }
      }
    }
  ]
}

Node.js

app.handle('Table', conv => {
  conv.add('This is a table.');
  conv.add(new Table({
    "title": "Table Title",
    "subtitle": "Table Subtitle",
    "image": new Image({
      url: 'https://developers.google.com/assistant/assistant_96.png',
      alt: 'Google Assistant logo'
    }),
    "columns": [{
      "header": "Column A"
    }, {
      "header": "Column B"
    }, {
      "header": "Column C"
    }],
    "rows": [{
      "cells": [{
        "text": "A1"
      }, {
        "text": "B1"
      }, {
        "text": "C1"
      }]
    }, {
      "cells": [{
        "text": "A2"
      }, {
        "text": "B2"
      }, {
        "text": "C2"
      }]
    }, {
      "cells": [{
        "text": "A3"
      }, {
        "text": "B3"
      }, {
        "text": "C3"
      }]
    }]
  }));
});

JSON

{
  "responseJson": {
    "session": {
      "id": "session_id",
      "params": {}
    },
    "prompt": {
      "override": false,
      "content": {
        "table": {
          "button": {},
          "columns": [
            {
              "header": "Column A"
            },
            {
              "header": "Column B"
            },
            {
              "header": "Column C"
            }
          ],
          "image": {
            "alt": "Google Assistant logo",
            "height": 0,
            "url": "https://developers.google.com/assistant/assistant_96.png",
            "width": 0
          },
          "rows": [
            {
              "cells": [
                {
                  "text": "A1"
                },
                {
                  "text": "B1"
                },
                {
                  "text": "C1"
                }
              ]
            },
            {
              "cells": [
                {
                  "text": "A2"
                },
                {
                  "text": "B2"
                },
                {
                  "text": "C2"
                }
              ]
            },
            {
              "cells": [
                {
                  "text": "A3"
                },
                {
                  "text": "B3"
                },
                {
                  "text": "C3"
                }
              ]
            }
          ],
          "subtitle": "Table Subtitle",
          "title": "Table Title"
        }
      },
      "firstSimple": {
        "speech": "This is a table.",
        "text": "This is a table."
      }
    }
  }
}

自定义响应

您可以通过为 Actions 项目创建自定义主题来更改丰富响应的外观。这种自定义有助于定义用户在具有屏幕的 Surface 上调用您的 Action 时对话的独特外观和风格。

如需设置自定义响应主题,请执行以下操作:

  1. Actions 控制台中,依次转到 Develop > Theme custom
  2. 设置以下任一或所有项:
    • 背景颜色:用作卡片的背景。一般来说,为背景使用浅色,使卡片内容更易于阅读。
    • 主要颜色:卡片标题文本和界面元素的主颜色。通常,使用较深的主要颜色可以与背景颜色形成更好的对比。
    • 字体系列:描述用于标题和其他醒目文本元素的字体类型。
    • 图片角样式:更改卡片角的外观。
    • 背景图片:用于替代背景颜色的自定义图片。针对 Surface 设备处于横屏模式或竖屏模式时提供两张不同的图片。如果您使用背景图片,则主色会设置为白色。
  3. 点击保存
在 Actions 控制台中自定义主题