Vercel

Screenshot every Vercel preview deployment

Automated Vercel deployment screenshots for every git push

Capture screenshots of your Vercel preview deployments automatically. Use Vercel's deploy hooks or GitHub Actions to trigger a screenshot capture every time a new preview is deployed, giving your team instant visual confirmation of changes. You can also capture Vercel dashboard deployment screenshots for release notes, audits, and internal deployment reports.

How it works

Connect in 4 steps

1

Get the preview URL

Vercel generates a unique preview URL for every push. Use the deployment webhook to get it.

2

Wait for deployment

Wait for the Vercel deployment to finish building before capturing.

3

Capture the screenshot

Call the Allscreenshots API with the Vercel preview URL.

4

Post to your team

Send the screenshot to Slack, GitHub PR comments, or your review tool.

</> Code

Vercel Deploy Hook Handler

javascript
1// Webhook handler for Vercel deployment events
2export async function POST(request) {
3  const payload = await request.json();
4
5  // Only capture on successful deployments
6  if (payload.type !== 'deployment.succeeded') {
7    return Response.json({ skipped: true });
8  }
9
10  const previewUrl = payload.payload.deployment.url;
11
12  // Capture screenshot of the preview deployment
13  const response = await fetch(
14    'https://api.allscreenshots.com/v1/screenshot',
15    {
16      method: 'POST',
17      headers: {
18        'Authorization': `Bearer ${process.env.SCREENSHOT_API_KEY}`,
19        'Content-Type': 'application/json',
20      },
21      body: JSON.stringify({
22        url: `https://${previewUrl}`,
23        fullPage: true,
24        viewport: { width: 1920, height: 1080 },
25      }),
26    }
27  );
28
29  const { screenshotUrl } = await response.json();
30
31  // Post to Slack
32  await fetch(process.env.SLACK_WEBHOOK, {
33    method: 'POST',
34    body: JSON.stringify({
35      text: `New deployment screenshot: ${screenshotUrl}`,
36    }),
37  });
38
39  return Response.json({ captured: true, screenshotUrl });
40}
Why Allscreenshots

Built for Vercel

Preview screenshots

See what every Vercel preview deployment looks like without clicking through URLs.

Deployment confidence

Get visual confirmation that deployments look correct before promoting to production.

Team visibility

Share preview screenshots in Slack or PR comments so the whole team sees changes.

FAQ

Frequently asked questions

If your preview uses Vercel's password protection, you'll need to either disable it for API access or use a deployment that's publicly accessible.

Ready to integrate with Vercel?

Start with 100 free screenshots every month. No credit card required.