Is it possible to change the color of a Google chat webhook?
Asked by 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.


Answers:
author: Jim Knepley - ReleaseTEAM
body: I don't know if you can use CSS styles like that.

The bold emphasis is the result of [markdown formatting](https://support.google.com/chat/answer/7649118?hl=en&co=GENIE.Platform%3DAndroid) but you can try something like this:

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

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

comments: author: Eric Norton
body: Thanks [@Jim Knepley - ReleaseTEAM](/t5/user/viewprofilepage/user-id/5333848) - Unfortunately that code didn't work. Got the same error in the automation audit log.


author: Jim Knepley - ReleaseTEAM
body: If it's looking for JSON, try wrapping the title in { brackets }.

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


author: Eric Norton
body: 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![Sebd web request.png](https://community.atlassian.com/t5/image/serverpage/image-id/336359i3DDC0F1C23CF6A72/image-size/large?v=v2&px=999 "Sebd web request.png")


author: Jim Knepley - ReleaseTEAM
body: Instead of focusing on JSON, I'm looking at the [Google chat API reference](https://developers.google.com/workspace/chat/create-messages).

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](https://addons.gsuite.google.com/uikit/builder) 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:

![Screenshot 2024-07-18 084505.png](https://community.atlassian.com/t5/image/serverpage/image-id/336389iCBC6C7D451878773/image-size/large?v=v2&px=999 "Screenshot 2024-07-18 084505.png")

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.


author: Eric Norton
body: 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

![Screenshot 2024-07-18 at 1.08.37?PM.png](https://community.atlassian.com/t5/image/serverpage/image-id/336439i499DE1AB16045504/image-size/large?v=v2&px=999 "Screenshot 2024-07-18 at 1.08.37?PM.png")


Tags: cloud

jira-service-management

jira-service-management-cloud