Frame.io

How to integrate Frame.io with Webflow

Integrating Frame.io with Webflow automates video publishing workflows and connects collaborative review with public web content. Production teams can synchronize approved assets to client portals, marketing sites, and e-commerce product pages without manual exports.

Connect Frame.io and Webflow through third-party automation platforms like Zapier, Make, and Pabbly Connect for no-code synchronization. Use Frame.io share links for embedded video distribution without API integration. Build custom implementations with the Frame.io API and Webflow CMS API for webhook-triggered synchronization and bidirectional content updates.

Use third-party automation platforms

Connect Frame.io to Webflow through automation platforms like Zapier, Make, and Pabbly Connect for automated Webflow CMS synchronization workflows. These platforms trigger Webflow CMS item creation when Frame.io assets are added or updated. Frame.io webhooks send resource IDs rather than complete asset data, which requires additional API calls to retrieve full metadata. Frame.io does not support iframe embedding for review links due to authentication requirements. Review links must open in new tabs or windows.

Pabbly Connect enables Webflow form submissions to automatically create Frame.io projects or folders for new client onboarding. Supported workflows include creating Webflow CMS items when Frame.io projects are created, creating Frame.io folders when Webflow forms are submitted, creating Webflow CMS items when Frame.io comments are added, and updating Webflow CMS items based on Frame.io asset activity. No native Frame.io integration exists in the Webflow Marketplace. All Frame.io and Webflow integration requires third-party automation platforms or custom API implementation.

Zapier's Frame.io integration connects Webflow and Frame.io through workflows that trigger Webflow CMS updates when Frame.io comments are created. The integration is stable at version 1.1.8 as of December 2025 and requires Frame.io V4 accounts with Frame.io ID linked to Adobe ID. Available triggers for Webflow integration include Frame.io comment creation. Available actions for Webflow workflows include creating Frame.io comments and uploading assets to Frame.io. Some events are marked experimental and should not be used for critical Webflow publishing workflows.

Make supports Frame.io V4 API integration as of June 2025. The platform enables Webflow CMS updates based on Frame.io events through native connectors and HTTP modules with OAuth 2.0 configuration.

Some common Webflow and Frame.io workflows include:

• Form-triggered project creation when Webflow form submissions automatically create Frame.io projects or folders for new client onboarding
• Asset approval publishing when approved Frame.io assets trigger automatic publication to Webflow CMS collections
• Comment-driven CMS updates when Frame.io comments create or update Webflow CMS items for review tracking
• Inventory sync when Webflow e-commerce inventory changes trigger Frame.io project creation for product video production

Use Frame.io share links

Frame.io share links enable video distribution without API integration. Create share links for any asset with custom branding and security settings like passphrase protection and share expiration. Share links can be added to Webflow pages using custom code as external links that open in new tabs or windows. Direct iframe embedding of Frame.io review links is not supported due to authentication requirements.

Webflow's custom code functionality supports inline script embedding, hosted script embedding, and Code Embed elements. Developers can place share link URLs in Webflow CMS text fields or add them to pages as external links that open in new tabs.

Share link customization options include:

• Playback controls: Playback speed, resolution adjustment, looping, frame guides, thumbnail customization
• Branding settings: Custom logos, brand colors, visual themes

Frame.io provides security mechanisms for embedded content:

• Forensic watermarking: Track and trace video content distributed through shares
• Digital Rights Management: Apply DRM protection for secure video delivery
• Content security settings: Configure share expiration, passphrase protection, and authorized domain restrictions

For enterprise implementations, Frame.io offers additional security and compliance features including SOC 2 Type II compliance, single sign-on (SSO) integration, AES-256 bit encryption for data at rest, SSL/HTTPS encryption for data in transit, and Amazon S3 secure storage with strict access controls.

Build with Frame.io and Webflow APIs

Frame.io's REST API and Webflow's CMS API enable custom integration implementations. API-based workflows support webhook-triggered synchronization, bidirectional content updates, and custom approval logic. Frame.io webhooks send resource IDs rather than complete asset data, which requires additional API calls to retrieve full resource information.

Frame.io V4 API is available in early access for all Frame.io customers as of June 2025. The V4 API offers enhanced webhook payloads with live data support and improved endpoint architecture compared to legacy V2 API versions.

Frame.io uses bearer token authentication with developer tokens for single-user contexts and OAuth 2.0 for multi-user applications. Webflow uses OAuth 2.0 with scope-based permissions for API access.

Sync video assets to Webflow CMS

Search and retrieve Frame.io assets using the Frame.io search API, then create corresponding items in Webflow collections. The Frame.io search endpoint accepts filters for project_id, account_id, team_id, and file type. The endpoint returns asset objects with id, name, type, project_id, team_id, and metadata fields.

Create Webflow CMS items with POST /collections/{collection_id}/items. The endpoint accepts fieldData objects that can be populated with video metadata and asset information from Frame.io. Publish items immediately or save as drafts using the isDraft parameter. Mapping Frame.io asset metadata to Webflow fields requires implementation through third-party automation platforms or custom API code.

Note about code examples: The code examples below use Frame.io's deprecated V2 API for demonstration purposes. Frame.io V4 API is now available in early access for all customers with enhanced features and improved endpoint architecture. All examples require environment variables for authentication tokens and should include error handling for production use.

// Example: Fetch Frame.io asset and create Webflow CMS item
// Note: This example uses deprecated V2 API for demonstration
// V4 API is now available for all Frame.io customers
// Environment variables required: FRAMEIO_TOKEN, WEBFLOW_TOKEN
// Production implementation should include try/catch error handling

const frameioAsset = await fetch(`https://api.frame.io/v2/assets/${assetId}`, {
 headers: { 'Authorization': `Bearer ${FRAMEIO_TOKEN}` }
}).then(r => r.json());

