Is it possible to change the color of a Google chat webhook?

[Eric Norton]

Hi All, we have an automation rule that sends a webhook (web request) to a Google chat space when a ticket is changed to specific status.  The webhook works but I'm looking for a way to change the color of the text used in the "Card Title".  

This is the line within the webhook request.  "Card Title" shows bold within the Google Chat notification.  This works.

"title": "*Card Title*"

I'm looking for a way to make it bold and RED.  Haven't found code that works.  I tried the below but ended up with errors.

"title": <p style="color:#FF0000";>Card Title</p>

Error message received:

{ "error": { "code": 400, "message": "Invalid JSON payload received. Expected a value.\n*Card Title TO\n^", "status": "INVALID_ARGUMENT" } }

Thanks all for the help.

[Jim Knepley - ReleaseTEAM]

I don't know if you can use CSS styles like that.

The bold emphasis is the result of markdown formatting but you can try something like this:

"title": "<font color=\"#FF0000;\">Card Title</font>"

(ref: https://developers.google.com/workspace/chat/format-messages)

[Eric Norton]

Thanks @Jim Knepley - ReleaseTEAM -  Unfortunately that code didn't work.  Got the same error in the automation audit log.

[Jim Knepley - ReleaseTEAM]

If it's looking for JSON, try wrapping the title in { brackets }.

{
    "title": "<font color=\"#FF0000;\">Card Title</font>"
}

[Eric Norton]

Thanks again Jim but still, no luck.  I've attached a screenshot of the web request.  This is producing an error in the audit log.  Seems the only thing that works is CARD formatting or something simple like: "text": Hello there

[Jim Knepley - ReleaseTEAM]

Instead of focusing on JSON, I'm looking at the Google chat API reference.

I think you're right, a basic text message only has a "text" attribute, and such text might only support a subset of Markdown operators.

Card messages look much more flexible, but they're still JSON payloads.

Google has a card builder tool which is pretty slick, but experimenting with it suggests that, unfortunately, you can't do what you want.

This message:

{
"header": {
"title": "<font color=\"#FF0000\">Jira</font>",
"imageUrl": "https://static-00.iconduck.com/assets.00/jira-icon-512x512-z7na7dot.png",
"imageType": "SQUARE"
},
"sections": [
{
"header": "<font color=\"#FF0000\">Issue Opened</font>",
"collapsible": true,
"uncollapsibleWidgetsCount": 1,
"widgets": [
{
"decoratedText": {
"icon": {
"knownIcon": "TICKET"
},
"topLabel": "ISSUE-1234",
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
"bottomLabel": "Opened"
}
}
]
}
]
}

Produces this card:

 

As you can see, I have a <font> tag in the title, but it doesn't work, where it does work in the decoratedText section.

[Eric Norton]

Thanks.  If I copy and paste that into the automation "send web request" area for "Custom data" I keep getting "Invalid JSON requests" errors.  Hmmm