本页介绍了如何向卡片或对话框消息添加文本和图片,以及如何修改消息和图片在消息中的显示方式。
使用卡片构建器设计和预览 Chat 应用的 JSON 卡片消息:
打开卡片制作工具前提条件
添加图片
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,您可以将 cropStyle
和 borderStyle
应用于图片。
以下示例在剪裁了其中一张图片的网格中显示两张图片:
剪裁图片
您可以通过应用 cropStyle
来调整图片的形状。有几种形状可以应用到图像:
- 使用
SQUARE
可应用方形剪裁。 - 使用
CIRCLE
应用圆形剪裁。 - 使用
RECTANGLE_CUSTOM
可应用采用自定义宽高比的矩形剪裁。例如,您可以使用RECTANGLE_4_3
应用宽高比为 4:3 的矩形剪裁。
以下示例在网格中显示五张图片,对每张图片应用了不同的 cropStyle
:
添加图标
Icon
widget 代表内置图标或自定义图标。您可以通过以下方式在卡片消息和对话框中使用 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 错误。