The DecoratedText
widget displays text with optional layout and functionality features. For example:
- Display an
icon
in front of the text withstartIcon
. - Show a title before the text with
topLabel
. - Add a clickable button with
button
or switchable toggle withswitchControl
.
Use the DecoratedText
widget when you need to present information in an easy-to-consume and interactive way. The widget is perfect for contact cards, order status updates, and work ticket notifications.
The following is a card consisting of a DecoratedText
widget used to display
contact details, such as email address, online status, phone number, and
website:
Format text in a DecoratedText
widget
The DecoratedText
widget supports simple text HTML formatting. When setting
the text content of these widgets, just include the corresponding HTML tags. For
more information about which HTML tags are supported, see
Card text formatting.
JSON representation and fields
JSON representation |
---|
{ "icon": { object ( |
Fields | |
---|---|
icon
|
Deprecated in favor of
|
startIcon
|
The icon displayed in front of the text. |
topLabel
|
The text that appears above
|
text
|
Required. The primary text. Supports simple formatting. For more information about formatting text, see Formatting text in Google Chat apps and Formatting text in Google Workspace Add-ons. |
wrapText
|
The wrap text setting. If
Only applies to
|
bottomLabel
|
The text that appears below
|
onClick
|
This action is triggered when users click
|
Union field
control . A button, switch, checkbox, or image that appears to the right-hand side of text in the
decoratedText
widget.
control
can be only one of the following:
|
|
button
|
A button that a user can click to trigger an action. |
switchControl
|
A switch widget that a user can click to change its state and trigger an action. |
endIcon
|
An icon displayed after the text. |
Icon
An icon displayed in a widget on a card. For an example in Google Chat apps, see Icon.
JSON representation |
---|
{ "altText": string, "imageType": enum ( |
Fields | |
---|---|
altText
|
Optional. A description of the icon used for accessibility. If unspecified, the default value
If the icon is set in a
|
imageType
|
The crop style applied to the image. In some cases, applying a
|
Union field
icons . The icon displayed in the widget on the card.
icons
can be only one of the following:
|
|
knownIcon
|
Display one of the built-in icons provided by Google Workspace.
For example, to display an airplane icon, specify
For a full list of supported icons, see built-in icons. |
iconUrl
|
Display a custom icon hosted at an HTTPS URL. For example:
Supported file types include
|
ImageType
The shape used to crop the image.
Enums | |
---|---|
SQUARE
|
Default value. Applies a square mask to the image. For example, a 4x3 image becomes 3x3. |
CIRCLE
|
Applies a circular mask to the image. For example, a 4x3 image becomes a circle with a diameter of 3. |
OnClick
Represents how to respond when users click an interactive element on a card, such as a button.
JSON representation |
---|
{ // Union field |
Fields | |
---|---|
Union field
|
|
action
|
If specified, an action is triggered by this
|
openLink
|
If specified, this
|
openDynamicLinkAction
|
An add-on triggers this action when the action needs to open a link. This differs from the
|
card
|
A new card is pushed to the card stack after clicking if specified. Supported by Google Workspace Add-ons, but not Google Chat apps. |
Action
An action that describes the behavior when the form is submitted. For example, you can invoke an Apps Script script to handle the form. If the action is triggered, the form values are sent to the server.
JSON representation |
---|
{ "function": string, "parameters": [ { object ( |
Fields | |
---|---|
function
|
A custom function to invoke when the containing element is clicked or othrwise activated. For example usage, see Create interactive cards. |
parameters[]
|
List of action parameters. |
loadIndicator
|
Specifies the loading indicator that the action displays while making the call to the action. |
persistValues
|
Indicates whether form values persist after the action. The default value is
If
If
|
interaction
|
Optional. Required when opening a dialog. What to do in response to an interaction with a user, such as a user clicking a button in a card message.
If unspecified, the app responds by executing an
By specifying an
Supported by Chat apps, but not Google Workspace Add-ons. If specified for an add-on, the entire card is stripped and nothing is shown in the client. |
OpenLink
Represents an
onClick
event that opens a hyperlink.
JSON representation |
---|
{ "url": string, "openAs": enum ( |
Fields | |
---|---|
url
|
The URL to open. |
openAs
|
How to open a link. Not supported by Chat apps. |
onClose
|
Whether the client forgets about a link after opening it, or observes it until the window closes. Not supported by Chat apps. |
Button
A text, icon, or text and icon button that users can click. For an example in Google Chat apps, see Button list.
To make an image a clickable button, specify an
(not an
Image
) and set an
ImageComponent
onClick
action.
JSON representation |
---|
{ "text": string, "icon": { object ( |
Fields | |
---|---|
text
|
The text displayed inside the button. |
icon
|
The icon image. If both
|
color
|
If set, the button is filled with a solid background color and the font color changes to maintain contrast with the background color. For example, setting a blue background likely results in white text. If unset, the image background is white and the font color is blue.
For red, green, and blue, the value of each field is a
Optionally set
For
For example, the following color represents a half transparent red:
|
onClick
|
Required. The action to perform when a user clicks the button, such as opening a hyperlink or running a custom function. |
disabled
|
If
|
altText
|
The alternative text that's used for accessibility. Set descriptive text that lets users know what the button does. For example, if a button opens a hyperlink, you might write: "Opens a new browser tab and navigates to the Google Chat developer documentation at https://developers.google.com/chat". |
SwitchControl
Either a toggle-style switch or a checkbox inside a
decoratedText
widget.
Only supported in the
decoratedText
widget.
JSON representation |
---|
{ "name": string, "value": string, "selected": boolean, "onChangeAction": { object ( |
Fields | |
---|---|
name
|
The name by which the switch widget is identified in a form input event. For details about working with form inputs, see Receive form data. |
value
|
The value entered by a user, returned as part of a form input event. For details about working with form inputs, see Receive form data. |
selected
|
When
|
onChangeAction
|
The action to perform when the switch state is changed, such as what function to run. |
controlType
|
How the switch appears in the user interface. |
Troubleshoot
When a Google Chat app or card returns an error, the Chat interface surfaces a message saying "Something went wrong." or "Unable to process your request." Sometimes the Chat UI doesn't display any error message, but the Chat app or card produces an unexpected result; for example, a card message might not appear.
Although an error message might not display in the Chat UI, descriptive error messages and log data are available to help you fix errors when error logging for Chat apps is turned on. For help viewing, debugging, and fixing errors, see Troubleshoot and fix Google Chat errors.