CMSIntegration

SnapSharp + Webflow

Auto-generate dynamic OG images and previews for every CMS item.

Webflow is the most popular visual CMS for marketing-led sites — but it ships with zero built-in support for dynamic OG images or programmatic screenshot previews. Pair it with SnapSharp and that gap disappears. Hook a Webflow CMS webhook to a small automation step (or our serverless endpoint) that calls SnapSharp's `/v1/og-image` for every blog post, product, or marketing page, then writes the image URL back into a CMS field via the Webflow API. The result is a unique, on-brand social card for every item, generated in under three seconds, with no manual upload step. This page covers the recommended pattern, the Webflow CMS API quirks that matter (rate limits, locale fields, draft state), and the alternatives in the Webflow marketplace.

How it works

A typical end-to-end flow takes 1–3 seconds.

1
CMS item created or updated in Webflow
An editor publishes a blog post, product, or any CMS collection item.
2
Webflow webhook fires
Webflow's `collection_item_created`/`collection_item_changed` webhook hits your endpoint.
3
Generate OG image with SnapSharp
Your endpoint calls `/v1/og-image` with the item's title, author, and template ID.
4
Write image URL back to the CMS
A PATCH to the Webflow API stores the SnapSharp CDN URL in the item's "OG Image" field.

Setup guide

Follow these steps in order. Each one stands alone, so you can copy code blocks directly without re-reading earlier ones.

1Add an "OG Image" field to your CMS collection
In Webflow Designer → CMS → your collection (e.g. "Blog Posts"), add a new Image field named "OG Image" (or reuse an existing one). Reference it from the page's `<head>` via `og:image` and `twitter:image` meta tags.
2Create a Webflow site API token
In Webflow → Site Settings → Integrations, generate a new API token with read/write access to your CMS. Store it somewhere your automation step can reach (Vercel env var, Make connection, Zapier secret).
3Choose where the automation runs
Three good options — Make/Zapier (no-code, fastest to ship), n8n (self-hosted, free at scale), or a Vercel/Cloudflare Worker endpoint (most flexible). The example below uses a Vercel serverless function in TypeScript.

4Subscribe to the Webflow webhook

In Webflow → Site Settings → Integrations → Webhooks, add a `collection_item_created` and `collection_item_changed` hook pointing at your endpoint. Webflow signs every payload — verify the signature before doing any work.

// Vercel/Cloudflare Worker endpoint (TypeScript)
export async function POST(req: Request) {
  const body = await req.json();
  if (body.triggerType !== 'collection_item_created' &&
      body.triggerType !== 'collection_item_changed') {
    return new Response('ignored', { status: 200 });
  }

  const { fieldData, _id: itemId, cmsLocaleId } = body.payload;

  // Render OG image
  const og = await fetch('https://api.snapsharp.dev/v1/og-image', {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${process.env.SNAPSHARP_API_KEY}`,
      'Content-Type':  'application/json',
    },
    body: JSON.stringify({
      template_id: 'webflow-blog',
      variables: {
        title:  fieldData.name,
        author: fieldData.author ?? 'SnapSharp',
      },
      upload_to_s3: false,
    }),
  }).then((r) => r.json());

  // Write back to Webflow
  await fetch(`https://api.webflow.com/v2/collections/${COLLECTION_ID}/items/${itemId}`, {
    method:  'PATCH',
    headers: {
      'Authorization': `Bearer ${process.env.WEBFLOW_TOKEN}`,
      'Content-Type':  'application/json',
      'accept-version': '2.0.0',
    },
    body: JSON.stringify({
      fieldData: {
        'og-image': { url: og.image_url, alt: fieldData.name },
      },
    }),
  });

  return new Response('ok', { status: 200 });
}

5Test with a fresh CMS item
Create a draft blog post in Webflow. The webhook fires within a few seconds, your endpoint calls SnapSharp, and the OG Image field populates automatically. Publish to the live site to verify the meta tag is rendered correctly.
6Backfill existing items
Run a one-time script that paginates the Webflow collection (50 items at a time, respect rate limits), generates an OG image per item, and PATCHes each row. Typical sites finish backfill in under an hour.

