Softr

How to integrate Softr with Webflow

No native integration exists between Softr and Webflow, but you can connect them through three proven methods.

Choose iframe embedding for displaying Softr apps without code, automation platforms for syncing data between systems, or direct API integration for full customization. Each approach has trade-offs between ease of setup and flexibility.

Three approaches connect the platforms:

1. Iframe embedding — Display Softr apps in Webflow pages (best for authentication, complex forms)  
2. Automation platforms — Zapier, Make, n8n, viaSocket sync data without code  
3. API integration — Softr API + Webflow Data API for custom workflows

Key limitations: No unified SSO between platforms. CORS restrictions require server-side middleware for API calls. Embedded content needs responsive iframe wrappers.

Embed Softr applications in Webflow pages

Embed Softr portals, forms, and data displays using Webflow's custom code embed element. Get embed code from Softr's page/block settings (Features tab). Authentication, sessions, and database queries work within the iframe.

Common use cases:

• Client portals: Authenticated dashboards with user-specific data  
• Dynamic forms: Signature capture, ratings, Google Maps autocomplete (no Webflow equivalents)  
• Data displays: List, grid, table blocks connected to Airtable/Google Sheets  
• Member directories: User profiles with filtering, search, pagination

Responsive iframe wrapper:

<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
  <iframe
    src="https://your-softr-app.softr.app/page-path"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
    frameborder="0"
    loading="lazy">
  </iframe>
</div>

Performance tips: Use loading="lazy" for below-fold iframes. Limit to 3-4 embedded blocks per page. Compress images (WebP preferred).

Sync data with automation platforms

Setup: Configure Webflow form webhooks → automation platform endpoint. For Softr outbound, use Call API actions (no automatic webhooks).

User provisioning from Webflow forms

Create Softr users automatically on form submission:

1. Trigger: Webflow New Form Submission  
2. Action: POST to https://studio-api.softr.io/v1/api/users  
3. Headers: Softr-Api-Key, Softr-Domain  
4. Enable generatemagiclink: true for passwordless auth

CMS content synchronization

Sync Webflow CMS → Softr: Use collection_item_created webhook events, map to Softr database via automation platform.

Softr → Webflow: Configure Call API actions in Workflows to POST to Webflow's CMS API.

Better approach: Use Airtable as intermediary (native Softr integration + Whalesync/Power Importer for Webflow sync).

Build with Webflow and Softr APIs

Softr offers User Management, Database, and REST APIs that connect to Webflow's Data API, but CORS restrictions require server-side middleware (Zapier/Make/n8n or a custom proxy on Cloudflare Workers/AWS Lambda) to make cross-platform API calls work.

Softr provides the following APIs:

• User Management: https://studio-api.softr.io/v1/api/users  
• Database: https://tables-api.softr.io/api/v1  
• REST API: External data sources (no user management)

Webflow Data API: https://api.webflow.com/v2 — See intro to Webflow APIs and API reference for developers.

CORS workarounds:

1. Recommended: Use Zapier/Make/n8n as middleware  
2. Advanced: Build server-side proxy on Cloudflare Workers/AWS Lambda

Security: Validate webhooks via x-webflow-signature header. Store credentials server-side. Webflow tokens expire after 365 days of inactivity.

Create Softr users from Webflow webhooks

POST to https://studio-api.softr.io/v1/api/users with Softr-Api-Key and Softr-Domain headers. Set generatemagiclink: true for passwordless auth via POST https://studio-api.softr.io/v1/api/users/magic-link/generate/{email}.

Handle HTTP 422 for validation failures. Implement exponential backoff for retries.

Sync CMS items to external databases

Configure webhooks for collection_item_created, collection_item_changed, collection_item_deleted. Map fields to Softr database schema via Softr Database API.

Reverse sync requires manual Softr workflows with Call API actions to POST /v2/collections/:collectionId/items/live.

Validate user sessions across platforms

Use POST https://{yourdomain}.softr.app/v1/api/users/validate-token server-side only. Cache results briefly to reduce API calls.

What you can build

Combine Webflow's design capabilities with Softr's authentication, user management, and database functionality to create client portals, membership sites, marketplaces, and secure healthcare applications that neither platform can deliver alone.

• Client portals: Invoices, documents, project tracking with role-based access  
• Membership sites: Gated content, progress tracking, certificates  
• Two-sided marketplaces: Vendor dashboards, order management  
• Healthcare portals: Appointment scheduling, lab results, secure messaging