Dropbox

How to integrate Dropbox with Webflow

Integrating Dropbox with Webflow lets you store files externally, automate form submission workflows, and centralize media management outside your hosting plan. This reduces storage costs and gives content teams a familiar interface for managing assets that appear on your site.

Start with direct file embedding for quick implementation, use third-party automation platforms like Zapier for common workflows, or build with both platforms' APIs when you need custom logic and real-time synchronization.

Embed Dropbox files directly

Dropbox generates shareable links for files that you can embed in Webflow pages using custom code. According to Dropbox's sharing documentation, you create links with configurable permissions including view-only or edit access. This method works for displaying documents, images, and videos without consuming Webflow storage.

For video content, modify the shared link by replacing ?dl=0 with ?raw=1 in the URL, then embed it using a Code Embed element in Webflow. Images and PDFs embed similarly using their modified URLs.

Implementation steps:

1. Upload your file to Dropbox and select Share from the file menu
2. Click Create link and configure permissions as needed
3. Copy the generated URL
4. For videos, change the URL parameter from ?dl=0 to ?raw=1
5. Add an Embed element to your Webflow page
6. Paste the modified URL in an <iframe> or appropriate HTML tag

This approach provides simple file hosting but requires manual updates when files change. You'll need to update embed codes if file URLs change.

Connect through automation platforms

Third-party automation tools like Zapier and Relay.app connect Webflow forms and CMS collections to Dropbox storage without code. These platforms handle common patterns like uploading form submissions to Dropbox folders and creating CMS items from Dropbox files.

Zapier offers pre-built templates for Dropbox and Webflow workflows. You can automatically upload form submission attachments to organized Dropbox folders or sync Dropbox files to CMS collections. Relay.app provides similar functionality with visual workflow builders.

These platforms work well for standard integration patterns and require no custom development. Rate limits and pricing apply based on the number of tasks processed.

Build with Webflow and Dropbox APIs

The Webflow Data API and Dropbox HTTP API let you build custom integrations that sync files to CMS collections, process uploads from Webflow forms, and manage media libraries programmatically. This method gives you control over data flow, error handling, and business logic.

API integration requires backend development and handles scenarios beyond what automation platforms support. You'll need to implement OAuth 2.0 authentication, manage token refresh (Dropbox access tokens expire after 4 hours), and build error recovery logic.

Store Webflow form uploads in Dropbox

Webflow forms can trigger webhooks that send submission data to your server endpoint. Your application receives this data, processes any file attachments, then uploads them to Dropbox using the files upload API.

According to the Dropbox API documentation, you use POST /2/files/upload to send files to Dropbox. The endpoint requires OAuth 2.0 authentication with files.content.write scope.

Your implementation flow:

1. Configure a Webflow form webhook to post submissions to your server
2. Receive the form data at your endpoint
3. Extract file attachments from the submission
4. Upload files to Dropbox with POST /2/files/upload using OAuth credentials
5. Generate shareable links with POST /2/sharing/create_shared_link_with_settings if needed
6. Store Dropbox file URLs back to Webflow CMS using PATCH /collections/{collection_id}/items/{item_id}

Example upload request using the Dropbox API:

POST /2/files/upload
Headers: {
  "Authorization": "Bearer ACCESS_TOKEN",
  "Dropbox-API-Arg": JSON.stringify({
    "path": "/webflow-forms/submission-123.pdf",
    "mode": "add",
    "autorename": true
  }),
  "Content-Type": "application/octet-stream"
}
Body: [file binary data]

This pattern keeps file storage in Dropbox while maintaining submission records in Webflow. You control file naming conventions, folder organization, and permission settings through your application logic.

Implementation requires handling OAuth token refresh flows since Dropbox stopped issuing long-lived access tokens in September 2021. Your backend must refresh tokens before they expire and handle expiration errors gracefully.

Sync Dropbox files to Webflow CMS

Storing media assets in Dropbox and linking them to Webflow CMS collections reduces hosting storage while centralizing file management. Your application monitors Dropbox for file changes, then updates corresponding CMS items with new file URLs.

The Webflow Data API reference documents two key endpoints: POST /collections/{collection_id}/items creates new CMS items with Dropbox file references, and PATCH /collections/{collection_id}/items/{item_id} updates existing items when files change.

Implementation requires:

• Dropbox webhooks that notify your server when files change in monitored folders
• OAuth authentication for both platforms following Webflow authentication and Dropbox auth types documentation
• File URL generation using POST /2/sharing/create_shared_link_with_settings to create publicly accessible links
• CMS updates that patch collection items with new file URLs

Your sync workflow:

1. Register a webhook with Dropbox pointing to your server endpoint
2. Receive webhook notifications when files change in specified folders (webhooks only indicate that something changed, not what specifically changed)
3. Use POST /files/list_folder_continue to determine what actually changed, managing folder cursors across requests
4. Generate shareable links for changed files using the Dropbox sharing API
5. Update Webflow CMS items using the Data API patch endpoint
6. Handle errors and retry failed updates

This pattern works well for product catalogs, media libraries, and document repositories where content teams manage files in Dropbox but publish through Webflow. The integration requires managing webhook notification complexity and cursor state persistence.

What you can build

Integrating Dropbox with Webflow enables external file storage, automated workflows, and centralized media management beyond Webflow's native hosting.

• Embedded video and document hosting: Display Dropbox-hosted videos, PDFs, and images directly on Webflow pages using modified shareable links with the raw=1 parameter, keeping media files outside your hosting plan storage limits
• Automated form submission storage: Capture customer uploads through Webflow forms and organize them in Dropbox folders using automation platforms like Zapier, or build custom workflows with OAuth-authenticated API calls to POST /2/files/upload
• CMS-synced media libraries: Build product catalogs or document repositories where content teams manage files in Dropbox folders while webhook notifications trigger updates to corresponding Webflow CMS collection items with fresh shareable links
• Organized customer document systems: Process form submissions with custom validation rules, then structure uploaded files in Dropbox folders that mirror your CMS collection architecture using custom API integration