Capture every Netlify deploy preview
Visual snapshots for every branch deploy and pull request
Integrate screenshot capture with your Netlify deployment pipeline. Automatically capture screenshots of deploy previews on every pull request and get visual confirmation that your site looks correct before merging.
Add a deploy notification
Set up a Netlify outgoing webhook that fires on successful deploys.
Build a webhook handler
Create a serverless function that receives the deploy event and captures a screenshot.
Capture the deploy preview
Use the deploy preview URL from the webhook payload to capture the screenshot.
Share with your team
Post the screenshot to Slack, add it as a PR comment, or store it for later review.
1// Netlify Function: functions/screenshot-on-deploy.js
2export default async (req) => {
3 const { url, branch, deploy_id } = await req.json();
4
5 // Capture screenshot of the deploy preview
6 const response = await fetch(
7 'https://api.allscreenshots.com/v1/screenshot',
8 {
9 method: 'POST',
10 headers: {
11 'Authorization': `Bearer ${process.env.SCREENSHOT_API_KEY}`,
12 'Content-Type': 'application/json',
13 },
14 body: JSON.stringify({
15 url,
16 fullPage: true,
17 viewport: { width: 1920, height: 1080 },
18 }),
19 }
20 );
21
22 const { screenshotUrl } = await response.json();
23 console.log(`Deploy ${deploy_id} (${branch}): ${screenshotUrl}`);
24
25 return new Response(JSON.stringify({ screenshotUrl }), {
26 status: 200,
27 });
28};Deploy preview visibility
See what every deploy preview looks like without navigating to each URL manually.
Branch-level screenshots
Capture screenshots for feature branches, staging, and production independently.
Simple webhook setup
Netlify's outgoing webhook notifications make it easy to trigger screenshot captures.