Loading...
Loading...
Receive and verify Webflow webhooks. Use when setting up Webflow webhook handlers, debugging signature verification, or handling Webflow events like form_submission, site_publish, ecomm_new_order, or collection item changes.
npx skill4agent add hookdeck/webhook-skills webflow-webhooksconst 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
}
}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');
});| Event | Triggered When | Use Case |
|---|---|---|
| Form submitted on site | Contact forms, lead capture |
| Site is published | Clear caches, trigger builds |
| New ecommerce order | Order processing, inventory |
| Order status changes | Update fulfillment systems |
| CMS item created | Content syndication |
| CMS item updated | Update external systems |
| CMS item deleted | Remove from external systems |
# 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# Install via npm
npm install -g hookdeck-cli
# Or via Homebrew
brew install hookdeck/hookdeck/hookdeckhookdeck listen 3000 --path /webhooks/webflowx-webflow-signaturex-webflow-timestamp