Prerequisites

• Webflow account with CMS plan or higher

• A CMS Collection with content to optimize

• API access (available on all paid plans)

Setup Steps

Step 1: Generate an API Token

1. Go to your Webflow Account Settings

2. Navigate to Integrations → API Access

3. Click Generate API Token

4. Select the following scopes:

   • cms:read → Read collection items

   • cms:write → Update collection items

5. Copy the generated token

Step 2: Find Your Collection ID

1. Open your Webflow project

2. Go to CMS Collections

3. Click on the collection you want to connect (e.g., "Blog Posts")

4. The Collection ID is in the URL: https://webflow.com/dashboard/sites/.../cms-collection-pages/{COLLECTION_ID}

Alternatively, use the API:

curl -H "Authorization: Bearer YOUR_TOKEN" \
  "https://api.webflow.com/v2/sites/{site_id}/collections"

Step 3: Map Your Fields

Webflow uses unique field IDs. You'll need to map these to Wrodium's expected fields.

1. Get your collection's field schema:

curl -H "Authorization: Bearer YOUR_TOKEN" \
  "https://api.webflow.com/v2/collections/{collection_id}"

2. Note the field IDs for:

   • Title field (e.g., BnNuS2i3o)

   • Content field (e.g., eDniSM8L9)

   • Excerpt field (e.g., DmV2tOwlJ)

   • Published date field (e.g., vUvFzeUxy)

   • URL/slug field (optional)

Step 4: Configure Wrodium

1. Go to Settings → CMS Connection in Wrodium

2. Select Webflow as your provider

3. Enter your configuration:

4. Click Test Connection then Save

Configuration Schema

{
  "provider": "webflow",
  "provider_config": {
    "token": "your-webflow-api-token",
    "collection_id": "66a1b2c3d4e5f6g7h8i9j0k1",
    "field_ids": {
      "title": "BnNuS2i3o",
      "content": "eDniSM8L9",
      "excerpt": "DmV2tOwlJ",
      "published_date": "vUvFzeUxy",
      "url": "postUrlFieldId"
    },
    "locale": "en-US"
  }
}

API Behavior

Listing Articles

Wrodium fetches live items via:

Updating Articles

Updates use a PATCH request to preserve existing fields:

Request body:

{
  "isArchived": false,
  "isDraft": false,
  "fieldData": {
    "BnNuS2i3o": "Updated Title",
    "eDniSM8L9": "<p>Updated content...</p>",
    "DmV2tOwlJ": "Updated excerpt"
  }
}

Status Mapping

Multi-Locale Support

For Webflow sites with localization:

{
  "provider_config": {
    "token": "...",
    "collection_id": "...",
    "field_ids": {...},
    "locale": "fr-FR"
  }
}

Troubleshooting

"401 Unauthorized" Error

• Your API token may have expired

• Check that the token has cms:read and cms:write scopes

"404 Not Found" Error

• Verify the Collection ID is correct

• Ensure you're using API v2 endpoints

Field Updates Not Appearing

• Webflow's live API updates published content directly

• Clear your Webflow cache if changes don't appear

• Check if Webflow's CDN needs time to propagate

Rich Text Formatting Issues

Webflow's rich text fields accept HTML but may strip certain tags. Supported tags:

• Headings: <h1> through <h6>

• Paragraphs: <p>

• Lists: <ul>, <ol>, <li>

• Links: <a href="...">

• Formatting: <strong>, <em>

• Blockquotes: <blockquote>

Code Example

import httpx

class WebflowClient:
    API_BASE = "https://api.webflow.com/v2"
    
    def __init__(self, token: str, collection_id: str, field_ids: dict):
        self.token = token
        self.collection_id = collection_id
        self.field_ids = field_ids
    
    def _headers(self):
        return {
            "Authorization": f"Bearer {self.token}",
            "Accept": "application/json",
        }
    
    async def list_articles(self, limit: int = 20):
        url = f"{self.API_BASE}/collections/{self.collection_id}/items/live"
        async with httpx.AsyncClient(timeout=15) as client:
            resp = await client.get(
                url, 
                headers=self._headers(), 
                params={"limit": limit}
            )
            resp.raise_for_status()
        return resp.json().get("items", [])
    
    async def update_article(self, article_id: str, field_data: dict):
        # First, get current item to merge fields
        get_url = f"{self.API_BASE}/collections/{self.collection_id}/items/{article_id}/live"
        async with httpx.AsyncClient(timeout=15) as client:
            current = await client.get(get_url, headers=self._headers())
            current.raise_for_status()
            existing_data = current.json().get("fieldData", {})
        
        # Merge with new data
        existing_data.update(field_data)
        
        payload = {
            "isArchived": False,
            "isDraft": False,
            "fieldData": existing_data,
        }
        
        async with httpx.AsyncClient(timeout=15) as client:
            resp = await client.patch(
                get_url,
                headers=self._headers(),
                json=payload
            )
            resp.raise_for_status()
        return resp.json()

Next Steps

• Understanding Webflow field mapping

• Optimize your first article

• Set up automated workflows