Auto-generate screenshots in Contentful
Enrich your content model with automatically captured website screenshots
Connect Allscreenshots to Contentful to automatically generate and store website screenshots as media assets. When editors add a URL to a content entry, a screenshot is captured and linked automatically — keeping your visual content always current.
Add a URL field
Add a short text or URL field to your Contentful content type.
Set up a webhook
Configure a Contentful webhook that fires when entries are published.
Capture and upload
Your handler captures the screenshot and uploads it as a Contentful asset.
Link the asset
Update the content entry to reference the new screenshot asset.
1import contentful from 'contentful-management';
2
3const client = contentful.createClient({
4 accessToken: process.env.CONTENTFUL_MGMT_TOKEN,
5});
6
7export async function POST(request) {
8 const { fields, sys } = await request.json();
9 const url = fields.websiteUrl?.['en-US'];
10 if (!url) return Response.json({ skipped: true });
11
12 // Capture screenshot
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({ url, fullPage: false }),
22 }
23 );
24 const { screenshotUrl } = await response.json();
25
26 // Create asset in Contentful
27 const space = await client.getSpace(process.env.CONTENTFUL_SPACE_ID);
28 const env = await space.getEnvironment('master');
29
30 const asset = await env.createAsset({
31 fields: {
32 title: { 'en-US': `Screenshot: ${url}` },
33 file: {
34 'en-US': {
35 contentType: 'image/png',
36 fileName: `screenshot-${sys.id}.png`,
37 upload: screenshotUrl,
38 },
39 },
40 },
41 });
42
43 await asset.processForAllLocales();
44 return Response.json({ assetId: asset.sys.id });
45}Automated asset creation
Screenshots are created as Contentful assets automatically — no manual upload needed.
Content model integration
Screenshot assets link directly to your content entries for a clean data model.
Editor-friendly
Editors just enter a URL. The screenshot appears as a linked asset without any technical knowledge.