Flatly

How to integrate Flatly with Webflow

Business data from CRMs, databases, and project management systems needs to display on your Webflow site with custom design. Flatly syncs data from 50+ sources into formats compatible with Webflow CMS without building custom connections to each platform. This integration helps you maintain product catalogs, content libraries, customer testimonials, or operational data that originates in business tools but needs to appear on your site.

Since Flatly has no direct Zapier or Make connector to Webflow, you'll connect them through multi-step workflows. Export data from Flatly to intermediate destinations like cloud storage or Google Sheets, then move that data into Webflow CMS using manual CSV imports, automation platforms with Google Sheets as a bridge, or custom serverless functions that read Flatly exports and post to the Webflow API.

Export from Flatly and import to Webflow manually

This workflow connects your data sources to Webflow through exported files. Configure Flatly to pull data from your CRM, database, or business tool and export it to cloud storage (Google Drive, Dropbox, Amazon S3) or Google Sheets as CSV or Excel files. Set up automated exports to run on your preferred schedule. Flatly handles data flattening, timestamp conversion, and field enrichment without code.

Configure sync jobs through Flatly's interface to extract specific data sets from your connected sources (HubSpot, Salesforce, Airtable, Firebase, Shopify, or other supported integrations). Choose your destination as Google Sheets, CSV files in cloud storage, or Excel files. Set up webhook notifications to alert you via email, Slack, or custom endpoints when syncs complete.

Note: Advanced webhook configuration details require direct Flatly support consultation as they are not publicly documented.

Core capabilities you can configure through Flatly include:

• Schedule automated syncs with configurable refresh cycles for time-sensitive data
• Transform nested data structures into flat tables compatible with spreadsheet imports
• Export to multiple formats including CSV, Excel, Google Sheets, and cloud storage platforms

The platform uses AES 256 encryption for credentials and doesn't permanently store your data. It processes information in transit only.

Once Flatly exports data to your chosen destination, import it to Webflow CMS using the Webflow Data API v2 or automation platforms like Zapier or Make. Map your Flatly export columns to match Webflow's field type requirements before importing.

Field mapping requirements for Webflow imports include:

• Collection field names must match exactly with source data field names
• Date fields require ISO 8601 format like YYYY-MM-DDTHH:mm:ss.sssZ
• Reference and multi-reference fields cannot be directly mapped through automation platforms like Zapier and need the Webflow API directly or manual relationship setup
• Rich text needs HTML formatting with only supported tags per Webflow's field types documentation

Manual imports work for one-time migrations or infrequent updates. If your source data changes frequently, consider the automated Google Sheets workflow or custom serverless approach below.

Connect Flatly to Webflow through Google Sheets automation

This workflow creates an automated connection between Flatly and Webflow using Google Sheets as a bridge and automation platforms to handle the data transfer. Configure Flatly to export your source data to Google Sheets with your desired sync frequency. Then set up Zapier or Make to watch that Google Sheet for new rows or changes, transforming the data to match Webflow's field requirements and automatically creating or updating CMS items.

Complete workflow setup includes:

1. Flatly configuration to create a sync job from your data source (CRM, database, business tool) to Google Sheets with scheduled refresh cycles matching your update frequency needs
2. Google Sheets preparation to structure your columns to match your Webflow CMS collection fields with consistent naming, all required fields included, and dates formatted as ISO 8601 timestamps
3. Automation platform connection where you create a new workflow in Zapier or Make triggered by "New Row" or "Updated Row" in your Google Sheet, add a Webflow action to "Create Live Item" or "Update Item" in your target collection, and map Google Sheets columns to Webflow CMS fields
4. Field transformation to add intermediate steps that convert data formats (dates to ISO 8601, text formatting for rich text fields, URL validation for file fields)
5. Testing and monitoring where you run test records through the complete pipeline from source system to Flatly to Google Sheets to automation platform to Webflow to verify data accuracy and field mapping

Zapier-specific notes: Use the "Create Live Item" action to add new CMS items, or "Update Item" to modify existing content. Zapier offers 9 Webflow actions including "Find Item" for lookups before creating duplicates (Zapier Webflow actions).

Make integration complexity: Make requires custom HTTP webhook setup to connect with Webflow CMS rather than providing native Webflow actions like Zapier does. This means more technical configuration compared to Zapier's point-and-click interface.

Limitations include reference field mapping (Zapier cannot map reference or multi-reference fields when creating Webflow items, requiring direct API calls for these relationships or a two-step automation) and sync delays where total latency equals Flatly sync interval plus automation platform processing time (typically 1-15 minutes).

Use this workflow when you need automated synchronization without custom code, update frequencies that allow for some delay, and datasets where synchronization timing is flexible.

