Webflow Integration

Auto-generate Open Graph images when you publish Webflow CMS items. 1FRX reads your collection fields, generates branded thumbnails, and updates your CMS items in seconds.

How it works

1. Webflow publishes a CMS item and sends a webhook to 1FRX
2. 1FRX extracts item fields like Name, Slug, Summary, and custom fields
3. Generates a 1200×630 thumbnail with your brand styling
4. Uploads to the 1FRX CDN for fast global delivery
5. Uses the Webflow REST API to update the CMS item's image field

Prerequisites

• Webflow site with CMS collections enabled
• 1FRX paid API key (Starter plan or higher)
• Webflow API token with CMS item and webhook permissions

Setup steps

1. Generate your 1FRX API key

Log into 1FRX and copy your API key from Settings. You'll add this to Webflow in the next steps.

2. Generate a Webflow API token

In Webflow:

1. Go to Account Settings → API Access (or Team Settings if using Team)
2. Click Create Token
3. Name it "1FRX"
4. Grant these scopes: cms:read, cms:write, webhooks:write
5. Copy the token (you'll only see it once)

3. Add credentials to 1FRX dashboard

In your 1FRX dashboard:

1. Go to Integrations → Webflow
2. Paste your Webflow API token
3. Select your Webflow project/site from the dropdown
4. Click Save and Test

4. Configure which CMS collection to monitor

In the 1FRX Webflow integration settings:

1. Choose your CMS collection (e.g., "Blog Posts" or "Projects")
2. Map which fields to use: Title Field, Description Field, Colour Field (optional)
3. Choose the output field where the image URL should be written (e.g., "OG Image" field)
4. Click Create Webhook

5. Test by publishing a CMS item

Create and publish a new item in your configured collection. Within 10 seconds, 1FRX should generate an image and update the specified field in your CMS item.

Webflow webhook payload example

When you publish a CMS item, Webflow sends this to 1FRX:

{
  "type": "cms_item_published",
  "timestamp": "2026-04-16T14:30:00Z",
  "collectionId": "647a8f9c2b4f9e1a8c0d5e2f",
  "collectionName": "Blog Posts",
  "itemId": "647a8fae2b4f9e1a8c0d5e30",
  "item": {
    "id": "647a8fae2b4f9e1a8c0d5e30",
    "_cid": "647a8f9c2b4f9e1a8c0d5e2f",
    "name": "Getting Started with AI",
    "slug": "getting-started-with-ai",
    "fields": {
      "title": "Getting Started with AI",
      "summary": "Learn the fundamentals of machine learning",
      "featured": true,
      "color": "#5ee3ff",
      "author": "Sarah Chen"
    },
    "publishedOn": "2026-04-16T14:30:00.000Z"
  }
}

CMS field mapping

1FRX reads these standard Webflow CMS fields:

• name: Item title (always available)
• slug: URL-friendly identifier
• Custom fields: Any text, email, or link field in your collection

You map which custom fields to use when creating the webhook. For example:

• Title field: "title" custom field from your collection
• Description field: "summary" or "excerpt"
• Accent colour field: "color" (e.g., hex value #5ee3ff)

Image update flow

After generating the image, 1FRX calls the Webflow CMS API to update your item:

{
  "fields": {
    "og-image": "https://cdn.1frx.com/og/webflow-xyz789.png"
  }
}

The field name matches whatever you configured in step 4 (e.g., "og-image", "thumbnail", "preview").

Customization

Image template

Choose from templates: Gradient, Bold, Minimal, or Modern. Update anytime in integration settings.

Brand accent colour

Set a default colour, or let 1FRX read a custom colour field from each CMS item for per-item customization.

Logo and styling

Upload your logo and set font preferences in the Webflow integration settings.

Troubleshooting

Webhook is not firing

Check that your Webflow API token has webhooks:write permission. If you created the token before granting this scope, regenerate it.

CMS item is not being updated

Verify the output field name is correct in your integration settings. It must exactly match a field in your collection.

Image quality is low

All images are generated at 1200×630 pixels. If they appear fuzzy, check the CDN URL is loading in a new browser tab without caching issues.

Field mapping error

Make sure your custom field names in the mapping match exactly (case-sensitive) with the field IDs in your Webflow collection.