$npx -y skills add hookdeck/webhook-skills --skill elevenlabs-webhooksReceive and verify ElevenLabs webhooks. Use when setting up ElevenLabs webhook handlers, debugging signature verification, or handling call transcription events.
| 1 | # ElevenLabs Webhooks |
| 2 | |
| 3 | ## When to Use This Skill |
| 4 | |
| 5 | - Setting up ElevenLabs webhook handlers |
| 6 | - Debugging signature verification failures |
| 7 | - Understanding ElevenLabs event types and payloads |
| 8 | - Processing call transcription events |
| 9 | - Handling voice removal notifications |
| 10 | |
| 11 | ## Essential Code |
| 12 | |
| 13 | ### Signature Verification (SDK — Recommended) |
| 14 | |
| 15 | ElevenLabs recommends using the official `@elevenlabs/elevenlabs-js` SDK for webhook verification and event construction. See [Verify the webhook secret and construct the webhook payload](https://elevenlabs.io/docs/agents-platform/guides/integrations/upstash-redis#verify-the-webhook-secret-and-consrtuct-the-webhook-payload). |
| 16 | |
| 17 | ```javascript |
| 18 | // Express.js / Node example |
| 19 | const { ElevenLabsClient } = require('@elevenlabs/elevenlabs-js'); |
| 20 | |
| 21 | const elevenlabs = new ElevenLabsClient({ |
| 22 | apiKey: process.env.ELEVENLABS_API_KEY || 'webhook-only' |
| 23 | }); |
| 24 | |
| 25 | // In your webhook handler: get raw body and signature header, then: |
| 26 | const event = await elevenlabs.webhooks.constructEvent(rawBody, signatureHeader, process.env.ELEVENLABS_WEBHOOK_SECRET); |
| 27 | // event is the parsed payload; SDK throws on invalid signature |
| 28 | ``` |
| 29 | |
| 30 | ```typescript |
| 31 | // Next.js example |
| 32 | import { ElevenLabsClient } from '@elevenlabs/elevenlabs-js'; |
| 33 | |
| 34 | const elevenlabs = new ElevenLabsClient({ |
| 35 | apiKey: process.env.ELEVENLABS_API_KEY || 'webhook-only' |
| 36 | }); |
| 37 | |
| 38 | export async function POST(request: NextRequest) { |
| 39 | const rawBody = await request.text(); |
| 40 | const signatureHeader = request.headers.get('ElevenLabs-Signature'); |
| 41 | try { |
| 42 | const event = await elevenlabs.webhooks.constructEvent( |
| 43 | rawBody, |
| 44 | signatureHeader, |
| 45 | process.env.ELEVENLABS_WEBHOOK_SECRET |
| 46 | ); |
| 47 | // Handle event.type, event.data... |
| 48 | return new NextResponse('OK', { status: 200 }); |
| 49 | } catch (error) { |
| 50 | return NextResponse.json({ error: (error as Error).message }, { status: 401 }); |
| 51 | } |
| 52 | } |
| 53 | ``` |
| 54 | |
| 55 | ### Python SDK Verification (FastAPI) |
| 56 | |
| 57 | ```python |
| 58 | import os |
| 59 | from fastapi import FastAPI, Request, HTTPException |
| 60 | from elevenlabs import ElevenLabs |
| 61 | from elevenlabs.errors import BadRequestError |
| 62 | |
| 63 | app = FastAPI() |
| 64 | elevenlabs = ElevenLabs(api_key=os.environ.get("ELEVENLABS_API_KEY") or "webhook-only") |
| 65 | |
| 66 | @app.post("/webhooks/elevenlabs") |
| 67 | async def elevenlabs_webhook(request: Request): |
| 68 | raw_body = await request.body() |
| 69 | sig = request.headers.get("ElevenLabs-Signature") or request.headers.get("elevenlabs-signature") |
| 70 | |
| 71 | if not sig: |
| 72 | raise HTTPException(status_code=400, detail="Missing signature header") |
| 73 | |
| 74 | try: |
| 75 | event = elevenlabs.webhooks.construct_event( |
| 76 | raw_body.decode("utf-8"), |
| 77 | sig, |
| 78 | os.environ["ELEVENLABS_WEBHOOK_SECRET"] |
| 79 | ) |
| 80 | # Handle event["type"], event["data"]... |
| 81 | return {"status": "ok"} |
| 82 | except BadRequestError as e: |
| 83 | raise HTTPException(status_code=401, detail="Invalid signature") |
| 84 | ``` |
| 85 | |
| 86 | The SDK (Node/TypeScript and Python) verifies the signature, validates the timestamp (30-minute tolerance), and returns the parsed event. On failure it throws; return 401 and the error message. |
| 87 | |
| 88 | ## Common Event Types |
| 89 | |
| 90 | | Event | Triggered When | Common Use Cases | |
| 91 | |-------|----------------|------------------| |
| 92 | | `post_call_transcription` | Call analysis completed | Process call insights, save transcripts | |
| 93 | | `voice_removal_notice` | Notice that voice will be removed | Notify users, backup voice data | |
| 94 | | `voice_removal_notice_withdrawn` | Voice removal notice cancelled | Update user notifications | |
| 95 | | `voice_removed` | Voice has been removed | Clean up voice data, update UI | |
| 96 | |
| 97 | ## Environment Variables |
| 98 | |
| 99 | ```bash |
| 100 | ELEVENLABS_WEBHOOK_SECRET=your_webhook_secret_here |
| 101 | ``` |
| 102 | |
| 103 | ## Local Development |
| 104 | |
| 105 | For local webhook testing, install Hookdeck CLI: |
| 106 | |
| 107 | ```bash |
| 108 | # Install via npm (recommended) |
| 109 | |
| 110 | ``` |
| 111 | |
| 112 | Then start the tunnel: |
| 113 | |
| 114 | ```bash |
| 115 | npx hookdeck-cli listen 3000 elevenlabs --path /webhooks/elevenlabs |
| 116 | ``` |
| 117 | |
| 118 | No account required. Provides local tunnel + web UI for inspecting requests. |
| 119 | |
| 120 | ## Resources |
| 121 | |
| 122 | - [Overview](references/overview.md) - What ElevenLabs webhooks are, common event types |
| 123 | - [Setup](references/setup.md) - Configure webhooks in ElevenLabs dashboard, get signing secret |
| 124 | - [Verification](references/verification.md) - Signature verification details and gotchas |
| 125 | - [Express Example](examples/express/) - Complete Express.js implementation |
| 126 | - [Next.js Example](examples/nextjs/) - Next.js App Router implementation |
| 127 | - [FastAPI Example](examples/fastapi/) - Python FastAPI implementation |
| 128 | |
| 129 | ## Recommended: webhook-handler-patterns |
| 130 | |
| 131 | We recommend installing the [webhook-handler-patterns](https://github.com/hookdeck/webhook-skills/tree/main/skills/webhook-handler-patterns) skill alongside this one for handler seque |