const webflowItem = await fetch(`https://api.webflow.com/collections/${collectionId}/items`, {
 method: 'POST',
 headers: {
   'Authorization': `Bearer ${WEBFLOW_TOKEN}`,
   'Content-Type': 'application/json'
 },
 body: JSON.stringify({
   fields: {
     name: frameioAsset.name,
     'video-url': frameioAsset.original_url,
     _draft: false
   }
 })
}).then(r => r.json());



Update existing items with PATCH /collections/{collection_id}/items/{item_id} or bulk update with PATCH /collections/{collection_id}/items when Frame.io assets change. Store Frame.io asset IDs in custom Webflow fields to maintain bidirectional references.

Implement webhook-based synchronization

Frame.io webhooks enable real-time synchronization without polling. Configure webhooks to trigger when Frame.io assets are created, updated, versioned, or ready for use. Frame.io V4 webhooks include enhanced live data support, reducing the need for subsequent API calls to retrieve complete resource information.

Available webhook events include:

• asset.created when new asset is uploaded
• asset.updated when asset metadata is modified
• asset.ready when asset processing is completed and ready for use
• asset.deleted when asset is removed from project
• asset.versioned when new version of existing asset is uploaded
• comment.created when new comment is added
• comment.updated when comment is modified
• comment.deleted when comment is removed
• comment.completed when comment status is changed to completed
• reviewlink.created when new review link is generated

The asset.ready event is critical for CMS synchronization. It fires after Frame.io completes transcoding and preview generation. Publishing to Webflow before this event completes can result in broken media experiences. The asset.ready event ensures assets are fully processed before publication.

Webhooks include security headers for verification. The security headers include X-Frameio-Request-Timestamp (a Unix timestamp) and X-Frameio-Signature (an HMAC SHA256 signature). To verify webhook authenticity, compute HMAC SHA256 from the request body and the timestamp value, then compare the computed signature with the X-Frameio-Signature header value. Reject requests with timestamps older than 5 minutes to prevent replay attacks.

// Example: Verify Frame.io webhook signature
// Production implementation validates timestamp and signature before processing
const crypto = require('crypto');

function verifyWebhook(requestBody, timestamp, signature, secret) {
 // Validate timestamp to prevent replay attacks
 const currentTime = Date.now();
 const requestTime = parseInt(timestamp) * 1000;
 const maxAge = 5 * 60 * 1000; // 5 minutes in milliseconds

 if (currentTime - requestTime > maxAge) {
   throw new Error('Request timestamp too old - possible replay attack');
 }

 // Compute signature from request body and timestamp
 const payload = JSON.stringify(requestBody) + timestamp;
 const computedSignature = crypto
   .createHmac('sha256', secret)
   .update(payload)
   .digest('hex');

 // Use timing-safe comparison to prevent timing attacks
 const computedBuffer = Buffer.from(computedSignature);
 const signatureBuffer = Buffer.from(signature);

 if (computedBuffer.length !== signatureBuffer.length) {
   throw new Error('Invalid signature length');
 }

 if (!crypto.timingSafeEqual(computedBuffer, signatureBuffer)) {
   throw new Error('Invalid signature - webhook authentication failed');
 }

 return true;
}

// Example usage in webhook endpoint handler
app.post('/webhooks/frameio', (req, res) => {
 const timestamp = req.headers['x-frameio-request-timestamp'];
 const signature = req.headers['x-frameio-signature'];

 try {
   verifyWebhook(req.body, timestamp, signature, WEBHOOK_SECRET);
   // Process webhook payload after verification
   res.status(200).send('Webhook processed');
 } catch (error) {
   console.error('Webhook verification failed:', error.message);
   res.status(401).send('Unauthorized');
 }
});



After receiving webhook notifications, retrieve complete asset data to create or update Webflow CMS items. Frame.io V4 webhooks include enhanced payload data that reduces the need for subsequent API calls.

Automate comment and feedback workflows

Frame.io supports frame-accurate feedback with timestamps, annotations, and threaded replies. The platform provides comment management through REST API endpoints that retrieve all comments and replies in a flat list format. Each comment includes text, timestamp, owner, completed, and like_count fields.

// Example: Retrieve Frame.io comments for an asset
// Note: Uses deprecated V2 API - V4 API now available for all customers
const comments = await fetch(`https://api.frame.io/v2/assets/${assetId}/comments`, {
 headers: { 'Authorization': `Bearer ${FRAMEIO_TOKEN}` }
}).then(r => r.json());

// Filter for unresolved comments
const unresolvedComments = comments.filter(c => !c.completed);



Create comments programmatically through the Frame.io API. Required fields include text. Optional parameters include annotation for drawing data, page, timestamp in frames, and private boolean flag.

Store comment counts and approval status in Webflow CMS fields to display review progress on client portals or project dashboards. When Frame.io webhooks fire for comment creation or completion events, retrieve the complete comment data and update Webflow CMS fields accordingly.

What you can build

Integrating Frame.io with Webflow through third-party automation platforms enables video-centric workflows that connect collaborative review with public web publishing.

• Client video review portals: Build Webflow client portals where approved video work from Frame.io displays automatically with project metadata, client testimonials, and review status badges
• Production company portfolios: Create Webflow portfolio sites displaying production work with filterable categories, embedded video thumbnails, and case study details that populate automatically when work receives final client sign-off
• E-commerce product video management: Display product demonstration videos on Webflow e-commerce product pages with synchronized SKU matching and video metadata that updates automatically when Frame.io video versions receive approval
• Marketing campaign landing pages: Launch campaign landing pages in Webflow with hero videos, testimonials, and promotional content that publishes automatically when marketing assets complete Frame.io review cycles

‍