IFTTT: Integrate Ably channels with IfThisThenThat

The Ably Reactor provides a way to trigger events and to stream data from Ably’s pub/sub channels. This tutorial will go over how to use the Ably Reactor with the IfThisThenThat Webhooks service. IfThisThenThat (IFTTT) allows you to create chains of conditional statements called Applets. These Applets can be triggered by events on your Ably Channel. They in turn can trigger other web services such as email, social media, chat apps, IoT devices etc.

In this specific example we’ll be using IFTTT to trigger a post to a Slack channel every time a message is published on your Ably channel.

What we’ll be building

We’ll be building a bridge simulator game using HTML, CSS, JavaScript and Reactor Events. Players will receive commands from their “captain” via Slack. These commands will let them know what to press in the game to move to the next command. Clicking the controls that match the commands will win them the game, mistakes will lose and crash the spaceship.


screenshot of the game we will be making

Prerequisite Accounts

You’ll need an Ably account, login or sign up for free at https://www.ably.io/.
You’ll also need an IFTTT account, login or sign up at https://ifttt.com/.
Finally you’ll need an account with Slack and a workspace to send messages to, sign in or create a workspace at https://slack.com/signin

Step 1 – Set up a free account with Ably

In order to run these tutorials locally, you will need an Ably API key. If you are not already signed up, you should sign up now for a free Ably account. Once you have an Ably account:

  1. Log into your app dashboard
  2. Under “Your apps”, click on “Manage app” for any app you wish to use for this tutorial, or create a new one with the “Create New App” button
  3. Click on the “API Keys” tab
  4. Copy the secret “API Key” value from your Root key and store it so that you can use it later in this tutorial

    Copy API Key screenshot

Creating an Ably Reactor Rule for a Reactor Event

The Ably Reactor is a scalable service to trigger events and stream data from Ably’s pub/sub channels. Creating an Integration Rule will allow your serverless functions or your own servers to be invoked following any events on Ably.

  1. Log into your app dashboard
  2. Go to your Ably Dashboard
  3. Choose the “Reactor” tab
  4. Click “New Reactor Rule” button
  5. Click the “Choose” button under “Reactor Event” type


Click on the 'New Reactor Rule' button


Click on the 'Choose' button under 'Reactor Event' type

Choose the “IFTTT” service integration option

On the resulting form we’ll need an IFTTT key to connect Ably to IFTTT with webhooks.

  1. Click the “open IFTTT Webhook Settings” button (this will take you to the IFTTT web app)
  2. On the resulting page click “Documentation
  3. Copy your key from the top of the documentation page
  4. Go back to your Ably Reactor Integration Rule Settings
  5. Paste the key into the “IFTTT Webhook key” input.
  6. Give the Webhook event a name (eg channel_message_published)
  7. Set up a channel filter if necessary
  8. Click “Create


Click the 'open IFTTT Webhook Settings' button

You have now set up a Reactor Rule that will be triggered by events published on your Ably channel, but we’ll also need to create an Applet on IFTTT for it to trigger.

