In this guide, you’ll be creating a Webhook event for a Team in Frame.io, and using it to send a payload into Zapier. In this scenario, Zapier acts as a mediator — it can “catch” the hook from Frame.io, and then use the data from that hook to interact with other systems.
In many cases, Frame.io’s Zapier Integration supports native “Triggers” that will fetch data from Frame.io without manual webhook management (e.g. when an Asset is created). In this guide, we’ll be focusing on a workflow that isn’t currently supported by a native Trigger by reacting when a new Project is created in Frame.io.
First, we’ll set up a webhook to fire a notification when a new Project is created on a Team in Frame.io. Then, we’ll use Frame.io’s Zapier app to catch the notification, and relay some information about the Project to a Google Sheet.
This guide involves a degree of bouncing back and forth between Frame.io and Zapier. For best results, we recommend opening the two apps side-by-side while following along.
Before you start, you’ll need three things:
To verify the first two, head over to developer.frame.io and sign in. If you don’t see the “Tokens” and “Webhooks” menu items (shown below), please reach out to your Frame.io account representative.
In order to complete this guide, you’ll need an API token whose scope matches the scope of the Webhook we’ll be sending. If you already have a token connected to Zapier that includes the below scope, you can just use that. If not:
Give your new Token a descriptive name, and select the following scope:
In Zapier: Choose the “Webhooks by Zapier” trigger app, and select “Catch Hook” as your desired trigger action.
After saving, skip the next optional step, and you should see a screen with a URL starting with https://hooks.zapier.com/...
From this screen:
Back in Frame.io Developer: head over to Webhooks, and create a new Webhook with:
Save your new Webhook with the Create button, and head back to Zapier.
To recap, we now have:
Now we’ll actually send our data to Zapier by creating a Project.
In the screen you still have from Step 2, go ahead and click “Ok, I did this.” This will prepare Zapier to catch an event on the specified URL.
On the configured Team, make a new Project — give it any settings you’d like.
This will cause a Webhook to be sent out, which will then be caught by Zapier. In response you should see an acknowledgement of a new hook in Zapier, and if you expand it, you should see the full Webhook payload from Frame.io.
Congrats! Hit Continue, and give yourself a gentle high-five. Now the hard part’s done, and we can use our Webhook to do things!
Click ”+ Add a Step,” and search for Frame.io. Once you’ve selected the Frame.io app, pick the Find Project action. Now click “Save + Continue.”
On the next screen, click “Connect an Account,” and on the subsequent popup, enter your Frame.io API Token (which you generated in Step 1). If you’ve forgotten or lost your token between then and now, don’t worry — just make a new one in your Account Settings, ensuring you choose the “Project: Read” scope. Click “Continue.”
In the next screen, click on the arrow to the far right of the Project field at the bottom of the list, and select Use a Custom Value.
Then, in the new “Custom Value for Comment ID” field that appears, click the icon on the right, and choose the Resource ID from the ensuing dropdown.
To ensure you’re always working with fresh data on every event, you should always follow this pattern of Custom Value + Resource ID when setting up webhooks between Frame.io and Zapier. This applies to natively supported Triggers, too!
Now click “Continue.” Once Zapier verifies that it has the Project ID on the next screen, click “Fetch + Continue,” and once the fetch is complete, you should see a screen like the below:
Excellent work! Now you have all the information about your new Project in Zapier, and you can relay it to any number of different systems, including:
Once you’ve built out the rest of your Zap, simply turn it “On,” and that’s it!