# Webflow

## Webflow Integration

Connect Cuppa to Webflow to automatically export your AI-generated content directly to your Webflow CMS Collections. This is perfect for teams who build content-driven websites on Webflow.

### What You Can Do

* **Export projects** to Webflow CMS with one click
* **Map your fields** to match your Collection structure
* **Auto-publish** items immediately or save as drafts
* **Bulk export** articles efficiently with rate limit handling

***

### Prerequisites

Before connecting, you'll need:

1. A **Webflow account** (CMS plan or higher)
2. A **Site API Token** from Webflow
3. A **CMS Collection** set up in Webflow to receive your content (e.g., "Blog Posts")

***

### Step 1: Create Your Webflow Site API Token

1. Go to your [Webflow Dashboard](https://webflow.com/dashboard)
2. Select your site
3. Go to **Site Settings** → **Apps & Integrations** → **API Access**
4. Click **"Generate API Token"**
5. Give it a name (e.g., "Cuppa Integration")
6. Select the following permissions:
   * `CMS - Read and write`
   * `Sites - Read-only` (to list your sites)
7. Click **"Generate Token"**
8. **Copy the token** — you won't see it again!

> 💡 **Tip**: Site API Tokens are scoped to a single site. If you have multiple Webflow sites, you'll need a token for each.

***

### Step 2: Set Up Your CMS Collection

Make sure you have a CMS Collection in Webflow to receive your content. A typical blog collection has:

| Field Name     | Field Type | Description                         |
| -------------- | ---------- | ----------------------------------- |
| Name           | Plain Text | Article title (required by Webflow) |
| Slug           | Plain Text | URL slug for the article            |
| Post Body      | Rich Text  | Main article content                |
| Post Summary   | Plain Text | Excerpt/description                 |
| Main Image     | Image      | Featured image                      |
| Published Date | Date       | Article date                        |

You can customize your collection structure — just make sure to note the **field slugs** (not display names) for mapping.

#### Finding Field Slugs

1. Open your Collection settings in Webflow
2. Click on a field
3. The **slug** is shown in the field settings (e.g., `post-body`, `main-image`)

***

### Step 3: Connect Webflow in Cuppa

1. Go to **Team Settings** → **Integrations**
2. Find **Webflow** and click **Connect**
3. Enter your **Site API Token**
4. Click **Validate** to verify the connection
5. Select your **Site** from the dropdown
6. Select your target **CMS Collection** (e.g., "Blog Posts")
7. **Map your fields**: Tell Cuppa which Collection fields should receive each content field
8. (Optional) Enable **"Publish items"** to make items live immediately
9. Click **Save**

***

### Step 4: Export Content to Webflow

#### Export a Single Project

1. Open any project in Cuppa
2. Click the **"Export"** button
3. Select **"Export to Webflow"**
4. Choose which articles to export
5. Decide whether to publish items immediately or save as drafts
6. Click **Export**

#### Bulk Export

For large exports, Cuppa automatically:

* Creates items one at a time (Webflow's requirement)
* Handles rate limits (60 requests/minute)
* Shows you progress as it exports

> ⏱️ **Note**: Due to Webflow's rate limits, bulk exports take longer than other integrations. A 100-article export takes approximately 2-3 minutes.

***

### Field Mapping Reference

When setting up your integration, you map Cuppa fields to your Collection field slugs:

| Cuppa Field      | Description           | Recommended Webflow Field Type |
| ---------------- | --------------------- | ------------------------------ |
| `title`          | Article title         | Plain Text                     |
| `slug`           | URL-friendly slug     | Plain Text                     |
| `content`        | Full HTML content     | Rich Text                      |
| `excerpt`        | Short summary         | Plain Text or Rich Text        |
| `target_keyword` | Primary keyword       | Plain Text                     |
| `language`       | Content language      | Plain Text                     |
| `image`          | Featured image URL    | Image (URL)                    |
| `date`           | Article creation date | Date/Time                      |

> 💡 **Tip**: Webflow's Rich Text fields automatically accept HTML content, so your formatted articles will render correctly.

***

### Understanding Draft vs Published

Webflow CMS items have two states:

* **Draft**: Items are saved but not visible on your live site
* **Published**: Items are live and visible on your site

When exporting from Cuppa:

* **"Publish items" OFF**: Items are saved as staged (ready to publish)
* **"Publish items" ON**: Items are immediately published and live

> 💡 **Tip**: For content review workflows, leave "Publish items" off and publish manually in Webflow after review.

***

### Troubleshooting

#### "Connection failed" error

* Double-check your Site API Token is correct
* Ensure the token has CMS read/write permissions
* Verify the token is for the correct site
* Tokens are site-specific — make sure you're using the right one
* Check if the token was regenerated or revoked in Webflow

**Token permission requirements:**

* `CMS - Read and write` (required)
* `Sites - Read-only` (recommended for site listing)

#### "Collection not found" error

* Make sure you've selected a valid CMS Collection
* Ensure your token has access to CMS features
* Verify the Collection ID hasn't changed (happens if Collection was deleted and recreated)
* Check that your Webflow site is on a CMS plan or higher

#### "Field validation failed" error

* The `name` field is always required by Webflow
* Check that your field mapping uses correct field slugs (not display names)
* Reference fields must use valid item IDs
* Multi-reference fields must be arrays
* Rich text fields must contain valid HTML

**Finding field slugs:**

1. Go to Webflow → Collection Settings
2. Click on a field
3. The slug is shown in field settings (e.g., `post-body`, not "Post Body")

#### Content not appearing in Webflow

* Check that all required fields are mapped (especially `name` which is required by Webflow)
* Verify field slugs in your mapping match exactly (case-sensitive)
* If publishing is off, items may be in your CMS but not staged/published
* Check your Webflow Designer → CMS Collection → All Items

**Item states in Webflow:**

* **Staged**: Item exists but isn't published (default for API-created items)
* **Published**: Item is live on your site
* **Draft**: Item is saved but not ready to stage

#### Rate limit errors

* Webflow limits requests to 60 per minute (Basic/CMS plan) or 120 per minute (Business/higher)
* Cuppa handles this automatically with built-in delays
* Very large exports (100+ articles) will take several minutes
* If you see rate limit errors, wait 1-2 minutes and try again

**Rate limit details by plan:**

| Plan       | Requests/Minute | Estimated 100-article export |
| ---------- | --------------- | ---------------------------- |
| CMS        | 60              | \~2-3 minutes                |
| Business   | 120             | \~1-2 minutes                |
| Enterprise | Higher          | Faster                       |

#### Images not showing

* Webflow accepts image URLs and hosts copies internally
* Ensure your image URLs are publicly accessible (not behind authentication)
* Large images (>20MB) may fail or take longer to process
* Supported formats: JPEG, PNG, GIF, WebP, SVG
* Webflow may compress images based on your plan settings

#### "Site publishing required" issues

* Creating CMS items doesn't automatically publish your site
* Items exist but won't be visible until the site is published
* Go to Webflow Designer → Publish to push changes live
* Consider enabling Webflow's auto-publish if you want immediate visibility

#### "Insufficient permissions" error

* Your Site API Token may lack required scopes
* Regenerate the token with `CMS - Read and write` permission
* Tokens cannot be edited after creation — must create a new one

#### "Item already exists" conflicts

* Webflow slugs must be unique within a Collection
* If exporting similar content, ensure slugs are unique
* Consider appending dates or IDs to slug field mapping

***

### FAQ

**Can I export to multiple Webflow sites?** Currently, each Cuppa team can connect to one Webflow site. Update your integration settings to switch between sites.

**Does it update existing items or create new ones?** Cuppa creates new CMS items each time. To update existing content, delete the items in Webflow first, then re-export.

**Why is the export slower than other integrations?** Webflow's API requires creating items one at a time and has stricter rate limits (60 req/min). This is a Webflow limitation, not Cuppa's. We handle rate limiting automatically to avoid errors.

**Can I schedule automatic exports?** Not yet, but you can use Cuppa's webhook feature to trigger exports when content is ready.

**What Webflow plans work with this integration?** You need a CMS plan or higher. The Starter plan doesn't include CMS features. Here's a breakdown:

| Plan       | CMS Support | API Access |
| ---------- | ----------- | ---------- |
| Starter    | ❌ No        | ❌ No       |
| CMS        | ✅ Yes       | ✅ Yes      |
| Business   | ✅ Yes       | ✅ Yes      |
| Enterprise | ✅ Yes       | ✅ Yes      |

**Do I need to publish my Webflow site after exporting?** Yes! Creating CMS items via API doesn't automatically publish your site. Go to the Webflow Designer and click "Publish" to push changes live.

**Can I export to multiple Collections at once?** No. Each export targets one Collection. If you need content in multiple Collections, set up separate integrations or export separately.

**What's the difference between "staged" and "published" items?**

* **Staged**: Items exist in your CMS but aren't live yet
* **Published**: Items are visible on your published site
* The "Publish items" toggle in Cuppa stages items for publishing, but you still need to publish your site in Webflow.

**Can I map to Reference fields?** Currently, Cuppa doesn't automatically resolve Reference field relationships. You can set these manually in Webflow after export.

**Why do my Rich Text fields look different?** Webflow's Rich Text fields accept HTML, but may render it differently than expected. Check your Webflow site's Rich Text styles.

**Is there a limit to how many items I can export?** There's no Cuppa limit, but Webflow has Collection item limits based on your plan:

* CMS: 2,000 items per Collection
* Business: 10,000 items per Collection
* Enterprise: Higher limits

**What happens if Webflow is down during export?** The export will fail. You can retry from the project page once Webflow is back online.

**Can I use this with Webflow Memberships?** Items are created as public by default. Membership visibility settings must be configured in Webflow after export.

**Do exported items trigger Webflow automations?** Yes! CMS items created via API can trigger Webflow Logic flows and integrations, just like manually created items.

**My token stopped working — what happened?** Site API Tokens don't expire, but they can be:

* Revoked manually in Webflow
* Invalidated if the site is transferred
* Affected by plan changes Create a new token in Webflow and update your Cuppa integration.

***

### Need Help?

* Check our [Help Center](https://learn.cuppa.ai)
* Contact support at <support@cuppa.ai>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://learn.cuppa.ai/integrations/webflow.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.