Trigger examples

Real-world patterns where Webflow fires and SnapSharp produces the asset.

New blog post published → OG card

The single most common use case — every new blog item gets a branded social card without an editor having to upload one.

Product CMS item updated → fresh screenshot

For marketplace and SaaS sites — when a product page changes, render a new screenshot for the product card and gallery thumbnails.

Localized item published → locale-specific OG

Webflow Localization lets you publish per-locale CMS content. Render one OG image per locale by passing the localized title to a single template — keeps Asian/RTL languages from clipping.

Press page added → PDF archive

For PR teams — when a "Press Mention" CMS item is added, render the source URL as a PDF and attach it to the item for archive.

Action examples

Each card shows the operation and the inputs you'd typically map from upstream.

Generate OG image from a Webflow CMS item

Render an OG card using fields from the CMS item.

template_id: webflow-blog-card
variables.title: {{item.fieldData.name}}
variables.author: {{item.fieldData.author}}
variables.cover: {{item.fieldData.thumbnail.url}}

Screenshot a product page

Render the actual page (post-publish) for use in a marketplace gallery.

url: https://example.com/products/{{item.fieldData.slug}}
width: 1200
full_page: false

PDF archive of a press mention

One-shot PDF capture stored in your S3/R2 bucket.

url: {{item.fieldData.source_url}}
format: pdf
upload_to_s3: true

Extract metadata from a referenced URL

Pull title/description/OG image from any URL referenced in a CMS field.

url: {{item.fieldData.source_url}}

Pricing notes

Webflow CMS plans start at $29/mo and include unlimited webhook triggers on the CMS plan and above. SnapSharp consumption is independent — one rendered OG card equals one SnapSharp request. Most marketing sites publish 5–50 CMS items a day, well within the SnapSharp Starter plan ($19/mo, 5,000 requests).

Limitations to know

•Webflow's CMS API rate limit is 60 requests/min per site. Backfills should batch with delay; webhook-triggered renders are well under that.
•Image fields in Webflow CMS expect an asset URL — Webflow re-hosts the file on its CDN on first use. Make sure the SnapSharp URL is publicly reachable when the PATCH lands.
•Webflow's `collection_item_changed` webhook fires on any field change, including the one your automation just wrote. Use a checksum on the title/author fields to skip redundant re-renders.

How SnapSharp compares to other apps in Webflow

Quick reference — every alternative listed below is also available in Webflow.

Webflow + manual OG uploads

Manual uploads are inconsistent, off-brand, and editors often forget. SnapSharp guarantees every item has a card on publish.

Bannerbear's Webflow integration

Bannerbear handles OG well but has no screenshot or PDF endpoint. SnapSharp covers all three from one API.

Placid Webflow template

Placid is similar in scope but more expensive at the same volume and lacks visual monitoring or site audit features.

FAQ

Do I need a paid Webflow plan to use webhooks?

You need at least the CMS plan ($29/mo) for outbound webhooks. The free plan does not expose webhook triggers, though you can poll the API as a workaround.

Will the OG image regenerate when an editor changes the title?

Yes — `collection_item_changed` fires on every field change. Your endpoint should detect title/author/cover changes and re-render only when those specific fields move. Skip the rest to save quota.

Can I template the SnapSharp OG card per collection?

Yes. Create a SnapSharp OG template per collection (blog, product, press, ...) and pass the collection ID into a switch statement in your endpoint to pick the right template.

How does this interact with Webflow Localization?

The webhook payload includes `cmsLocaleId`. Render one OG card per locale by passing the localized title and writing back to the correct localized field via the Webflow v2 API's locale-aware PATCH.

What about hosting the OG images?

You have two options — let SnapSharp host them on our CDN (default, simplest) or set `upload_to_s3: true` to push to your own R2/S3 bucket. Either way, just paste the resulting URL into the Webflow CMS field.

Wire SnapSharp into Webflow in under five minutes

Free plan includes 100 requests/mo — enough to build, test, and demo your automation before deciding on a paid plan.

Start free See pricing