I was looking for way to send notifications to Google Chat using the webhook integration. I’ll post my solution as an answer below!
First off, create a Space in Google Chat.
Then create a webhook URL so that you can post messages to that Space:
- In the dropdown in the Space, choose ‘Apps and integrations’
- Select ‘Manage webhooks’
- Give it a name, like ‘SquaredUp’ (you can also give it an avatar) and hit ‘Save’
- Copy the URL to the clipboard
Then in SquaredUp configure a webhook destination with this URL:
- Go to ‘Monitors > Add notification rule > Custom > Add destination’ or ‘Settings > Notifications > Add destination > Custom’
- Enter name, like ‘Google Chat’
- Paste the webhook URL
- Modify the body JSON to remove the
linkproperty. The webhook fails if this property is included. - Add the link to the
textfield, something like this""text": "{{stateSymbol}} {{name}} changed from {{oldState}} to {{newState}}. {{link}}" - Hit test and you should receive a test notification in Google Chat
That’s it.
I hope this helps someone else wanting to get SquaredUp notifications in Google Chat. It was easy to set up and works really well!
Update to use the new tile previews!
- Ensure ‘include tile preview in the message’ is enabled in your notification rules
- This is using the v1 Google Chat API. At some point they may update the URLs to v2, which requires a different payload
Here’s the updated Body text for the notification channel:
{
"cards": [
{
"header": {
"title": "{{stateSymbol}} {{name}} changed from {{oldState}} to {{newState}}",
"subtitle": "{{stateReason}}"
},
"sections": [
{
"widgets": [
{
"textParagraph": {
"text": "<a href=\"{{{link}}}\">{{name}}</a> changed from {{oldState}} to {{newState}}"
}
},
{
"textParagraph": {
"text": "{{stateReason}}"
}
},
{
"textParagraph": {
"text": "This monitor is configured on the <a href=\"{{{dashboardLink}}}\">{{dashboardName}}</a> dashboard in the <a href=\"{{{workspaceLink}}}\">{{workspaceName}}</a> workspace."
}
},
{
"image": {
"onClick": {
"openLink": {
"url": "{{{link}}}"
}
},
"imageUrl": "{{{imagePreviewUrl}}}"
}
},
{
"buttons": [
{
"textButton": {
"onClick": {
"openLink": {
"url": "{{{link}}}"
}
},
"text": "View"
}
}
]
}
]
}
]
}
]
}
That creates a nice visual notification like this:
