AWS Lambda

How to integrate AWS Lambda with Webflow

Webflow sites need backend processing capabilities beyond native features. Lambda provides serverless compute that handles form submissions, processes webhooks, coordinates API calls, and manages data workflows without server maintenance. This approach offers greater control than marketplace apps and scales more cost-effectively than dedicated servers.

Key integration patterns include webhook-triggered automation (processing form submissions and CMS changes), API-powered dynamic content (calling external services from Webflow pages), and scheduled operations (automated content updates and publishing workflows). The AWS Lambda Function URLs documentation provides the foundation for receiving Webflow webhook events, while the Webflow Webhooks documentation explains event configuration.

Webhooks handle real-time event processing via push-based patterns, while custom code enables client-side Lambda invocations for user-initiated actions.

Webflow webhooks with Lambda Function URLs

Webhooks send HTTP POST requests to Lambda endpoints when events occur in Webflow. This creates direct connections without intermediary services.

The Webflow webhooks configuration in site settings defines which events trigger notifications and where requests are sent. According to Webflow's API documentation, create a webhook by navigating to Site settings > Integrations > Webhooks, then configure a new webhook with your chosen trigger type (such as form_submission or collection_item_created) and destination URL pointing to your Lambda Function URL or API Gateway endpoint. The webhook will automatically POST requests containing event data to your destination URL whenever the specified event occurs. On the AWS side, enable HTTP(S) access to your Lambda function by either creating a Lambda Function URL directly in the Lambda console, which generates a dedicated HTTPS endpoint, or by setting up an API Gateway REST API configured for Lambda proxy integration—both approaches allow Webflow to POST webhook payloads that Lambda receives and processes.

Lambda Function URLs provide HTTPS endpoints without requiring API Gateway, making them the simplest approach for Webflow webhook integration. Enable the Function URL directly in your Lambda console to generate a dedicated HTTPS endpoint in the format https://<url-id>.lambda-url.<region>.on.aws. Copy this endpoint and configure it as the webhook destination URL in Webflow's webhook settings. Webflow will then automatically POST form submission and CMS event data to your Lambda Function URL for processing.

Available webhook events:

• form_submission fires when users submit forms with Webflow form webhook payloads containing field values
• collectionitemcreated triggers when new CMS items are added
• collectionitemchanged activates when existing items are modified
• collectionitemdeleted fires when items are removed
• collectionitemunpublished triggers when items are unpublished but not deleted
• site_publish triggers when sites are published with content changes

Security validation: Webflow includes an x-webflow-signature header with HMAC SHA256 signatures for request verification. Lambda functions must validate signatures before processing payloads to prevent unauthorized requests.

According to the Webflow webhooks documentation, implement signature verification with this production-ready pattern:

const crypto = require('crypto');
const AWS = require('aws-sdk');
const secretsManager = new AWS.SecretsManager();

async function verifyWebflowSignature(event) {
 // Extract signature and timestamp from headers
 const signature = event.headers['x-webflow-signature'];
 const timestamp = event.headers['x-webflow-timestamp'];
 const body = event.body;

 // Validate timestamp to prevent replay attacks (within 5 minutes)
 const currentTime = Math.floor(Date.now() / 1000);
 const requestTime = parseInt(timestamp);
 if (Math.abs(currentTime - requestTime) > 300) {
 throw new Error('Request timestamp too old - possible replay attack');
 }

 // Retrieve webhook secret from AWS Secrets Manager
 const secret = await secretsManager.getSecretValue({
 SecretId: 'webflow-webhook-secret'
 }).promise();
 const webhookSecret = JSON.parse(secret.SecretString).secret;

 // Compute HMAC SHA256 signature
 const computedSignature = crypto
 .createHmac('sha256', webhookSecret)
 .update(body + timestamp)
 .digest('hex');

 // Compare signatures using timing-safe comparison
 if (!crypto.timingSafeEqual(
 Buffer.from(signature),
 Buffer.from(computedSignature)
 )) {
 throw new Error('Invalid webhook signature');
 }

 return true;
}

exports.handler = async (event) => {
 try {
 await verifyWebflowSignature(event);
 const payload = JSON.parse(event.body);
 // Process verified webhook payload
 return { statusCode: 200, body: 'Processed' };
 } catch (error) {
 console.error('Webhook validation failed:', error);
 return { statusCode: 401, body: 'Unauthorized' };
 }
};

Store webhook secrets in AWS Secrets Manager rather than environment variables for secure credential storage with automatic rotation and audit logging.

Rate limit handling: According to the Webflow rate limits documentation, API rate limits vary by plan tier: Basic and CMS plans receive 60 requests per minute, while Business and Enterprise plans receive 120 requests per minute. Lambda functions should inspect X-RateLimit-Limit and X-RateLimit-Remaining response headers, respect Retry-After header values, and implement exponential backoff (progressively increasing delay between retry attempts) when receiving 429 status codes.

Custom JavaScript with Lambda invocations

JavaScript embedded in Webflow pages can invoke Lambda functions through HTTP requests, enabling user-initiated backend processing. This requires exposing Lambda via Function URLs or API Gateway with proper CORS configuration to allow requests from your Webflow domain. For security, implement authentication through request signatures or API keys rather than embedding credentials in client-side code.

According to the Webflow custom code documentation, Webflow accepts HTML, CSS, and JavaScript up to 50,000 characters in custom code embeds. Add code embeds to pages through the Add panel, then paste JavaScript that uses the fetch API to call Lambda Function URLs or API Gateway endpoints.

async function processForm(formData) {
 const maxRetries = 3;
 const timeout = 10000; // 10 second timeout

 for (let attempt = 0; attempt < maxRetries; attempt++) {
 try {
 const controller = new AbortController();
 const timeoutId = setTimeout(() => controller.abort(), timeout);

 const response = await fetch('<https://your-function-url.lambda-url.us-east-1.on.aws>', {
 method: 'POST',
 headers: { 'Content-Type': 'application/json' },
 body: JSON.stringify(formData),
 signal: controller.signal
 });

 clearTimeout(timeoutId);

 // Handle rate limiting with exponential backoff
 if (response.status === 429) {
 const retryAfter = response.headers.get('Retry-After') || Math.pow(2, attempt);
 await new Promise(resolve => setTimeout(resolve, retryAfter * 1000));
 continue;
 }

 // Handle client errors (4xx)
 if (response.status >= 400 && response.status < 500) {
 const error = await response.json();
 throw new Error(`Client error: ${error.message}`);
 }

 // Handle server errors (5xx) with retry
 if (response.status >= 500) {
 if (attempt < maxRetries - 1) {
 await new Promise(resolve => setTimeout(resolve, Math.pow(2, attempt) * 1000));
 continue;
 }
 throw new Error('Server error after retries');
 }

 // Validate response before processing
 if (!response.ok) {
 throw new Error(`HTTP ${response.status}: ${response.statusText}`);
 }

 const result = await response.json();
 return result;

 } catch (error) {
 if (error.name === 'AbortError') {
 console.error('Request timeout');
 } else {
 console.error('Lambda invocation failed:', error);
 }

 // Retry on network errors
 if (attempt < maxRetries - 1) {
 await new Promise(resolve => setTimeout(resolve, Math.pow(2, attempt) * 1000));
 continue;
 }

 throw error;
 }
 }
}

AWS Lambda browser-based invocations support standard HTTP requests from client-side JavaScript. To enable requests from your Webflow site, configure CORS (Cross-Origin Resource Sharing) headers in your Lambda responses or API Gateway to allow requests from your Webflow domain.

CORS configuration requirements: Lambda functions must return Access-Control-Allow-Origin headers matching your Webflow domain. According to AWS Lambda's security documentation for public endpoints, it's critical to restrict origins to specific domains rather than using wildcards, ensuring your Lambda function only accepts requests from your Webflow domain.

Client-side limitations: All processing happens in the browser, exposing code to users. Webflow API calls cannot be made directly from client-side code due to CORS blocking—Lambda must serve as a mandatory proxy with proper CORS headers configured. Never include API keys, secrets, or authentication tokens in embedded JavaScript; always use Lambda as an intermediary layer to handle authenticated API calls to Webflow and external services securely.

Use integration platforms like Zapier or n8n

When you need to process Webflow form submissions or CMS changes through Lambda but want to avoid direct webhook configuration, platforms like Zapier and n8n provide pre-built Webflow connectors. These platforms handle webhook authentication and request routing between Webflow and Lambda, though you'll still write Lambda function code for business logic, error handling, and API interactions with Webflow or external services.

Zapier's AWS Lambda Webflow integration supports workflows triggered by Webflow form submissions, new orders, or CMS changes. Users configure the Webflow trigger event, select either synchronous or asynchronous Lambda invocation actions, authenticate both services through Zapier's interface, and map form fields to function inputs using dropdown selections. n8n's integration platform offers similar capabilities with configurable workflow nodes for both services and self-hosting options for greater infrastructure control.

Key capabilities:

• Form submission automation triggers Lambda functions when users submit Webflow forms via the form_submission webhook event
• CMS synchronization invokes functions when collection items are created, updated, deleted, unpublished, or when the site publishes, using Webflow's five webhook event types: collection_item_created, collection_item_changed, collection_item_deleted, collection_item_unpublished, and site_publish
• E-commerce order processing executes custom workflows when orders are placed or fulfilled via Webflow's order webhook events
• Request/response patterns support both synchronous invocation (RequestResponse) for immediate responses and asynchronous invocation (Event) for background processing without blocking the webhook caller

This approach works best for straightforward workflows where Lambda processes Webflow webhooks asynchronously through event-driven architecture. However, high-volume API interactions with Webflow (beyond its API rate limits of 60 requests per minute for Basic/CMS plans and 120 requests per minute for Business/Enterprise plans) or complex conditional logic requiring synchronous real-time processing may require additional architectural components like AWS SQS for queue-based processing and exponential backoff strategies to handle rate limit constraints effectively.

Build with Webflow and AWS Lambda APIs

Direct API integration provides complete control over data flow and processing logic. Lambda functions receive webhook requests from Webflow when forms are submitted or CMS content changes, process the incoming data, and optionally call the Webflow API to create, read, update, and delete content programmatically. Custom JavaScript embedded in Webflow pages can also invoke Lambda Function URLs or API Gateway endpoints to trigger serverless processing in response to user interactions.

The Webflow Data API requires OAuth 2.0 access tokens or API tokens provided in the Authorization: Bearer <token> header for all requests. Lambda functions should retrieve these tokens from AWS Secrets Manager during execution to avoid hardcoding credentials, ensuring secure credential management throughout the integration lifecycle.

Bidirectional content synchronization

Lambda functions receive webhook events from Webflow CMS changes and can call Webflow APIs to update content in response to external system changes. According to the Webflow Webhooks Documentation, Webflow sends POST requests containing CMS event data (collectionitemcreated, collectionitemchanged, collectionitemdeleted) to Lambda endpoints. Lambda functions can then process this data and, if needed, invoke the Webflow CMS API endpoints (POST /v2/collections/:collectionid/items, PATCH /v2/collections/:collectionid/items/:item_id) to create or update content in external systems or vice versa.

The Collections API with GET /v2/sites/:site_id/collections retrieves all CMS collections for a site to understand the content model structure. According to the Webflow Data API Reference, Lambda functions can then use the returned collection information to perform subsequent operations. The CMS Items API handles CRUD operations with POST /v2/collections/:collection_id/items for creating items and PATCH /v2/collections/:collection_id/items/:item_id for updates. All CMS operations require Authorization: Bearer <token> header with a valid OAuth 2.0 access token or API token.

Workflow pattern: Two validated architectural patterns enable Webflow-Lambda integration:

Pattern 1 - Event-Driven CMS Updates (Webhooks): Webflow CMS changes trigger webhooks (collectionitemcreated, collectionitemchanged, collectionitemdeleted events) → Lambda receives webhook via Function URL or API Gateway endpoint → Lambda updates external database or calls third-party APIs for downstream processing → Lambda can then invoke Webflow CMS API to update content if needed.

Pattern 2 - Scheduled External Database Synchronization: External database changes are detected via AWS EventBridge scheduled rules or Lambda polling → Lambda invokes according to schedule → Lambda calls Webflow CMS API (using Bearer token authentication) to create/update collection items via POST /v2/collections/:collectionid/items or PATCH /v2/collections/:collectionid/items/:itemid endpoints → Lambda receives response confirming updates, and can trigger additional Webflow publishing if required through POST /sites/{siteid}/publish endpoint.

Critical Implementation Details: Both patterns require handling Webflow's API rate limits of 60 requests per minute for Basic and CMS plans, and 120 requests per minute for Business and Enterprise plans. Webhook payloads include x-webflow-signature headers for HMAC SHA256 verification and x-webflow-timestamp for event ordering. All Webflow API calls require Authorization: Bearer token header. Bidirectional sync requires idempotent functions to handle potential webhook retries.

Error handling: Implement idempotency to handle webhook retries safely. Store processed event IDs in DynamoDB and check before processing to prevent duplicate operations. The AWS Lambda best practices documentation recommends making functions idempotent for reliable event processing.

Form processing with external API calls

Lambda functions receive form submissions and route data to CRM systems, email services, payment processors, or custom databases. This eliminates the need for form handling services while maintaining complete control over data flow.

Webflow webhooks POST JSON payloads to Lambda through API Gateway Lambda proxy integration or Lambda Function URLs. Functions receive the webhook payload in the body field as a JSON string requiring JSON.parse() to deserialize. According to the API Gateway Lambda proxy integration documentation, the event structure includes headers (containing x-webflow-timestamp and x-webflow-signature), the body field, and request context metadata.

Authentication proxy pattern: CORS restrictions prevent calling the Webflow API directly from Webflow-hosted pages. Lambda functions act as proxies, receiving requests from Webflow JavaScript, adding authentication headers, calling the Webflow API, and returning responses with proper CORS headers. This pattern appears in Stack Overflow CORS discussions as a required architecture for browser-based API access.

Scheduled content operations

Lambda functions can be scheduled using Amazon EventBridge to trigger automated workflows for content management tasks. This enables regular CMS updates, automated publishing, and data synchronization without manual intervention. According to the AWS documentation, Lambda integrates with EventBridge to support scheduled operations, and when combined with Webflow webhooks and the CMS API, teams can build automated content synchronization workflows that respond to CMS changes or run on defined schedules.

According to the AWS Lambda Function URLs Documentation and Webflow Webhooks Reference, Lambda functions can be configured to receive Webflow webhook events that invoke external integrations. Functions can call the Webflow API to fetch external data through the Webflow Data API Reference endpoints, create or update collection items using PATCH /v2/collections/:collection_id/items/:item_id, and trigger site publishing using POST /sites/{site_id}/publish according to the Webflow REST API Reference.

Publishing constraints: The Webflow rate limits allow one successful publish per minute for site publishing operations. Asynchronous Lambda functions must account for this limit when updating content frequently. Queue publishing requests through SQS to respect rate limits automatically.

What you can build

Integrating AWS Lambda with Webflow enables serverless backend processing for form automation through webhooks, dynamic content rendering, event-driven payment workflows for intermittent transaction processing, and coordinating API calls between Webflow and third-party services like CRM systems, payment gateways, and analytics platforms.

Form processing with CRM integration: Webflow form submissions trigger Lambda functions that validate data, enrich contacts with third-party services, and create records in Salesforce, HubSpot, or custom databases. Functions can send conditional notifications, trigger multi-step workflows, and log submissions for compliance requirements.

Dynamic CMS content automation: Lambda functions fetch data from external APIs (product catalogs, pricing databases, news feeds), transform it to match Webflow CMS field structures, and create or update collection items automatically using the Webflow Collections API (POST /v2/collections/:collection_id/items for creation and PATCH /v2/collections/:collection_id/items/:item_id for updates). Scheduled functions or webhook-triggered Lambda invocations keep content synchronized between systems without manual intervention, delivering measurable benefits including improved page load performance and reduced maintenance overhead by avoiding Webflow's Enterprise Plan requirements. Techginity's Plivo case study documented 40% improvement in page load times and 50% reduction in maintenance costs in their enterprise implementation.

E-commerce order processing pipelines: Lambda can process payment webhooks through API Gateway endpoints. Configure your payment processor to POST webhook events to Lambda Function URLs or API Gateway, then implement transaction validation, database updates, and service notifications in your function code. Lambda coordinates multi-step workflows handling payment verification, inventory checks, and fulfillment system updates. However, this architecture introduces constraints including Webflow's API rate limits (60 requests per minute for Basic/CMS plans, 120 requests per minute for Business/Enterprise plans) and PCI compliance requirements for payment data handling. Organizations implementing payment processing should carefully evaluate volume requirements and compliance obligations.

Real-time data dashboards: Lambda functions can receive analytics data through webhooks or scheduled events, process metrics, and update Webflow CMS collections with processed results. Combine with client-side JavaScript that fetches data from Lambda endpoints via JavaScript API calls to refresh visualizations without page reloads. Note: For high-frequency data updates, prefer webhook-based event processing over polling to avoid exceeding Webflow's API rate limits.