Ë
Pål Torgersen By Pål Torgersen • August 9, 2017

Tutorial: Create Video Integrations With IFTTT and Webhooks

In this blog post we will describe how you can combine the SYNQ programmable webhooks with IFTTT (If This Then That) to create simple integrations. In a previous blog post we described how you can use our programmable webhooks and the Mailgun API to trigger a range of email notifications when a video is uploaded, transcoded or a video object has changed in any way. If you are new to the SYNQ Video API, I would recommend that you start there for a full description on how to setup and configure our webhooks. In this blogpost we will give you a tutorial on how you can log all uploaded videos in a Google sheet using IFTTT. We will also describe what IFTTT is and how you can use it.

IFTTT is an online integration platform that is based on triggers and actions. They support a range of different online services and apps that you can easily integrate ranging from Google documents, social media platforms to smart house hardware if you would like to automate your coffee maker. They offer a intuitive and easy to use interface that can be used by everyone. You can either build your own applets (choose the services you like to integrate), use pre existing applets (ready to go integrations created by users (Makers)) or the most flexible Maker channel that lets you integrate any services that can send or receive web requests (webhooks). This is what we will be looking at in this blogpost to integrate the SYNQ Video API using our programmable webhooks.

The whole idea of IFTTT is that there are triggers and actions. So something happens in one system or service and then an action is performed on a different system.

If this then that

In our case, the trigger is a post request from the SYNQ Video API and the action is that we want to add some information in a Google sheet. So let us go through the whole setup:

    1. First you need to sign up for an account on IFTTT.com. this is free. You also need to register on synq.fm to get a 14-days free trial.
    2. Log into your IFTTT account and head over to https://ifttt.com/maker_webhooks and click connect to activate the possibility for web requests.
    3. Then go to My Applets in the header menu and click “New Applet”:Creating a new applet in IFTTT
    4. Click the “+” next to “this” to add your trigger. And search for “Maker Webhooks”, click it and choose the trigger “Receive web request”.Creating a new applet in IFTTTSearching for service in IFTTT
    5. Give the event a name. We will call the event “video_ready”. Then click “Create trigger”:
      Creating triggers in IFTTT
    6. You should see the image below and you are ready to add the action.ifttt-post-6.png
    7. Click the blue "+" icon to add an action.
    8. Search for “Google Drive” in the services search box and click it.
    9. Click “Connect” to give it access to your Google Drive to be able to create and update a spreadsheet.
    10. Click the box “Add row to spreadsheet”IFTTT Add row to spreadsheet
    11. Then you will have the possibility to name the spreadsheet, edit the formatting of the data sent in the Webhooks (we will look at that later in the blog post) and choose the folder path for the Google sheet-file. I will just keep the suggested fields for now. Click “Create action”.Create new action in IFTTT
    12. Your Applet should look something like this: Review and finish applet in IFTTT
    13. After you click "Finish", it should appear in "My Applets". Make sure the Applet is set to "On". 

 

Now IFTTT is ready to receive webhooks. Let's take a look at how the web request should be formatted. Navigate to: https://ifttt.com/maker_webhooks and click documentation in the upper right corner. This should show you your maker key and the URL and JSON format expected. Add the name of the event to the URL (video_ready) and I included “embed_url” in Value 1 in the JSON. Click the “Test it”-button and you should be able to see if your trigger works.

Testing IFTTT webhook trigger

 

Check your Google Drive account and look for the IFTTT folder or the chosen folder path. Your spreadsheet should include a date/time-stamp, the event name (video_ready) and the value that we added manually for the test; “value1”; embed_url. We can verify that the trigger works. Now it's time to set up the webhook in the SYNQ admin panel.

Google Sheets IFTTT wehook

 

Please refer to our previous blogpost on how to add and configure webhooks in the SYNQ dashboard for a detailed description. Now login to your SYNQ Dashboard, find the project you would like to use, click it and scroll down to the webhook “on_video_update”. This webhook looks at any change in the video object. The code can be added in the black box. SYNQ programmable webhooks are based on JavaScript. First we need to add the function declaration for the “on_video_update”-webhooks which should be:

function on_video_update(oldVideo, newVideo)

Then we define the endpoint for the webhooks which we have from IFTTT, notice that that it refers to the event name; “video_ready” in the URL:

ifttt_gsheets_uri = 'https://maker.ifttt.com/trigger/video_ready/with/key/<YOUR IFTTT KEY>'

Then we perform the check to see if the state of the lowest quality output from our transcoder has changed from "processing" to "complete". Then the video will be ready for playback with our embed player:

if(oldVideo.get("outputs.mp4_360.state") != "complete" && newVideo.get("outputs.mp4_360.state") == "complete")

Then we define the embed_url that we want to send in the webhook:

embed_url = newVideo.get("player.embed_url");

In the last step we add the endpoint URL, the content type (which IFTTT expects) and we add the embed_url to the JSON body in “value1”.

The final result should look like:

function on_video_update(oldVideo, newVideo)
{
 ifttt_gsheets_uri = 'https://maker.ifttt.com/trigger/video_ready/with/key/<YOUR IFTTT KEY>';
 
 //webhooks notification  will be sent to IFTTT to add a row in google sheets when video is ready for playback
 if(oldVideo.get("outputs.mp4_360.state") != "complete" && newVideo.get("outputs.mp4_360.state") == "complete")
 {
     embed_url = newVideo.get("player.embed_url");

     v1.http.POST({
         "url": ifttt_gsheets_uri,
         "headers": {"Content-Type": "application/json"},
         "rawBody": JSON.stringify ({ "value1" : embed_url, "value2" : "value2", "value3" : "value3" })      
       });
 }
}

Click Save in the bottom of the terminal window and make sure to activate the Webhook with the slider. What should happen now is that when a video is uploaded via the SYNQ Video API and the lowest transcoded .mp4 is complete/available, a webhook is sent to IFTTT with the player embed URL that adds a row in a spreadsheet.

If you haven't used the SYNQ Video API before and just want to test it easily you can follow this guide on how to upload a video using the interactive API reference.

The steps for a simple test are:

  • Copy your API key from the project where you configured your webhook
  • Head over to https://docs.synq.fm/api/
  • Add your API key and run the create call
  • Copy the videoid from the response
  • Add the videoid to the uploader call and run it
  • Copy the uploader_url from the response and paste it the address field
  • Upload a video

Or you could just use one of our SDKs available here.

After the video is uploaded, this is the result:

Animation showing how Google Sheets and IFTTT communicate

Hope you liked this small tutorial, feel free to experiment with some of the other possible actions. Here are some examples:

  • Post video to Facebook or Twitter
  • Send notification that there is a new video available via the IFTTT app
  • Send an email with mailgun or mailchimp
  • Send a notification to Slack

Let us know in the comments if you have some other ideas for cool workflows!


Sign up for free and start adding video functionality into your web or mobile solution today.

GET YOUR FREE API KEY


 

Related posts: