Flodesk

How to integrate Flodesk with Webflow

You can connect Flodesk to Webflow to capture email subscribers through form submissions, automate welcome sequences, and segment contacts based on site activity. Integration reduces manual data entry and ensures subscriber information stays synchronized across both platforms.

You can integrate Flodesk with Webflow through embedded forms, integration platforms like Zapier, or direct API access. Embedded forms provide popup and inline options for basic email capture.

Integration platforms like Zapier handle form-to-subscriber automation without code. The API enables custom implementations like real-time webhook synchronization and bidirectional CMS updates.

Native features, direct embeds and widgets

Flodesk provides four embed types: popup forms, inline forms, full-page forms, and link-in-bio pages. Popup and inline forms work best for Webflow sites through copy-paste code snippets in custom code areas.

Popup forms require only a header code snippet placed in Webflow's Project Settings head tag field. Inline forms require header code in Webflow's site-wide Custom Code settings and an inline snippet placed within specific page locations using Webflow's Code Embed element.

Setup takes two steps for both popup and inline forms. First, paste header code into Webflow's site-wide custom code settings. Second, paste inline code into specific page locations using Webflow's Code Embed element.

Popup forms:

• Create popup forms in Flodesk's form builder
• Copy header code from Flodesk's publish screen
• Paste into Webflow Project Settings > Custom Code > Head Code
• Publish your Webflow site (popups don't render in preview mode)

Inline forms:

• Create inline forms in Flodesk with custom designs
• Copy both header and inline code snippets
• Add header code to Webflow's site-wide custom code settings
• Drag Webflow's Code Embed element to your page
• Paste inline code into the Embed element

Multiple inline forms on one page:

When placing the same inline form multiple times on one page, create multiple <div> containers with unique IDs and modify each inline embed snippet's data-flodesk-target attribute to match the corresponding div ID.

Implementation notes:

Forms require both header and inline code to function. According to Flodesk's embedding documentation, missing either snippet causes display issues. Clear browser cache when testing changes as cached scripts prevent updated forms from appearing.

Embedded forms inherit styling from Flodesk with limited customization options due to iframe isolation. For design control, customize colors, fonts, and button styles within Flodesk's form builder before generating embed code.

Use third-party integration platforms

Integration platforms connect Webflow forms to Flodesk subscriber lists through automated workflows. Zapier, viaSocket, Make, and IFTTT all support this connection and handle data transfer without custom code. Zapier and viaSocket are recommended for non-technical users due to their detailed documentation and pre-built templates.

Zapier provides extensive pre-built templates and detailed documentation. With Zapier, you can connect form submissions, e-commerce orders, and subscriber events across both platforms. Several triggers and actions are available.

From Webflow:

• New Form Submission: fires when someone submits any Webflow form
• New Order: triggers when customers complete purchases
• Updated Order: activates when order status changes (note that Zapier polling is more reliable than webhooks for order status updates)

From Flodesk:

• Subscriber Added to Segment: fires when subscribers join specific segments
• Subscriber Unsubscribed: triggers when someone opts out

To Flodesk:

• Create or Update Subscriber: adds new subscribers or updates existing ones
• Manage Segment Membership: adds or removes subscribers from segments
• Process Unsubscriptions: handles opt-out requests

To Webflow:

• Create CMS Items: adds new collection items from subscriber data

Setup process:

1. Create accounts on Zapier, Webflow, and Flodesk
2. Configure the trigger by selecting Webflow and choosing Form Submission
3. Authenticate your Webflow account and select which form to monitor
4. Configure the action by selecting Flodesk and choosing Create Subscriber
5. Map Webflow form fields to Flodesk subscriber fields (email is required)
6. Test with a real form submission to verify data flows correctly
7. Activate the Zap to begin processing submissions

Field mapping requirements:

Flodesk requires an email address for every subscriber. Map your Webflow email field to Flodesk's email field first. Optional fields include first name, last name, and custom fields. Create custom fields in Flodesk before mapping them in Zapier to avoid errors.

Alternative platforms:

viaSocket offers more trigger options including Site Published, Page Created, and Page Deleted events. Make.com provides visual workflow builders for complex scenarios but requires users to construct workflows from scratch without pre-built templates. IFTTT supports basic automation but provides no specific integration templates or detailed use case documentation.

Build with Webflow and Flodesk APIs

The Webflow Data API and Flodesk API enable custom integrations with full control over data flow and business logic. Build webhook-based synchronization for real-time subscriber updates, implement custom field transformations, or create bidirectional CMS syncs that update both platforms automatically. API methods require paid Webflow plans with appropriate access scopes.

Both platforms provide REST APIs with JSON responses. Webflow uses Bearer token authentication with OAuth2 support. Flodesk uses Basic authentication with API keys.

Real-time webhook synchronization

Webhooks deliver form submission data instantly without polling. Create a webhook in Webflow that fires when forms are submitted, then process the payload and create Flodesk subscribers. This pattern works for high-volume sites requiring immediate subscriber addition and automated email sequences.

Register webhooks with POST /v2/sites/{site_id}/webhooks by providing your endpoint URL and triggerType: "form_submission". Webflow sends POST requests to your endpoint with submission data including form fields, submission timestamps, and unique IDs for idempotency (unique identifiers that prevent duplicate processing if the same request is sent multiple times).

Webflow webhooks include HMAC-SHA256 signatures (cryptographic hashes that verify the webhook sender's authenticity) in the x-webflow-signature header according to webhook security documentation.

Verify signatures by computing HMAC-SHA256 of the raw request body using your webhook secret. Reject requests with timestamps older than 5 minutes to prevent replay attacks.

Implementation flow:

1. Create webhook pointing to your server endpoint
2. Receive POST request with form submission payload
3. Verify HMAC-SHA256 signature matches computed hash using x-webflow-signature and x-webflow-timestamp headers
4. Extract email, name, and custom fields from payload.data
5. Call POST /subscribers to create Flodesk subscriber
6. Return 200 OK to acknowledge receipt

Example webhook payload structure:

{
  "triggerType": "form_submission",
  "payload": {
    "id": "unique-submission-id",
    "submittedAt": "2024-01-15T10:30:00Z",
    "data": {
      "email": "subscriber@example.com",
      "name": "Jane Smith"
    },
    "schema": [
      {
        "fieldName": "email",
        "fieldType": "Email"
      }
    ]
  }
}

Create or update subscribers:

The POST /subscribers endpoint implements upsert behavior (creates new subscribers or updates existing ones based on email address), preventing duplicates. Include optional fields like segment_ids, custom_fields, and double_optin in your request body. The API returns subscriber IDs for additional operations like workflow triggering.

Error handling:

Use Webflow submission IDs as idempotency keys to prevent duplicate subscriber creation during retries. Webflow makes up to 3 retry attempts on webhook failures according to webhook documentation. Implement exponential backoff when necessary.

E-commerce order segmentation

Connect Webflow e-commerce orders to Flodesk segments for post-purchase email campaigns. When customers complete orders, create subscribers and add them to customer segments that trigger automated sequences. This enables order confirmation emails, product delivery instructions, and upsell campaigns based on purchase behavior.

Create webhooks with triggerType: "order_created" to receive order data including customer email, order totals, and line items. Process order details to determine appropriate segments (first-time customers, product-specific buyers, or high-value purchasers), then add subscribers using the POST /subscribers endpoint and manage segment membership with POST /subscribers/{subscriber_id}/segments to add subscribers to segment IDs.

Important limitation: Order status change webhooks (order_updated) are unreliable for tracking fulfillment or refunds. For workflows based on order status changes, use Zapier's polling method instead of webhooks to ensure consistent data delivery.

Implementation steps:

1. Register order webhook with POST /v2/sites/{site_id}/webhooks
2. Receive webhook payload with order and customer data
3. Create subscriber with POST /subscribers
4. Add to segment with POST /subscribers/{subscriber_id}/segments
5. Optionally trigger workflow with POST /workflows/{workflow_id}/subscribers

Segment management:

List available segments with GET /segments or create new ones with POST /segments. Segments support up to 50 segment IDs per subscriber. Remove subscribers from segments using DELETE /subscribers/{subscriber_id}/segments when order status changes or refunds occur.

Workflow automation:

Trigger email sequences by adding subscribers to workflows using the POST /workflows/{workflow_id}/subscribers endpoint to start automated email delivery. Subscribers go through workflows once by default unless you enable "Allow repeat subscribers" in workflow settings.

Bidirectional CMS synchronization

Sync Flodesk subscriber data back to Webflow CMS collections for displaying subscriber counts, featured testimonials, or dynamic content based on email list activity. Create Flodesk webhooks with events like subscriber.added_to_segment that trigger when subscribers join segments, then use Webflow's API to create or update collection items automatically.

Register webhooks in Flodesk with POST /webhooks and specify events like subscriber.added_to_segment. When webhooks fire, create Webflow CMS items using POST /v2/collections/{collection_id}/items with subscriber data mapped to collection fields.

Implementation flow:

1. Create webhook in Flodesk for subscriber additions (using events: subscriber.created, subscriber.added_to_segment, or subscriber.unsubscribed)
2. Receive webhook POST with subscriber details
3. Transform subscriber data to match CMS field structure
4. Create CMS item with POST /v2/collections/{collection_id}/items
5. Publish item with POST /v2/collections/{collection_id}/items/publish

CMS considerations:

Webflow enforces plan-based CMS item limits. Business plans have a 10,000 item limit total across all collections (not per collection). Enterprise plans support higher limits. Monitor your collection size before implementing automated CMS creation. Use GET /v2/collections/{collection_id}/items to check current counts.

Authentication requirements:

Webflow requires Bearer tokens with specific scopes including forms:read, forms:write, webhooks:read, and webhooks:write for form integrations. Add cms:read and cms:write for CMS operations. Generate tokens through OAuth2 authorization flows or create site-specific tokens in your Webflow account settings.

Flodesk accepts Basic authentication for private integrations by base64-encoding your API key followed by a colon: Authorization: Basic base64(API_KEY:). Partner integrations use OAuth2 Bearer tokens.

What you can build

Integrating Flodesk with Webflow enables automated email list building through form submissions, e-commerce customer communication via order triggers, content delivery through automated email workflows, and personalized email experiences based on subscriber behavior and segmentation.

• Newsletter signups: Add Webflow forms to portfolio sites that automatically create Flodesk subscribers and trigger welcome email sequences when visitors sign up for your newsletter
• Lead magnet delivery: Create marketing sites with download forms for ebooks or templates that add subscribers to Flodesk and trigger automated workflows delivering the download link via email
• Event registration systems: Design conference landing pages where registration forms add attendees to Flodesk segments that trigger pre-event reminders and post-event follow-up sequences with recordings
• E-commerce customer journeys: Build online stores where checkout forms capture customer emails, add them to post-purchase Flodesk segments, and send automated order confirmations (note that order status webhooks are unreliable; use Zapier polling for fulfillment-based workflows)