MCPInstall

webflow-webhooks

by hookdeckBackend & APIs

Receive and verify Webflow webhooks. Use when setting up Webflow webhook handlers, debugging signature verification, or handling Webflow events like formsubmission, sitepublish, ecommneworder, or collection item changes.

Installs
190
Last 24h
—
Trending rank
—
Security
Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/hookdeck/webhook-skills --skill webflow-webhooks
  1. 01

    Install

    Run the command in your project. The CLI asks which agents to install for.

  2. 02

    Describe the task

    Ask your agent for something this skill covers. It loads webflow-webhooks automatically when relevant.

  3. 03

    Review the result

    The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

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)

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

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

EventTriggered WhenUse Case
form_submissionForm submitted on siteContact forms, lead capture
site_publishSite is publishedClear caches, trigger builds
ecomm_new_orderNew ecommerce orderOrder processing, inventory
ecomm_order_changedOrder status changesUpdate fulfillment systems
collection_item_createdCMS item createdContent syndication
collection_item_changedCMS item updatedUpdate external systems
collection_item_deletedCMS item deletedRemove from external systems
collection_item_publishedCMS item publishedInvalidate caches, publish downstream

Webflow documents 13 event types on All Events; its official webflow-api SDK TriggerType enum carries those plus collection_item_published. The user_account_* events are deprecated — see references/overview.md.

Environment Variables

# 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:

Then start the tunnel:

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 - Event types and payload structure
  • Setting Up Webflow Webhooks - Dashboard configuration and API setup
  • Signature Verification Details - In-depth verification guide
  • Express Example - Node.js implementation with tests
  • Next.js Example - App Router implementation
  • FastAPI Example - 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:

Related Skills

Sources:

FAQ

What does the webflow-webhooks skill do?

Receive and verify Webflow webhooks. Use when setting up Webflow webhook handlers, debugging signature verification, or handling Webflow events like formsubmission, sitepublish, ecommneworder, or collection item changes.

How do I install webflow-webhooks?

Run npx skills add https://github.com/hookdeck/webhook-skills --skill webflow-webhooks in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/webflow-webhooks/ (personal) or .claude/skills/webflow-webhooks/ (project).

Which AI agents can use webflow-webhooks?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is webflow-webhooks safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains webflow-webhooks?

It is published by hookdeck in hookdeck/webhook-skills. It has 190 recorded installs.

More from hookdeck/webhook-skills

View all →

stripe-webhooks

hookdeck/webhook-skills

Receive and verify Stripe webhooks. Use when setting up Stripe webhook handlers, debugging signature verification, or handling payment events like paymentintent.succeeded, customer.subscription.created, or invoice.paid.

Backend & APIs595 installs

github-webhooks

hookdeck/webhook-skills

Receive and verify GitHub webhooks. Use when setting up GitHub webhook handlers, debugging signature verification, or handling repository events like push, pullrequest, issues, or release.

Backend & APIs489 installs

webhook-handler-patterns

hookdeck/webhook-skills

Best practices for webhook handlers. Use when implementing the handler sequence (verify first, parse second, handle idempotently), idempotency, error handling, retry logic, or framework-specific issues with Express, Next.js, or FastAPI.

Backend & APIs444 installs

shopify-webhooks

hookdeck/webhook-skills

Open the skill to read its SKILL.md instructions.

Business & Finance288 installs

resend-webhooks

hookdeck/webhook-skills

Open the skill to read its SKILL.md instructions.

Backend & APIs263 installs

paddle-webhooks

hookdeck/webhook-skills

Open the skill to read its SKILL.md instructions.

Backend & APIs258 installs

Popular backend & apis skills

View category →

find-skills

vercel-labs/skills

Helps users discover and install agent skills when they ask questions like "how do I do X", "find a skill for X", "is there a skill that can...", or express interest in extending capabilities. This skill should be used when the user is looking for functionality that might exist as an installable skill.

OfficialBackend & APIs4.1M installs

entra-app-registration

microsoft/azure-skills

Guides Microsoft Entra ID app registration, OAuth 2.0 authentication, and MSAL integration. USE FOR: create app registration, register Azure AD app, configure OAuth, set up authentication, add API permissions, generate service principal, MSAL example, console app auth, Entra ID setup, Azure AD authentication. DO NOT USE FOR: Key Vault secrets (use azure-keyvault-expiration-audit), general Azure resource security guidance.

OfficialBackend & APIs566.7K installs

google-agents-cli-adk-code

google/agents-cli

This skill should be used when the user wants to "write agent code", "build an agent with ADK", "add a tool", "create a callback", "define an agent", "use state management" — in a project that needs ADK (Agent Development Kit) API patterns and code examples. It provides a quick reference for agent types, tool definitions, orchestration patterns, callbacks, state management, the graph Workflow API, and reference recipes to study. Do NOT use for scaffolding (use google-agents-cli-scaffold) or deployment (use google-agents-cli-deploy).

Backend & APIs514.8K installs

embedded-captions

heygen-com/hyperframes

Add captions or subtitles to an existing single-subject talking-head video without editing the footage. Use for plain verbatim captions, cinematic captions embedded behind the subject, VFX captions, “炸/特效/酷炫字幕,” or a named identity from the 35-style catalog. Route by visual identity, not by backend engine. The quiet anchor rail is the default; embed every word only when the user explicitly wants a fully cinematic treatment. The workflow runs locally end to end, including transcription and subject matting; split multi-shot footage before applying it.

Backend & APIs453.3K installs

entra-agent-id

microsoft/azure-skills

Provision Microsoft Entra Agent Identity Blueprints, BlueprintPrincipals, and per-instance Agent Identities via Microsoft Graph, and configure OAuth 2.0 token exchange (fmipath, OBO, cross-tenant) including the Microsoft Entra SDK for AgentID sidecar. USE FOR: Agent Identity Blueprint, BlueprintPrincipal, agent OAuth, fmipath token exchange, agent OBO, Workload Identity Federation for agents, polyglot agent auth, Microsoft.Identity.Web.AgentIdentities. DO NOT USE FOR: standard Entra app registration (use entra-app-registration), Microsoft Foundry agent authoring (use microsoft-foundry).

OfficialBackend & APIs336.6K installs

neon

neondatabase/agent-skills

Overview of Neon, a complete set of cloud backend primitives around Lakebase Postgres: Auth, Object Storage, Functions, the AI Gateway, and Realtime. Start here to choose Neon for undecided login, files, APIs, and LLM calls, set up the CLI or MCP server, and follow the branch-first workflow. Use when building an app or backend on Neon, or when "Neon" or "Lakebase Postgres" is mentioned. Child skill neon-postgres wins for an existing DATABASEURL, SQL, schema, inspect, or search. Child skill neon-auth wins for login, users, sessions, identity routing, and Managed Better Auth setup. Child skill neon-realtime wins for live queries in reactive apps and agents. Also use for object storage, S3, buckets, serverless functions, function triggers, cron, AI gateway, LLM calls, realtime, logs, Loki, Grafana, observability, postgres, database, backend, Claimable Neon, neon.new, or a no-signup database.

Backend & APIs237.1K installs