Creating an IFTTT Applet

  1. Visit https://ifttt.com/ (log in if you have not already)
  2. Click “Explore” in the top right hand corner
  3. Scroll until you find the “Create your own” button (or visit https://ifttt.com/create)
  4. Search for “webhooks” in the searchbox
  5. Click the “Webhooks” button
  6. Click the “Receive a web request” section
  7. Add the name for the Webhook event that you created earlier (eg channel_message_published)

Next we will need to choose a service that we want to hook our published message up to. In this case we’re going to choose Slack, but you could use any number of services that IFTTT connects to.

  1. Click the “+ That” which should now be presented to you
  2. Search for “slack”
  3. Click “Slack
  4. Click “Connect
  5. Log in to your Slack workplace in the resulting popup
  6. Allow the requested permissions

The final stage of our setup will be choosing an action to trigger in Slack. The IFTTT Slack service allows you to post to channels, to private groups or to send direct messages. For the purpose of this tutorial you’ll send direct messages to your own Slack handle in your chosen Slack channel (for the sake of not filling your Slack channels with messages!).

We’ll be sending the body of the message that was published to your Ably channel to Slack, so for this tutorial we’re only going to send one value as the message body, but you could customize this as much as you like.

  1. Click “Post to channel
  2. In the resulting form, under “Which channel”:
    1. select Direct Messages
    2. select your own Slack handle
  3. Under “Message”:
    1. delete the content in the textbox
    2. Click “Add ingredient
    3. Add “Value1”
  4. Under “Title URL” add “Captain Picard” (or the captain name of your choice!)
  5. You can even add a thumbnail avatar of your captain if you’d like by pasting a url to your chosen image
  6. Click “Create Action
  7. Click “Finish

You have now set up your Ably channel to post to Slack using IFTTT! Next up, we need to publish some data to our Ably Channel. For the purposes of this tutorial, we will create a game which will generate data to publish to your channel, if you already have a channel with data being published then you can skip the use of the game, but you will need to take a look at how the game publishes messages.

Building the Game

To get you up and running quickly, we’ve made the code for the game available via Glitch. You can remix or clone this repository. Press the Remix to Edit button in the top right hand corner of the page. We’ll need to edit the code a little to add in your Ably API key.

How the game works

The game is a web app, created with Glitch. It uses Node.js and Express. Instructions on how the game works can be read at in the readme.md. We’re using the game to generate data to send to our Ably channel, if you already have data going to an Ably channel then you will not need the game at all! The game generates 10 ‘moves’ for the player to take and publishes them, one by one, to an Ably channel as the player completes previous moves.

How does the game publish messages?

The game publishes game move “commands” to an Ably channel using the Ably Realtime API. Take a look at the ablyConnector.js file in the root, you’ll see some code like this:

  const ably = require('ably');

  const client = new ably.Realtime(process.env.ABLY_API_KEY)
  const channel = client.channels.get('space-game');

  channel.publish('ably-space-game', jsonBody);
}...

This code uses the Ably Realtime JavaScript client library to publish the status.hint (which is our move command) to a channel called “space-game”.

First of all we require the library which will allow us to manage our connection to and management of our Ably channel.
Then we will create a client and authenticate with Ably using our API key (we’ll add our key in the next step of the tutorial). This can then attach to our space-game channel.

Finally we publish our message to the space-game channel, it is important to note that IFTTT requires the data it receives to be in the following JSON format:

{"value1":"foo", "value2":"bar", "value3":"baz"}

This is why we are sending { value1: status.hint } as the body of the message.

Without this format, it is still possible to trigger an event, but not to send customized messages. In the case of this game, we’re sending only value1, as we have no need to use value2 or value3, but you could use these to send further data; to add flavor text to the commands or perhaps a sign-off from your ‘captain’.

Configuring the game

In order to publish messages, the game will need to have your Ably API key. We store this in a .env file to keep it secure. Do not commit your .env files to github, you can add an exclusion in your .gitignore file to make sure that it doesn’t get committed (Glitch does this for you automatically).

Open the ./env file in the root of the game and add the following line.

Using your API key is the basic authentication method to authenticate with Ably. While this is simple and easy to use for this demo, in reality, we always recommend that you use Token authentication in production level apps. Tokens expire at regular intervals and expect the clients to request new ones, thus ensuring better security as the API key is never directly exposed in the client-side code.

ABLY_API_KEY = "YOUR_API_KEY"

Add your Ably API key in between the quotation marks and you’re all done!

Congratulations! You can now play the Ably Space game by clicking on the Show button in your glitch project.
May the Realtime Data be with you 🚀


Animated image of the game app in action

Next Steps

1. Take a look at the Reactor Functions documentation for further details about what was described in this tutorial.
2. Find out more about Ably Reactor features and capabilities.
3. Learn more about Ably features by stepping through our other Ably tutorials
4. Gain a good technical overview of how the Ably realtime platform works
5. Get in touch if you need help