Google Chat lets you add formatting to messages, including the following:
Format a text message
Chat lets you add basic formatting to a text message, including
bold, italic, and strikethrough, by using a small subset of Markdown syntax. You
format text differently in text messages than in card messages because text
messages are formatted with the same syntax that Chat
users use. To format text that appears in a card, see
Format a card message
.
To format text messages, use the following syntax:
Format
|
Symbol
|
Example syntax
|
Text displayed in Google Chat
|
Bold
|
*
|
*hello*
|
hello
|
Italic
|
_ (underscore)
|
_hello_
|
hello
|
Strikethrough
|
~
|
~hello~
|
hello
|
Monospace
|
` (backquote)
|
`hello`
|
hello
|
Monospace block
|
` ` ` (three backquotes)
|
```
Hello
World
```
|
Hello
World
|
Bulleted list
|
* or - (hyphen) followed by a space
|
* This is the first item in the list
* This is the second item in the list
|
- This is the first item in the list
- This is the second item in the list
|
For example, consider the following JSON:
{
"text": "Your pizza delivery *has arrived*!\nThank you for using _Cymbal Pizza!_"
}
This formatted text message displays the following in a Chat
space:
View text formatting sent in a message
When a user sends a message, the plain-text body of the message is in the
text
field. Some formatting that is applied to the text message using Markdown
syntax, is in the
text
field. Additional formatting is in the
output-only
formattedText
field, including the following:
- Additional Markdown syntax for text
- User mentions
- Custom hyperlinks
- Custom emoji
For example, consider the following text sent by a user:
If the message was formatted by using the
Format
menu in the
Chat UI, the
text
field contains the text only, while the
formattedText
field contains the markups, the text, and the hyperlink. The
following example shows the draft of a text message with a word hyperlinked,
items in a list, and one word bolded:
The message is received in the following format:
{
"text": "I can meet there at:\nNoon\n3 pm\n5 pm\nWhat time works for you?",
"formattedText": "I can meet <http://example.com|there> at:\n* Noon\n* 3 pm\n* 5 pm\nWhat time works for *you*?",
}
Format links
If you include a plain link URL in your message text, such as
http://www.example.com/
, Google Chat uses this as the link text and
automatically hyperlinks that text to the specified URL.
To provide alternate link text for your link, use the following syntax:
Example syntax
|
Text displayed in Google Chat
|
<https://example.com|Example website>
|
|
The pipe and link text are optional, so that
<https://www.example.com/>
and
https://www.example.com/
are equivalent.
Mention users in a text message
Chat apps can
send text messages
that @mention one or all users in a Chat space.
Chat apps can't mention users in a
space that is in import mode
or any users that
haven't joined the space.
@mention specific users
To @mention a specific user, add
<users/{user}>
to the text message where
{user}
is the ID of the user. For example, consider the following text
message where
123456789012345678901
represents the ID for the user Mahan S.:
{
"text": "A customer has reported an issue. Assigning ticket #942 to <users/123456789012345678901>."
}
The text message displays as the following:
You can specify the
users/{user}
value in the following ways:
- If your Google Chat app is responding to a message sent by the
user, you can use the
message.sender.name
field of the
MESSAGE
interaction event
.
If your Google Chat app is creating an
asynchronous text message
,
you can specify the value for
users/{user}
in the following ways:
- Use the
name
field of the Google Chat
User
resource, such as
users/123456789012345678901
.
- Use the user's email address as an alias for the
{user}
value. For
example, if the email address is
mahan@example.com
, you can specify
the user as
users/mahan@example.com
. To use an email alias, your
Google Chat app must
authenticate as a user
.
If you use the People API, you can also use the
people.get
method
to identify the user ID.
@mention all users
To create a text message that @mentions everyone in a space, replace
{user}
with
all
. The following JSON example mentions all users in a message:
{
"text": "Important message for <users/all>: Code freeze starts at midnight tonight!"
}
Inside cards, most text fields support basic text formatting by using a small
subset of HTML tags. You format text differently in card messages than in text
messages because text messages are formatted with the same syntax that
Chat users use. To format text that appears in a text message,
see
Format a text message
.
Use the Card Builder to design and preview JSON card messages for Chat apps:
Open the Card Builder
The supported tags and their purpose are shown in the following
table:
Format
|
Example
|
Rendered result
|
Bold
|
"This is <b>bold</b>."
|
This is
bold
.
|
Italics
|
"This is <i>italics</i>."
|
This is
italics
.
|
Underline
|
"This is <u>underline</u>."
|
This is
underline
.
|
Strikethrough
|
"This is <s>strikethrough</s>."
|
This is
strikethrough
.
|
Font color
|
"This is <font color=\"#FF0000\">red font</font>."
|
This is
red font
.
|
Hyperlink
|
"This is a <a href=\"https://www.google.com\">hyperlink</a>."
|
This is a
hyperlink
.
|
Time
|
"This is a time format: <time>2023-02-16 15:00</time>."
|
This is a time format:
.
|
Newline
|
"This is the first line. <br> This is a new line.
"
|
This is the first line.
This is a new line.
|
Add a built-in icon to a card
The
DecoratedText
and
ButtonList
widgets support the
icon
element
used to specify one of the built-in icons available in Chat.
The following table lists the built-in icons that are available for card messages:
flight
|
AIRPLANE
|
bookmark
|
BOOKMARK
|
directions_bus
|
BUS
|
directions_car
|
CAR
|
schedule
|
CLOCK
|
confirmation_number
|
CONFIRMATION_NUMBER_ICON
|
subject
|
DESCRIPTION
|
attach_money
|
DOLLAR
|
mail
|
EMAIL
|
event_seat
|
EVENT_SEAT
|
flight_land
|
FLIGHT_ARRIVAL
|
flight_takeoff
|
FLIGHT_DEPARTURE
|
hotel
|
HOTEL
|
grade
|
HOTEL_ROOM_TYPE
|
insert_invitation
|
INVITE
|
location_on
|
MAP_PIN
|
card_membership
|
MEMBERSHIP
|
people
|
MULTIPLE_PEOPLE
|
person
|
PERSON
|
local_phone
|
PHONE
|
restaurant
|
RESTAURANT_ICON
|
shopping_cart
|
SHOPPING_CART
|
grade
|
STAR
|
store
|
STORE
|
local_play
|
TICKET
|
train
|
TRAIN
|
videocam
|
VIDEO_CAMERA
|
play_circle_filled
|
VIDEO_PLAY
|
The
following is an example of a card with an email icon:
Add a Google Material Design icon to a card
The
DecoratedText
and
ButtonList
widgets let you use the
Google Material icons
so that you can select from over 2500+ icon options and customize the
weight, fill, and grade of the icons.
The following is an example of card with a Google Material icon:
Add a custom icon to a card
The
DecoratedText
and
ButtonList
widgets let you use the built-in icons, or define your own custom icons. To
add a custom icon to a card, include the
iconUrl
field and specify the icon's
corresponding URL.
The following is an example of a custom icon: