webflow-webhooks

What this skill does

# Webflow Webhooks

## When to Use This Skill

- How do I receive Webflow webhooks?
- How do I verify Webflow webhook signatures?
- How do I handle form_submission events from Webflow?
- How do I process Webflow ecommerce order events?
- Why is my Webflow webhook signature verification failing?
- Setting up Webflow CMS collection item webhooks

## Essential Code

### Signature Verification (Manual)

```javascript
const crypto = require('crypto');

function verifyWebflowSignature(rawBody, signature, timestamp, secret) {
  // Check timestamp to prevent replay attacks (5 minute window - 300000 milliseconds)
  const currentTime = Date.now();
  if (Math.abs(currentTime - parseInt(timestamp)) > 300000) {
    return false;
  }

  // Generate HMAC signature
  const signedContent = `${timestamp}:${rawBody}`;
  const expectedSignature = crypto
    .createHmac('sha256', secret)
    .update(signedContent)
    .digest('hex');

  // Timing-safe comparison
  try {
    return crypto.timingSafeEqual(
      Buffer.from(signature),
      Buffer.from(expectedSignature)
    );
  } catch {
    return false; // Different lengths = invalid
  }
}
```

### Processing Events

```javascript
app.post('/webhooks/webflow', express.raw({ type: 'application/json' }), (req, res) => {
  const signature = req.headers['x-webflow-signature'];
  const timestamp = req.headers['x-webflow-timestamp'];

  if (!signature || !timestamp) {
    return res.status(400).send('Missing required headers');
  }

  // Verify signature (use OAuth client secret or webhook-specific secret)
  const isValid = verifyWebflowSignature(
    req.body.toString(),
    signature,
    timestamp,
    process.env.WEBFLOW_WEBHOOK_SECRET
  );

  if (!isValid) {
    return res.status(400).send('Invalid signature');
  }

  // Parse the verified payload
  const event = JSON.parse(req.body);

  // Handle different event types
  switch (event.triggerType) {
    case 'form_submission':
      console.log('New form submission:', event.payload.data);
      break;
    case 'ecomm_new_order':
      console.log('New order:', event.payload);
      break;
    case 'collection_item_created':
      console.log('New CMS item:', event.payload);
      break;
    // Add more event handlers as needed
  }

  // Always return 200 to acknowledge receipt
  res.status(200).send('OK');
});
```

## Common Event Types

| Event | Triggered When | Use Case |
|-------|----------------|----------|
| `form_submission` | Form submitted on site | Contact forms, lead capture |
| `site_publish` | Site is published | Clear caches, trigger builds |
| `ecomm_new_order` | New ecommerce order | Order processing, inventory |
| `ecomm_order_changed` | Order status changes | Update fulfillment systems |
| `collection_item_created` | CMS item created | Content syndication |
| `collection_item_changed` | CMS item updated | Update external systems |
| `collection_item_deleted` | CMS item deleted | Remove from external systems |

## Environment Variables

```bash
# For webhooks created via OAuth App
WEBFLOW_WEBHOOK_SECRET=your_oauth_client_secret

# For webhooks created via API (after April 2025)
WEBFLOW_WEBHOOK_SECRET=whsec_xxxxx  # Returned when creating webhook
```

## Local Development

For local webhook testing, install Hookdeck CLI:

```bash
```

Then start the tunnel:

```bash
npx hookdeck-cli listen 3000 webflow --path /webhooks/webflow
```

No account required. Provides local tunnel + web UI for inspecting requests.

## Resources

- [What Are Webflow Webhooks](references/overview.md) - Event types and payload structure
- [Setting Up Webflow Webhooks](references/setup.md) - Dashboard configuration and API setup
- [Signature Verification Details](references/verification.md) - In-depth verification guide
- [Express Example](examples/express/) - Node.js implementation with tests
- [Next.js Example](examples/nextjs/) - App Router implementation
- [FastAPI Example](examples/fastapi/) - Python implementation

## Important Notes

- Webhooks created through the Webflow dashboard do NOT include signature headers
- Only webhooks created via OAuth apps or API include `x-webflow-signature` and `x-webflow-timestamp`
- Always use raw body for signature verification, not parsed JSON
- Timestamp validation (5 minute window - 300000 milliseconds) is critical to prevent replay attacks
- Return 200 status to acknowledge receipt; other statuses trigger retries (up to 3 times)

## Recommended: webhook-handler-patterns

This skill pairs well with webhook-handler-patterns for production-ready implementations:

- [Handler sequence](https://github.com/hookdeck/webhook-skills/blob/main/skills/webhook-handler-patterns/references/handler-sequence.md) — Request flow and middleware order
- [Idempotency](https://github.com/hookdeck/webhook-skills/blob/main/skills/webhook-handler-patterns/references/idempotency.md) — Handling duplicate events
- [Error handling](https://github.com/hookdeck/webhook-skills/blob/main/skills/webhook-handler-patterns/references/error-handling.md) — Graceful failure and recovery
- [Retry logic](https://github.com/hookdeck/webhook-skills/blob/main/skills/webhook-handler-patterns/references/retry-logic.md) — Handling failed processing

## Related Skills

- [stripe-webhooks](https://github.com/hookdeck/webhook-skills/tree/main/skills/stripe-webhooks) - Stripe webhook handling with similar HMAC-SHA256 verification
- [shopify-webhooks](https://github.com/hookdeck/webhook-skills/tree/main/skills/shopify-webhooks) - Shopify webhook implementation
- [github-webhooks](https://github.com/hookdeck/webhook-skills/tree/main/skills/github-webhooks) - GitHub webhook handling
- [webhook-handler-patterns](https://github.com/hookdeck/webhook-skills/tree/main/skills/webhook-handler-patterns) - Production patterns for all webhooks
- [hookdeck-event-gateway](https://github.com/hookdeck/webhook-skills/tree/main/skills/hookdeck-event-gateway) - Webhook infrastructure and reliability

Sources:
- [Working with Webhooks – Webflow Docs](https://developers.webflow.com/data/docs/working-with-webhooks)
- [Webhook Signatures Changelog](https://developers.webflow.com/data/changelog/webhook-signatures)