Webflow Connector

​

Overview

• Publishing to any CMS collection
• Flexible field mapping for custom collection structures
• HTML content formatting optimized for Webflow
• Category and tag synchronization
• Scheduled publishing

​

Prerequisites

1. Webflow site with CMS enabled
2. CMS Collection for blog posts/articles
3. API token with CMS write permissions
4. Site ID from your Webflow dashboard

​

Setup Guide

​

Step 1: Get Your Site ID

1. Go to your Webflow dashboard
2. Open your site’s settings
3. Find the Site ID in the URL or settings panel

​

Step 2: Create an API Token

1. Go to Webflow Dashboard → Account Settings → Integrations
2. Or visit webflow.com/dashboard/account/integrations
3. Click Generate API Token
4. Select the sites you want to grant access to
5. Enable CMS permissions (read and write)
6. Copy the generated token

​

Step 3: Get Your Collection ID

1. In Webflow Designer, go to CMS Collections
2. Select your blog/articles collection
3. The Collection ID is in the URL: collections/{collection-id}

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

​

Step 4: Configure Field Mapping

interface WebflowConnectorConfig {
  type: "webflow";
  siteId: string;         // Your Webflow site ID
  token: string;          // API token
  collectionId: string;   // Collection ID for articles

  fieldMapping: {
    title: string;        // Field slug for title
    slug: string;         // Field slug for slug
    excerpt: string;      // Field slug for excerpt
    content: string;      // Field slug for body (Rich Text)
    featuredImage?: string; // Field slug for main image
    publishAt?: string;   // Field slug for publish date
    status?: string;      // Field slug for status
  };

  taxonomyMapping: {
    category: string;     // Multi-reference field for categories
    tag: string;          // Multi-reference field for tags
    author: string;       // Reference field for author
  };
}

​

Step 5: Configure in Skayle

1. Go to Settings → Connectors in Skayle
2. Select Webflow as your connector type
3. Enter your configuration:

4. Click Test Connection to verify

​

Webflow Collection Setup

​

Required Fields

​

Optional Fields

​

Content Formatting

​

Why Minified HTML?

<!-- Before minification -->
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

<!-- After minification (what Skayle sends) -->
<ul><li>Item 1</li><li>Item 2</li></ul>

​

Supported Elements

​

Taxonomy Mapping

​

Multi-Reference Fields

1. Create separate collections for Categories and Tags
2. Add multi-reference fields to your Posts collection
3. Configure the field slugs in Skayle

​

Syncing Process

GET /collections/{categories-collection-id}/items
GET /collections/{tags-collection-id}/items

POST /collections/{collection-id}/items
{
  "fieldData": {
    "name": "Technology",
    "slug": "technology"
  }
}

​

Image Handling

​

External URLs

{
  "main-image": {
    "url": "https://example.com/image.jpg",
    "alt": "Image description"
  }
}

​

Webflow Assets

​

Publishing Workflow

​

Draft vs Published

1. Draft: Item exists but isn’t live on the site
2. Published: Item is live and visible

• Use Webflow’s publish feature
• Or configure auto-publish in your workflow

​

Staging vs Production

1. CMS changes go to staging first
2. Publishing the site pushes changes to production

​

Troubleshooting

​

Connection Issues

​

Publishing Issues

​

API Rate Limits

​

Best Practices

1. Test field mapping: Verify all fields work before bulk publishing
2. Use staging: Test content in staging before publishing to production
3. Sync taxonomies first: Always sync categories/tags before articles
4. Monitor rate limits: Don’t publish too many articles at once
5. Backup collections: Export your CMS data regularly

​

Next Steps