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

Build a simple video review and publishing workflow with IFTTT, webhooks and Trello

In two previous blog posts we described how you can integrate the SYNQ Video API with other services using IFTTT or other APIs. We described how you can integrate the SYNQ Video API with Mailgun to trigger an email notification if a video is uploaded or has finished transcoding and how you can add all the player embed URLs to a Google spreadsheet using IFTTT and their Maker Channel.

cov_ifttt2workflow.jpg

In this blog post we want to provide a way to use our programmable webhooks together with IFTTT to build a simple video review and publishing workflow in Trello. Say you have implemented our video API on your website or in an application, and you let your users upload videos. You would like to post these on a social media platform, but would like to review the videos before publishing in an easy way.

This can be done quite easily by using our webhooks, IFTTT and Trello. For a detailed description on how to use IFTTT and how to configure our webhooks I would recommend reading these previous blog posts.

We will start by creating a new Trello board that I called Video Review and add 3 lists, “To be reviewed”, “In review” and “Published”. 

Skjermbilde 2017-07-06 kl. 11.01.59.png

 

Then I will move over to IFTTT to create a new Applet. I will start by adding a trigger for receiving a web request/webhook. Search and select Maker Webhooks (If you haven't used them before I recommend checking out this blogpost which goes into detail on how to use them and then navigate to https://ifttt.com/maker_webhooks to connect the service to your IFTTT account). Click “Receive a web request”. Give the trigger an Event Name, I’ll use the name “review”. Then click “Create trigger”.

Now it's time to add an action (the that). Click the blue “+” and search for Trello (connect it if you haven't already). Click it and choose “Create a card”. Now you can choose the board and list that you would like to add a card to. I choose the board “Video Review” and add the list name “To be reviewed”. You can then choose the position of the card in the list. Now let’s configure the title and description to make it work. In the title I will only have the ingredient “Value 1”. IFTTT accepts 3 different values as part of the post request (webhooks) that we send from the SYNQ API. In the webhook we will include the video embed_url. This URL will take you directly to our embed player where you can playback the video you uploaded. I will remove the content in the description. You can also assign a member and add labels if you like. This is how it should look:
 

 

Skjermbilde 2017-07-06 kl. 11.19.28.png Skjermbilde 2017-07-06 kl. 11.19.41.png

 

Now click “Create action”. Choose if you would like notifications when the Applet runs and click “Finish”. You should now have a new Applet under “My Applets”-menu.


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 (review) and include “videoURL” in value1 in the JSON. It should look like this:

IFTTT Maker Webhooks.png

 

Click the “Test it”-button and you should be able to see if your trigger works. Then navigate to your Trello board. A card with the title “videoURL” (from value1) should appear in the first list called “To be reviewed”. 

Skjermbilde 2017-07-06 kl. 11.31.34.png

 

Now let’s configure the SYNQ API webhooks to get a real playback URL. Please refer to our previous blogpost on how to add and configure webhooks in the SYNQ dashboard for a detailed description. Now login on synq.fm, 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 terminal box. The 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; “review” in the URL:

ifttt_iftttreview_uri = 'https://maker.ifttt.com/trigger/review/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” (which we configured to be used as the title of the card in Trello).

The final result should look like:

 function on_video_update(oldVideo, newVideo) 

{
 ifttt_iftttreview_uri = 'https://maker.ifttt.com/trigger/review/with/key/<YOUR IFTTT KEY>';  
 
 //webhooks notification will be sent to IFTTT to create a card in Trello
 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_iftttreview_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 quality transcoded .mp4 is complete/available, a webhook is sent to IFTTT with the player embed URL that creates a new card in Trello using “value1”/player embed URL as the card title.

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.

But the steps for a simple test are:

  • Copy your API key from the project where you configured your webhook
  • Head over to https://api-docs.synq.fm/
  • 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.

Now lets upload a video to test:

Now we have confirmed that the Applet works. Now let's get to the publishing part. After a video is uploaded and added to the “To be reviewed”-list in Trello, someone would get a notification that a new video has been uploaded and that needs to be reviewed before publishing. I would grab the card and move it to the “In review” list. After reviewing the video I can add a description on the Trello card.

Skjermbilde 2017-07-06 kl. 11.58.31.png

 

I want to keep the original link. This is done by navigating to IFTTT settings and disable URL shortening. After doing this I uploaded the same video again.

Now it's time to automate the publishing part. Let's go back to IFTTT to create a new Applet. The action should now be Trello and “Card added to list”. Choose the board and enter the name of the list you would like to publish from (“Published”). Then select the action, which will be Facebook in this tutorial (you can also select facebook pages for your business). Choose the “Create a link post”-action. Remove the suggestions on Link URL and Message. Add “Title” as the ingredient on Link URL and description as the message. It should look like this:

Skjermbilde 2017-07-06 kl. 12.10.45.png

 

Click “Create action” and finish. The Applet is now ready and when you move a card to the list “Published”, IFTTT will post your video with the description from the Trello card on Facebook. If you would like to post on multiple social channels you can have multiple actions if you use the more advanced: https://platform.ifttt.com/maker/.

This is the result when moving the example Trello card to the “Published” list:

facebook.png

 

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

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


Try SYNQ API for free,  click the button below to register for a 14-day free trial:

GET YOUR FREE API KEY


 

Related posts: