Frame.io

How to integrate Frame.io with Webflow

Video production teams need to publish approved content quickly, but manual handoffs between Frame.io and web publishing create delays. Connecting these platforms automates video approval to publication, reducing manual work and syncing site content with your production pipeline.

The integration methods include: third-party platforms like Make.com and Zapier, Frame.io share links on Webflow pages, or custom API development using Frame.io's REST API and the Webflow CMS API. Direct API integration requires backend proxy servers.

Use third-party automation platforms

Make.com offers Frame.io triggers (Watch New Files, Watch New Comments, Watch New Projects, Watch New Folders) and actions for file management, folders, comments, and projects. It maintains V4 API compatibility and handles OAuth 2.0 authentication.

Make.com automation patterns includes the following:

• Watch New Files → Create Webflow CMS Item: Auto-create CMS collection item with video metadata, thumbnail, and share link on upload
• Create Share Link → Update Webflow: Generate review links when CMS items publish, storing URLs in CMS fields
• Upload File → Frame.io Project: Upload video from Webflow form submissions to Frame.io for review
• Asset Status Change → CMS Update: Update CMS item status when Frame.io asset changes to "approved"

Zapier provides Frame.io triggers (New Asset, New Comment, New Project, Asset Updated, Comment Updated) and actions (Create Comment, Upload Asset, Update Asset, Create Project).

Zapier alternative

Zapier supports Frame.io triggers but requires custom multi-step Zaps for Webflow connection. No pre-built templates exist per Webflow's Zapier documentation.

Example workflow: Frame.io New Asset trigger → Filter for approved status → Format metadata → Create Webflow CMS item.

Embed Frame.io share links

Share links work for portfolios, case studies, and showcase pages linking to Frame.io's hosted player. For automated workflows or CMS updates, use Make.com or Zapier instead.

Generate share links:

1. Navigate to your Frame.io project and create a new Share
2. Add media assets
3. Set Share Visibility to "Public"
4. Customize branding (logo, background)
5. Choose layout (Grid or Reel)
6. Set security (passphrase, expiration)
7. Configure permissions (commenting, downloading, quality)
8. Copy and distribute the link

Important limitation: Direct iframe embedding is not supported.

Build with Frame.io and Webflow APIs

Direct API integration provides complete control over synchronization and custom workflows. Suits teams with development resources needing real-time sync or custom field mapping.

Frame.io's REST API uses OAuth 2.0 authentication. Options: developer tokens (single-user) or OAuth 2.0 (multi-user). Webflow's CMS API requires OAuth 2.0 with CMS:read and CMS:write scopes.

• Token storage: Webflow sites are static—tokens cannot be stored in Webflow. Required: backend server for OAuth, secure database for tokens, API layer that Webflow custom code calls.
• CORS restriction: Frame.io's OAuth2 token endpoint lacks Access-Control-Allow-Origin headers. Implement a server-side proxy for token exchange.

Sync video assets to Webflow CMS

Retrieve Frame.io videos and create CMS entries via Webflow's API.

Field mapping includes:

• asset.name → item name
• asset.downloadurl → video URL
• asset.thumbnails.high → thumbnail images
• asset.duration → video length

Note: Frame.io webhook payloads contain only resource IDs—follow-up API calls required for complete data.

Automate publishing workflows with webhooks

Frame.io webhooks notify your server when assets are created, updated, or commented on.

Frame.io events: 18 types including asset.created, asset.updated, comment.created, comment.completed. Payloads include event type, resource ID, user, and team context—not detailed asset data.

Verify signatures using HMAC SHA-256. Frame.io includes a signing key with all webhooks.

Webflow webhooks: collection_item_created, collection_item_changed, collection_item_deleted fire on CMS modifications.

The middleware requirements include:

• Receive Frame.io webhook notifications
• Fetch complete asset details via REST API
• Transform data to Webflow CMS schema (Plain Text for names/URLs, Image for thumbnails, Number for file sizes)
• Create/update CMS items via Webflow API

Implement exponential backoff for HTTP 429 responses.

Handle authentication and error states

OAuth 2.0 requires server-side token exchange due to CORS restrictions.

Frame.io error codes include the following:

• 401 Unauthorized: Invalid/expired tokens or insufficient scopes
• 403 Forbidden: No permission for resource
• 404 Not Found: Resource doesn't exist
• 429 Rate Limited: Implement queuing in backend

What you can build

Integrating Frame.io with Webflow lets you build video delivery portals that display approved content with hosted playback and download options.

• Client portfolio page: Display completed campaign videos with thumbnails linking to Frame.io's hosted player showing approval timestamps. Use CMS collections with Plain Text fields for share links.
• Campaign landing page: Feature Frame.io-approved product videos with styled buttons linking to share links. CMS stores metadata; Frame.io streams video files.
• Training portal: Display instructional videos organized by course modules, linking to Frame.io share links. Note: Webflow limits pages to 1 nested collection.
• Client delivery portal: Branded project galleries with thumbnail previews and Frame.io share links for final approved videos with download options.