# Vercel deployment notifications on your phone > Get a push notification when a Vercel deployment is ready, fails, is canceled or is promoted to production, louder when production breaks. - Company: Vercel (https://www.justpush.io/recipes/vercel) - Event: `deployment.ready` (Deployment) - Tags: Developer tools, Releases - Install: https://studio.justpush.io/recipes/vercel/deployment - Web page: https://www.justpush.io/recipes/vercel/deployment ## Setup 1. Click Install in Studio and sign in. The recipe is added to your account and you get a personal webhook URL. 2. In Vercel, open your team's Settings > Webhooks and create a webhook (Pro and Enterprise teams). 3. Select the Deployment events and the projects to watch. 4. Paste your webhook URL (shown in Studio after install) as the endpoint URL and save. 5. In Vercel, open your team's **Settings → Webhooks** (Pro and Enterprise teams) and create a webhook with the URL above. Select: 6. `deployment.ready`: deploy finished (**don't also pick `deployment.succeeded`**, or every deploy pushes twice) 7. `deployment.error`: deploy failed 8. `deployment.canceled` and `deployment.promoted` (optional) 9. Vercel's payload doesn't include the failure reason; tap **View deployment** for the build log. Branch and commit details come from the Git integration and may be missing for CLI deploys. 10. Vercel signs deliveries with `x-vercel-signature` (HMAC-SHA1), but JustPush doesn't check it yet, so keep your endpoint URL private. ## Code Studio calls `handleRequest(request)` with the incoming webhook (`{ method, headers, body, query, raw }`) and sends the message object it returns. Returning `null` sends nothing. ```js // Vercel → deployment ready, failed, canceled or promoted // Fires for Vercel team webhooks on deployment events. Subscribe to deployment.ready // (not also deployment.succeeded, or you'll get two pushes per deploy). // Docs: https://vercel.com/docs/webhooks/webhooks-api // Deployment events, their labels and how loud to be. Production failures are louder. const EVENTS = { "deployment.ready": { emoji: "✅", verb: "deployed", priority: -1 }, "deployment.succeeded": { emoji: "✅", verb: "deployed", priority: -1 }, "deployment.error": { emoji: "❌", verb: "deploy failed", priority: 0 }, "deployment.canceled": { emoji: "⏹️", verb: "deploy canceled", priority: -1 }, "deployment.promoted": { emoji: "🚀", verb: "promoted to production", priority: 0 }, } // Only link to real http(s) URLs. function link(url, cta) { return typeof url === "string" && /^https?:\/\//.test(url) ? [{ cta, url }] : [] } function handleRequest(request) { const body = request.body || {} const payload = body.payload ?? {} const deployment = payload.deployment ?? {} // Guard: only the deployment events above. if (!Object.prototype.hasOwnProperty.call(EVENTS, body.type)) { console.log(`Ignoring Vercel "${body.type ?? "unknown"}" event`) return null } const event = EVENTS[body.type] const name = deployment.name ?? "Your project" // target is "production", "staging", or null for preview deployments. const target = body.type === "deployment.promoted" ? "production" : payload.target ?? "preview" const production = target === "production" // Git details live in deployment.meta; they're optional and not always present. const meta = deployment.meta ?? {} const branch = meta.githubCommitRef ?? meta.gitlabCommitRef ?? meta.bitbucketCommitRef const commit = (meta.githubCommitMessage ?? meta.gitlabCommitMessage ?? meta.bitbucketCommitMessage ?? "").split("\n")[0] const author = meta.githubCommitAuthorLogin ?? meta.githubCommitAuthorName ?? meta.gitlabCommitAuthorName ?? meta.bitbucketCommitAuthorName const where = body.type === "deployment.promoted" ? "" : ` (${target})` const site = deployment.url ? `https://${String(deployment.url).replace(/^https?:\/\//, "")}` : null return { title: `${event.emoji} ${name} ${event.verb}${where}`, message: [branch, commit, author ? `@${author}` : null].filter(Boolean).join(" · ") || deployment.url || "Deployment update", topic: "Vercel", // A failed production deploy is the one that needs you now. priority: body.type === "deployment.error" && production ? 1 : event.priority, buttons: [ ...link(payload.links?.deployment, "View deployment"), ...(body.type === "deployment.ready" || body.type === "deployment.succeeded" ? link(site, "Open site") : []), ], } } ``` ## Vercel deployment.ready webhook payload (sample) ```json { "id": "evt_2cVCgYJpvK3AxmF3rZkPg4bJ", "type": "deployment.error", "region": "fra1", "payload": { "plan": "pro", "team": { "id": "team_1a2b3c" }, "user": { "id": "user_4d5e6f" }, "links": { "project": "https://vercel.com/acme/acme-web", "deployment": "https://vercel.com/acme/acme-web/8k2Ll1mNnPpQqRr" }, "target": "production", "project": { "id": "prj_7g8h9i" }, "deployment": { "id": "dpl_8k2Ll1mNnPpQqRr", "url": "acme-web-8k2ll1mnn-acme.vercel.app", "meta": { "githubOrg": "acme", "githubRepo": "web", "githubCommitRef": "main", "githubCommitMessage": "Fix checkout totals rounding\n\nCloses #88", "githubCommitAuthorLogin": "janedoe" }, "name": "acme-web" } }, "createdAt": 1790672400000 } ``` ## FAQ ### Does this work on iPhone and Android? Yes. Install the JustPush app from the App Store or Google Play and sign in. Every phone signed in to your account gets the notification. ### Do I need to write code? No. Install the recipe in Studio, paste your webhook URL into Vercel and you are done. The code is there if you want to change the text, the sound or the buttons. ### Can I change what the notification says? Yes. After install the recipe's code is yours. Edit it in Studio and test it against the sample payload before you save. ### What does it cost? JustPush is free for 30 days. After that it's $19.99 a year, or $39.99 once. There is no extra charge for recipes.