本页介绍了如何向卡片或对话框消息添加文本和图片,以及如何修改文本和图片在消息中的显示方式。
使用卡片构建器设计和预览聊天应用的 JSON 卡片消息:
打开卡片构建器前提条件
添加图片
Image
微件可显示托管在 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,您可以将 cropStyle
和 borderStyle
应用于图片。
以下示例显示了剪裁了其中一张图片的网格中的两张图片:
剪裁图片
您可以通过应用 cropStyle
来调整图像的形状。您可以对图片应用多种形状:
- 使用
SQUARE
进行方形剪裁。 - 使用
CIRCLE
可进行圆形剪裁。 - 使用
RECTANGLE_CUSTOM
可应用具有自定义宽高比的矩形剪裁。例如,您可以使用RECTANGLE_4_3
以 4:3 的宽高比应用矩形剪裁。
以下示例以网格形式显示了五张图片,并为每张图片应用了不同的 cropStyle
:
添加图标
Icon
微件表示内置图标或自定义图标。您可以通过以下方式在卡片消息和对话框中使用 Icon
:
- 显示独立的图标。
- 作为
DecoratedText
widget 的一部分,在相关文本前面显示图标。 - 将图标显示为互动按钮,作为
ButtonList
widget 的一部分。
下面是一张卡片,由带有内置图标的 Icon
组件组成:
下表列出了可用于卡片消息的内置图标:
飞机 | BOOKMARK | ||
BUS | 汽车 | ||
时钟 | CONFIRMATION_NUMBER_ICON | ||
说明 | 美元 | ||
电子邮件 | EVENT_SEAT | ||
FLIGHT_ARRIVAL | FLIGHT_DEPARTURE | ||
酒店 | HOTEL_ROOM_TYPE | ||
邀请 | MAP_PIN | ||
会员资格 | MULTIPLE_PEOPLE | ||
用户 | 电话 | ||
RESTAURANT_ICON | SHOPPING_CART | ||
加星标 | 商店 | ||
票 | TRAIN | ||
VIDEO_CAMERA | VIDEO_PLAY |
添加一段设置了格式的文本
TextParagraph
widget 用于显示采用可选的 HTML 格式设置的文本段落。在设置这些 widget 的文本内容时,只需添加相应的 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
widget。该微件非常适合名片、订单状态更新和工作工单通知等用例。
DecoratedText
widget 支持简单的文本 HTML 格式。在设置这些 widget 的文本内容时,只需添加相应的 HTML 标记即可。如需详细了解哪些 HTML 标记受支持,请参阅卡片文本格式。
以下是一张卡片,其中包含一个 DecoratedText
widget,用于显示详细联系信息,如电子邮件地址、在线状态、电话号码和网站:
排查问题
当 Google Chat 应用或卡片返回错误时,Chat 界面会显示一条消息,提示“出了点问题”。或“无法处理您的请求”。有时,Chat 界面不显示任何错误消息,但 Chat 应用或卡片会产生意外结果;例如,卡片消息可能不会显示。
虽然 Chat 界面中可能未显示错误消息,但当为 Chat 应用启用错误日志记录时,系统会提供描述性错误消息和日志数据来帮助您修复错误。如需查看、调试和修正错误方面的帮助,请参阅排查和修正 Google Chat 错误。