向卡片中添加文字和图片

本页介绍了如何向卡片添加文字和图片并设置其格式。

如需详细了解如何构建卡片,请参阅 为 Google Chat 应用构建卡片


使用卡片构建器设计和预览聊天应用的 JSON 卡片消息:

打开卡片制作工具

前提条件

一款已启用互动功能的 Google Chat 应用。要创建 交互式 Chat 应用,请完成以下快速入门之一 针对您要使用的应用架构

添加图片或图标

本部分介绍了如何向卡片中添加视觉元素,例如图片、 图片组件和图标

添加图片

Image widget ,显示托管在 HTTPS 网址上的 PNG 或 JPG 图片。 所显示图片的宽度填满所显示卡片的整个宽度; 调整高度以保持图片的宽高比。Image widget 支持 onclick 项操作 用户点击图片时发生的情况onclick 操作的示例包括:

  • 使用以下应用打开超链接: OpenLink、 例如指向 Google Chat 开发者文档的超链接 https://developers.google.com/chat
  • 运行 行动 运行自定义函数,例如调用 API。

Image widget 具有以下限制:

  • 仅支持 PNG 和 JPG 图片。
  • 主机网址必须为 HTTPS
  • 为了确保卡片性能,建议的图片大小上限为 2MB。

以下是一张由 Image widget 组成的卡片。它会显示 Google Chat 开发者文档着陆页图片。当用户点击 图片,系统会在新标签页中打开 Google Chat 开发者文档。

添加图片组件

Image widget 是样式设置有限的图片。一个 imageCompent widget 可让您将 cropStyleborderStyle 应用于图片。

以下示例以网格形式显示了两张图片,其中一张图片的 已剪裁:

您可以调整图片组件的形状,只需应用 cropStyle。 您可以对图片应用多种形状:

  • 使用 SQUARE 进行方形剪裁。
  • 使用 CIRCLE 可进行圆形剪裁。
  • 使用 RECTANGLE_CUSTOM 应用具有自定义宽高比的矩形剪裁 宽高比。例如,您可以使用 RECTANGLE_4_3 对矩形进行剪裁 宽高比为 4:3

以下示例在网格中显示了五张图片,这些图片具有不同的 cropStyle 应用到每张图片:

添加图标

通过 Icon widget 代表 内置 图标或 自定义 图标。您可以通过向卡片添加图标来执行以下任何操作:

  • 显示独立的图标。
  • 在相关文本前面显示图标,作为 DecoratedText widget。
  • 将图标显示为互动按钮,作为 ButtonList widget。

下面是一张卡片,由带有内置图标的 Icon 组件组成:

下表列出了可用于卡片消息的内置图标:

飞机 书签
公交车 汽车
时钟 CONFIRMATION_NUMBER_ICON
说明 美元
电子邮件 EVENT_SEAT
FLIGHT_ARRIVAL FLIGHT_DEPARTURE
酒店 HOTEL_ROOM_TYPE
邀请 MAP_PIN
会员资格 MULTIPLE_PEOPLE
用户 电话
RESTAURANT_ICON SHOPPING_CART
STAR 商店
训练
VIDEO_CAMERA VIDEO_PLAY

向卡片中添加文本

本部分介绍了如何在卡片中添加文本和设置文本格式。

添加一段设置了格式的文本

通过 TextParagraph widget ,用于显示带有可选 HTML 格式的文本段落。设置 这些微件的文本内容,只需添加相应的 HTML 标记即可。 有关支持的 HTML 代码的详情,请参见 设置卡片中显示的文字的格式

例如,段落文本可以使用以下格式:

  • 使用 HTML <b><u><i> 显示粗体、下划线或斜体文本 代码。
  • 使用 HTML <a href="https://www.google.com">hyperlinks</a> 链接到网站。
  • 使用 HTML <font color="#ea9999">font tags</font> 添加一些颜色。

每个 TextParagraph widget 都会渲染为一个新段落,并且可以视为 类似于 HTML <p> 标记。

以下是一张卡片,由两个 TextParagraph widget 组成,用于 使用简单的 HTML 格式展示两个段落:

添加可收起的文本段落

可收起的文本段落使用户能够按需显示更多信息。 此微件非常适合展示冗长的内容或其他详细信息, 选择后可以进行浏览,从而创建一个动态的互动用户 体验。

包含装饰元素的显示文本

通过 DecoratedText widget 用于显示带有可选布局和功能的文本。例如:

  • 使用 startIcon 在文本前面显示 icon
  • 使用 topLabel 在文本前面显示标题。
  • 使用 button 添加一个可点击的按钮,或使用 switchControl 添加一个可切换的切换开关。

如果您需要在DecoratedText 和互动方式。该微件非常适合 名片、订单状态更新和工作工单通知。

DecoratedText widget 支持简单的文本 HTML 格式。设置 这些微件的文本内容,只需添加相应的 HTML 标记即可。对于 有关支持的 HTML 代码的详情,请参见 卡片文字格式

以下是一张卡片,由 DecoratedText widget 组成,用于显示 详细联系信息,例如电子邮件地址、在线状态、电话号码和 网站:

问题排查

当 Google Chat 应用或 card 会返回错误, 聊天界面会显示一条内容为“出了点问题”的消息。 或“无法处理您的请求”。有时,Chat 界面 不会显示任何错误消息,但 Chat 应用或 卡片会产生意外结果;例如,卡片消息 。

虽然 Chat 界面中可能不会显示错误消息, 提供描述性错误消息和日志数据,以帮助您修正错误 启用 Chat 应用的错误日志记录时。如需观看方面的帮助, 请参阅 排查并修正 Google Chat 错误