About Webhooks….

In the last entry, I introduced MQTT, as it is an important messaging protocol for use in home automation and IoT. It will be one of the primary tools in our project illustrating how to connect some unusual technologies into a more standard home automation system. One other component we need to introduce is Webhooks.

There are a number of different definitions for just what a Webhook is. In its simplest form, a Webhook is a callback – an event occurs and in response to the event, an application executes an HTTP post (which initiates an action of some sort on the device or server receiving the notification). From this perspective, a Webhook is really just a very basic API that only offers one function.

Among the many programs and services that work with Webhooks is IFTTT, which is a mainstay in the IoT and Home Automation universes.

My most recent foray into Webhooks with IFTTT was a little adventure. I run a Discord server for an Xbox gaming community. In the past we’d used Slack, but as the community grew, players already accustomed to Discord set up and donated a server. Our Slack channel gradually died off. The only thing that I really missed was the integration with Google calendar.

Fifteen minutes before a scheduled event in the calendar was due to start, Slack would display a notification with a link to the Google Calendar entry. For Discord, I experimented with various bots, but none of them were satisfactory. Rather than wasting more time, I decided to use a Webhook with IFTTT to get it done. It’s an easy process and a great illustration of how you can use Webhooks yourself.

I already had the MEE6 bot installed, which has a role with Webhook rights on my Discord. You can set up your own custom Webhook, as well, if you prefer – you’ll need admin rights, obviously, to add a bot or create a Webhook.

In order to set up the Applet on IFTTT, I grabbed the Webhook URL from Discord (Edit the Webhook in question or grab the URL when creating a new one). The URL is similar to this:

https://discordapp.com/api/webhooks/419797813311209972/VBa3BBBqcyEKg39o18A-iRGV0vAYL-TjBfZS384_AX5HZstbF8etoiVt9RZ2N24nuevz

Next, I go to IFTTT.com and log in.

  1. Click “My Applets”
  2. Click “New Applet”
    Click +this
  3. Type Google Calendar and then Click the Google Calendar icon in the filtered list
  4. Select “Any event starts” when prompted to Choose Trigger
  5. Select the Calendar you want to connect – the first time you integrate with Google Calendar, you will go through the steps to connect and authorize.
    You will also need to select the time before the event starts – select 0 if you want the notification right when the event starts, select 15, 30, or 45 minutes for a little advanced notice.
  6. When you are prompted, click +that
  7. Type Webhooks and click it
  8. Click “Make a web request”

Here’s where the action starts!

  1. Paste the URL from your Discord webhook in the URL field.
  2. Change Method to POST.
  3. Change Content Type to application/json.

Here’s another little detour. A lot of people have a misconception that JSON is a programming language or that you have to be a programmer to work with JSON. Not so. JSON is just a way of fortmatting data. JSON stands for “JavaScript Object Notation.” It’s intended to be very readable by human beings, which is what sets it apart from data types used most often with applications, like SQL. JSON is simply a formatted set of name/value pairs. There are rules for organizing the information stored and sent in JSON format, but it’s not hard to learn or work with.

In the body field of the IFTTT applet, we pass along the way we want our data displayed in JSON format. Here’s an exmple of how it looks:

{ “content”: “<<<{{Title}}>>> is starting!”, “embeds”: [{ “title”: “<<<{{Title}}>>>”, “description”: “<<<{{Description}}>>>”, “author”: { “name”: “This Video Game Community”, “url”: “https://calendar.google.com/calendar/embed?src=d39monkeyju2q69hobo20lhd8o%40group.calendar.google.com&ctz=America%2FNew_York”, “icon_url”: “https://calendar.google.com/googlecalendar/images/favicon_v2014_31.ico” }, “fields”: [ { “name”: “Starts”, “value”: “<<<{{Starts}}>>>”, “inline”: true }, { “name”: “Ends”, “value”: “<<<{{Ends}}>>>”, “inline”: true }, { “name”: “Location”, “value”: “<<<{{Where}}>>>” } ] }] }

That’s not very readable, though, is it? That’s what happens to the JSON once you save the applet. The original version looks like this:

{
“content”: “<<<{{Title}}>>> is starting!”,
“embeds”: [{
“title”: “<<<{{Title}>>>}”,
“description”: “<<<{{Description}}>>>”,
“author”: {
“name”: “This Video Game Community”,
“url”: “https://calendar.google.com/calendar/embed?src=d39monkeyju2q69hobo20lhd8o%40group.calendar.google.com&ctz=America%2FNew_York”,
“icon_url”: “https://calendar.google.com/googlecalendar/images/favicon_v2014_31.ico”
},
“fields”: [
{
“name”: “Starts”,
“value”: “<<<{{Starts}}>>>”,
“inline”: true
},
{
“name”: “Ends”,
“value”: “<<<{{Ends}}>>>”,
“inline”: true
},
{
“name”: “Location”,
“value”: “<<<{{Where}}>>>”
}
]
}]
}

You’ll notice that the variables supplied by Google Calendar are surrounded with <<< >>> – this “escapes” the value, which basically means that if there are multiple lines provided by a variable, it won’t break the Webhook. You can preview your JSON by going to https://leovoel.github.io/embed-visualizer/ and clicking the “Enable Webhook mode” button, then pasting your JSON in the left window. The right window should show you an example of what you can expect to see (the final product will not have the escaped variable names, but instead will display the data from the calendar).

Back in the Applet, after you paste your JSON formatted body into the appropriate blank, you click Save. If you get 400 errors, then there’s an error in your JSON code or your Webhook isn’t set up correctly in Discord (most likely, the role assigned to the bot doesn’t have Webhooks permission – easy fix).

SmarterHome.club is the website for our Facebook community, The Smarter Home Club – which is an umbrella for all kinds of smart home technologies – home automation, security, custom electronics, weather stations, alternative energy, you name it. DIY focused.

If you’re interested in joining the Smarter Home Club’s Facebook group, please follow this link:

The Smarter Home Club on Facebook