If you've never used "If This Then That" (IFTTT) then you should at least check it out. It represents a simple way to connect hundreds of services which are capable of triggering an event (the "this") to hundreds of services which can react to an event (the "that"). For example, you can have a certain kind of weather forecast result in your getting an email in advance or have new popular NYTimes books articles go straight to your your links in Pocket.
These are all neat combinations, of which there are many tens of thousands which people have created combining websites, services, and even physical hardware in myrids of combinations.
But maybe you'd like your own favorite application to have a connection to this service so you could make any of hundreds of things happen. It's actually just a few minutes work and I'm going to show you how.
Becoming "This"
- First, you've got to go to IFTTT and if you haven't already got an account, sign up for one. There's no cost associated with an account.
- From the menu attached to your name on the upper right, choose "New applet". That will land you here.
- Click on the "this" so we can pick a service which will trigger an event and type in "maker webhooks" to narrow down the choices.
- Click the green icon for it to go to the next page.
- There's only one trigger for Maker Webhooks, just click the trigger to enter in the information needed by IFTTT.
- IFTTT wants a piece of text unique to this event which will be part of your URL. You're not required to only have one Maker Webhooks trigger, you may have many. This piece of text is what will help IFTTT distinguish between them. For my example I just used "test_event".
- To see this next page you should probably open another tab with with this link: Maker Webhooks. On the upper right you'll see a button labeled "Documentation" you can click to get here. You'll have to forgive me because I've stripped out the unique key from the three places you'd normally see it on this page. When you look at your own page, you'll actually see a very long key (20+ characters) which is unique to you and appears at the end of the URL you're given. It's this URL we will call whenever we want to trigger an event. Within the URL there's a spot marked { event } which is for the text we entered earlier to tell IFTTT which specific event we're triggering. You'll also notice that you're allowed to pass in multiple pieces of data in the JSON body of your call. Depending upon what service gets connected to this event in the applet, those may be useful on the other side.
- Ignoring the side trip we took into the Maker Webhooks documentation, you'll recall that we were creating the trigger. Once you've entered your event name and clicked the "Create Trigger" button you'll find yourself back here. Only notice that the "this" part is now filled in. Click the "that" link to finish this up.
- Now it's time to chose the service which you would like to connect to this particular event. Unlike some of the pages above where I truncated the image so it wasn't ridiculously long, I wanted to show this one in it's entirety just to emphasize how many choices you've got for having an event your JavaScript triggers perform some kind of action elsewhere. This is a seriously long list and well worth a few minutes work to explore.
- Sadly, for this example, I'm going to pick something truly pedestrian. Type "email" into the field to narrow down your choices and you'll see both Email and Email Digest. I'm just going to use the first one, but don't ignore the second, it's a way in which you could trigger several events but then just get one summary email on a periodic basis. Very useful in and of itself.
- Now's your chance to provide a subject for the email as well as format the body of the email. You can use HTML within that body to format what goes out and even pull the values you passed in via JSON for embedding in the email output. Note: I mistakenly thought that IFTTT was always shortening any URLs I put into the body of emails for me and redirecting them through the IFTTT servers but that appears to be an option you can turn off from the settings page. I hope to put that to the test later.
- In a final step, you can give your applet a short punchy name to replace the simple descriptive one the IFTTT software has provided. Then click the "Finish" button to create and enable the new applet.
Triggering an Event
If you're already familiar with Node.js then this next part is pretty basic, but if you're not it might be useful. I made a simple example to show how you can call it. This example uses no NPM packages of any kind, just basic Node.js code.
var http = require('http');
var url = require('url');
let key = '<insert your Maker Webhook key here>';
function triggerIftttMakerWebhook(event, key, value1, value2, value3) {
let iftttNotificationUrl = `https://maker.ifttt.com/trigger/${event}/with/key/${key}`;
let postData = JSON.stringify({ value1, value2, value3 });
var parsedUrl = url.parse(iftttNotificationUrl);
var post_options = {
hostname: parsedUrl.hostname,
port: parsedUrl.port,
path: parsedUrl.path,
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Content-Length': postData.length
}
};
// Set up the request
var post_req = http.request(post_options, function(res) {
res.setEncoding('utf8');
res.on('data', function (chunk) {
console.log('Response: ' + chunk);
});
});
// Trigger a POST to the url with the body.
post_req.write(postData);
post_req.end();
}
triggerIftttMakerWebhook('test_event', key);
Multiple Applets Can Trigger for the Same Event
Try it, setup two applets which both trigger for the same piece of text but which perform different actions (perhaps an email and an SMS). One event will trigger both.
Becoming "That"
But all of this isn't just one way. All of the above has focused on your application calling into IFTTT as a trigger (the "this"), but the Maker Webhooks service can also be used as the "that" in an applet. Thus you can have a web request made to you after some other thing happens as the trigger.
In that case you're allowed to specify the URL to be called, the method (any of GET, POST, PUT, HEAD, DELETE, etc.), and even pass some values from the trigger into the body. That gives your web app some visibility that might otherwise be hard to craft to things like weather, the stock exchange, email, a specific phrase said to an Amazon Alexa device, Twitter events, etc.
Top comments (4)
Excellent work. Your code is simple enough, but you don't need to send a JSON application to the Maker Webhooks service to trigger it. I've developed a working way that uses only one package and four lines of code that will do the job.
It's at arcturusenterprises.weebly.com/con... if you'd like to check it out.
You're correct, in that you don't need or have to POST JSON to the endpoint. However, if you do it like I did then you can pass through several different values with the trigger. Those are then available to use in the email like I did in step 11 above.
If you don't need to pass through any data (for example, if the event itself is all the necessary information) then your technique will work just fine.
Excellent intro to webhooks with IFTTT.
Have you been able to make it work with browser javascript?
I'm getting CORS errors when trying to post, unfortunately
Any workaround?
Wonderful overview, thanks a lot! I have been meaning to get into the IFTT universe.