From webflow-agent-skills
Receives, verifies, and processes Webflow webhooks for form submissions, site publishes, ecommerce orders, and CMS collection changes. Useful for webhook setup, signature debugging, and event handling.
npx claudepluginhub 224-industries/webflow-skills --plugin webflow-agent-skillsThis skill uses the workspace's default tool permissions.
Receive, verify, and process Webflow webhook events for form submissions, CMS changes, ecommerce orders, site publishing, and more.
Registers Webflow webhooks, verifies HMAC signatures, and handles events like form submissions, site publishes, ecommerce orders, and CMS changes for event-driven backends.
Automates Webflow CMS collections, site publishing, page management, asset uploads, and ecommerce orders via Composio tools and Rube MCP. Use for managing live sites programmatically.
Automates Webflow CMS collections (create/update/list/delete items), site publishing, page management, asset uploads, and ecommerce orders via Composio's Rube MCP toolkit. Use for programmatic site management.
Share bugs, ideas, or general feedback.
Receive, verify, and process Webflow webhook events for form submissions, CMS changes, ecommerce orders, site publishing, and more.
Prerequisite: You need a Webflow account with an active site. For signature verification, create webhooks via the API (not the dashboard) — see Setup.
x-webflow-signature and x-webflow-timestamp headerstriggerType and handle each accordingly200 to confirm receipt (other statuses trigger retries)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
}
}
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');
}
const isValid = verifyWebflowSignature(
req.body.toString(),
signature,
timestamp,
process.env.WEBFLOW_WEBHOOK_SECRET
);
if (!isValid) {
return res.status(400).send('Invalid signature');
}
const event = JSON.parse(req.body);
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;
case 'collection_item_published':
console.log('Published CMS items:', event.payload.items);
break;
}
res.status(200).send('OK');
});
Webflow supports 14 webhook event types across 6 categories: Forms, Site, Pages, Ecommerce, CMS, and Comments. See references/event-types.md for the complete reference with all payload schemas and examples.
| Category | Events | Required Scope |
|---|---|---|
| Forms | form_submission | forms:read |
| Site | site_publish | sites:read |
| Pages | page_created, page_metadata_updated, page_deleted | pages:read |
| Ecommerce | ecomm_new_order, ecomm_order_changed, ecomm_inventory_changed | ecommerce:read |
| CMS | collection_item_created, collection_item_changed, collection_item_deleted, collection_item_unpublished, collection_item_published | cms:read |
| Comments | comment_created | comments:read |
# 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
x-webflow-signature and x-webflow-timestampEach reference file includes YAML frontmatter with name, description, and tags for searchability. Use the search script available in scripts/search_references.py to quickly find relevant references by tag or keyword.
# List all references with metadata
python scripts/search_references.py --list
# Search by tag (exact match)
python scripts/search_references.py --tag <tag>
# Search by keyword (across name, description, tags, and content)
python scripts/search_references.py --search <query>
scripts/search_references.py: Search reference files by tag, keyword, or list all with metadata