Integrations/Webflow
Webflow

Dynamic screenshots for Webflow sites

Auto-generate website thumbnails for your Webflow CMS collections

Enrich your Webflow CMS collections with automatically generated website screenshots. Perfect for link directories, portfolio showcases, and resource libraries built on Webflow that need up-to-date visual previews.

How it works

Get started in 4 steps

1

Add a URL field to your CMS

Add a plain text or link field to your Webflow CMS collection for the target URL.

2

Set up a webhook or automation

Use Webflow's webhooks, Make, or Zapier to detect new CMS items.

3

Capture the screenshot

Call the Allscreenshots API with the URL from the new CMS item.

4

Update the CMS item

Use the Webflow API to set the screenshot URL on the CMS item's image field.

</>Code Example

Webflow CMS Screenshot Automation

javascript
1// Webhook handler for new Webflow CMS items
2export async function POST(request) {
3  const { _id, url } = await request.json();
4
5  // Capture screenshot
6  const screenshotResponse = 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        viewport: { width: 1280, height: 800 },
17      }),
18    }
19  );
20  const { screenshotUrl } = await screenshotResponse.json();
21
22  // Update Webflow CMS item with screenshot
23  await fetch(
24    `https://api.webflow.com/v2/collections/${process.env.COLLECTION_ID}/items/${_id}`,
25    {
26      method: 'PATCH',
27      headers: {
28        'Authorization': `Bearer ${process.env.WEBFLOW_TOKEN}`,
29        'Content-Type': 'application/json',
30      },
31      body: JSON.stringify({
32        fieldData: { thumbnail: screenshotUrl },
33      }),
34    }
35  );
36
37  return Response.json({ updated: true });
38}
Benefits

Why use Allscreenshots with Webflow

CMS-native workflow

Screenshots populate automatically when you add new items to your Webflow CMS collection.

No custom code on site

Screenshots are stored as image URLs in the CMS. No client-side JavaScript needed on your Webflow site.

Professional thumbnails

Display high-quality, consistent website thumbnails instead of generic placeholder images.

Frequently asked questions

Yes. Use Zapier or Make as a bridge: trigger on new Webflow CMS items, capture a screenshot with Allscreenshots, and update the item via Webflow's Zapier/Make integration.

Pricing that scales with you

No hidden fees. No surprises. Just screenshots.

100 free screenshots on sign-up · 50 bonus for each friend you invite

Starter

$18/mo
  • 1,500 screenshots/mo
  • 50/min rate limit
  • $0.009 overage
  • All features included
Get Started
Most Popular

Pro

$45/mo
  • 7,500 screenshots/mo
  • 100/min rate limit
  • $0.009 overage
  • All features included
Get Started

Business

$149/mo
  • 30,000 screenshots/mo
  • 200/min rate limit
  • $0.0075 overage
  • All features included
Get Started

Enterprise

$329/mo
  • 100,000 screenshots/mo
  • 400/min rate limit
  • $0.005 overage
  • All features included
Get Started

Ready to integrate with Webflow?

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