Build with Flatly exports and Webflow API

This advanced workflow gives you full control over the data pipeline by using serverless functions to read Flatly's exported files from cloud storage and programmatically post to Webflow's CMS via API. Configure Flatly to export data as CSV files to cloud storage (Amazon S3, Google Cloud Storage, Dropbox) with your desired sync schedule. Then deploy a serverless function (AWS Lambda, Google Cloud Functions, Netlify Functions, Vercel) that triggers when new files arrive, reads the CSV data, transforms it to match Webflow's field requirements, and uses the Collections API endpoints to create or update CMS items.

Complete workflow architecture includes:

1. Flatly export configuration to set up Flatly to export your source data to cloud storage with scheduled syncs
2. Cloud storage trigger where you configure your cloud storage service to trigger your serverless function when new files arrive (AWS S3 uses S3 event notifications to invoke Lambda, Google Cloud Storage uses Cloud Functions with Storage triggers, Dropbox requires polling for new files using Dropbox API as no native triggers exist)
3. Serverless function processing that reads CSV file from cloud storage, parses and validates data, transforms to match Webflow field types and structure, authenticates to Webflow using site tokens or OAuth tokens with appropriate scopes (cms:read, cms:write), POSTs to /v2/collections/{collection_id}/items to create items, and calls /v2/collections/{collection_id}/items/publish to publish items and make them live
4. Error handling and retry logic with queue-based processing, exponential backoff for transient errors, and comprehensive logging for debugging

Implementation example in JavaScript:

const axios = require('axios');
const csv = require('csv-parser');

async function processFlatlyExport(csvData, collectionId) {
 const token = process.env.WEBFLOW_TOKEN;
 const baseUrl = '<https://api.webflow.com/v2>';

 const createdItems = [];

 for (const row of csvData) {
   try {
     // Create item in draft state
     // Note: As of December 2024, items default to isDraft: true
     // They won't appear on live site until explicitly published
     const response = await axios.post(
       `${baseUrl}/collections/${collectionId}/items`,
       {
         fieldData: {
           name: row.name,
           slug: row.slug,
           // Transform Flatly CSV fields to match Webflow schema
           price: parseFloat(row.price),
           description: row.description,
           publishDate: new Date(row.date).toISOString()
         }
       },
       {
         headers: {
           'Authorization': `Bearer ${token}`,
           'Content-Type': 'application/json'
         }
       }
     );

     createdItems.push(response.data.id);

   } catch (error) {
     if (error.response?.status === 401) {
       console.error('Authentication failed - token may be expired');
       throw new Error('Webflow token expired or invalid');
     } else {
       console.error('Item creation failed:', error.response?.data);
       // Implement retry logic here for transient failures
     }
   }
 }

 // Publish created items to make them live
 try {
   await axios.post(
     `${baseUrl}/collections/${collectionId}/items/publish`,
     { itemIds: createdItems },
     {
       headers: {
         'Authorization': `Bearer ${token}`,
         'Content-Type': 'application/json'
       }
     }
   );
 } catch (error) {
   console.error('Publish failed:', error.response?.data);
   // Implement retry logic for publish failures
 }
}



Deploy this serverless function to AWS Lambda, Netlify Functions, Vercel, or Astro to keep API tokens secure on the server side. Store your Webflow API token in environment variables (never hardcode in client-side code). Use the site token authentication approach for simpler deployments or OAuth tokens for multi-site applications.

Use this workflow when you need maximum control over data transformation, complex field mapping logic, handling of large datasets, or integration with multiple Webflow sites through a single codebase.

What you can build

Integrating Flatly with Webflow through these workflows enables automated data synchronization across your business systems and public site.

• Product catalog synchronization: Sync product data from your PIM system or e-commerce platform (Shopify, BigCommerce) to Webflow CMS through Flatly's scheduled exports to Google Sheets, then use Zapier or manual imports to populate your custom product collection with pricing, descriptions, and images
• Customer testimonial management: Export customer feedback and reviews from CRM systems like HubSpot or Salesforce through Flatly to CSV or cloud storage, then import to a Webflow CMS collection to display social proof with manual CSV workflow or automated middleware with Google Sheets and Zapier
• Real estate property listings: Pull property data from Firebase or custom databases through Flatly's automated exports to cloud storage, then use custom serverless functions to push updates to Webflow CMS for current listings with Jetboost for custom filtering and search
• Content library automation: Extract blog post metadata, case studies, or resource data from project management tools like Monday or ClickUp using Flatly's scheduled syncs to Google Sheets and connect Zapier or Make to automatically create Webflow CMS items when new content is added to your project management system