> ## Documentation Index
> Fetch the complete documentation index at: https://docs.siftly.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Webflow Integration

> Publish GEO-optimized content from Siftly directly to a Webflow CMS collection using the Webflow Data API v2.

<Frame>
  <img src="https://mintcdn.com/siftly/IwND2vAxRbhCiRev/images/cms-integrations.svg?fit=max&auto=format&n=IwND2vAxRbhCiRev&q=85&s=2704e9affce00587d23137bf707339c7" alt="Supported CMS platforms including Webflow" className="rounded-xl" width="900" height="280" data-path="images/cms-integrations.svg" />
</Frame>

## Overview

This guide is for Webflow users who want to publish Siftly-generated content to their CMS collections and apply GEO/SEO recommendations (meta tags, JSON-LD, keywords). After following it, you'll know how to connect Siftly, map fields, and ensure structured data renders correctly on your Webflow site.

**Difficulty:** ⚠️ Some technical setup — Webflow's SEO fields are straightforward, but dynamic JSON-LD requires custom code embeds.

The Siftly–Webflow integration uses the **Webflow Data API v2** to create and publish CMS collection items directly from Siftly's content editor. Your content fields are mapped to your Webflow collection schema using the unified 3-tier field mapping system — no copy-pasting required.

***

## Prerequisites

Before connecting, you'll need:

* A Webflow site with at least one **CMS Collection** set up
* A **Webflow API v2 personal access token** with the correct permissions (see below)
* Your Webflow **Site ID**
* The **field slugs** of your collection's content fields

***

## Step 1: Create a Webflow API token

Webflow uses personal access tokens to authenticate third-party integrations.

1. Log in to [webflow.com](https://webflow.com) and open your site
2. Go to **Site Settings → Integrations → API Access**
3. Under **Personal access tokens**, click **Generate API token**
4. Give it a name, e.g. `Siftly`
5. Set the token expiry (choose **No expiry** for a persistent connection)

### Required permissions

When setting up the token you'll see a long list of permission scopes. **You need to enable three:**

<Note>
  All other scopes (Pages, Ecommerce, Forms, etc.) can stay on **No access**. Granting unnecessary scopes is a security risk.
</Note>

| Scope      | Permission level | Why it's needed                                               |
| ---------- | ---------------- | ------------------------------------------------------------- |
| **CMS**    | Read + Write     | List collections, create items, publish items                 |
| **Assets** | Read + Write     | Upload hero images and inline content images to Webflow's CDN |
| **Sites**  | Read             | Validate your Site ID and fetch site metadata                 |

Here's exactly what to select in Webflow's token form:

```
CMS          → Read and write (✓)
Assets       → Read and write (✓)
Sites        → Read only     (✓)
Everything else → No access  (leave untouched)
```

6. Click **Generate token** and **copy it immediately** — Webflow won't show it again.

<Warning>
  Store the token securely. Siftly encrypts it at rest, but if you need to revoke access, delete the token from Webflow's API Access settings.
</Warning>

***

## Step 2: Find your Site ID

Your Webflow Site ID is a 24-character hex string found in **Site Settings → General → Site ID**.

You can also copy it from the URL when you're in the Webflow Designer:

```
https://webflow.com/design/{YOUR_SITE_ID}
```

***

## Step 3: Identify your collection's field slugs

Webflow identifies each field by a **field slug** — a lowercase, hyphen-separated identifier. You'll need to know the slugs for the fields you want Siftly to populate.

To find field slugs:

1. Open your Webflow site in the **Designer**
2. Click **CMS** in the left panel
3. Open your collection and click **Edit Fields**
4. Each field shows its slug below the display name (e.g. `post-body`, `summary`, `sitemap-indexed`)

***

## Step 4: Connect Webflow in Siftly

1. In Siftly, go to **Settings → Integrations → CMS**
2. Click **Connect** next to **Webflow**
3. Enter your **API token** and **Site ID**, then click **Validate & Continue**
4. Siftly will fetch your available CMS collections — select the one you want to publish to
5. Map your content fields (see Field Mapping below)
6. Optionally enter your **Blog Base URL** (e.g. `https://www.mysite.com/blog`) — used to construct the published post URL in Siftly
7. Click **Connect Webflow**

***

## Field Mapping

Siftly uses a 3-tier field mapping system. Enter the Webflow **field slug** for each field you want to populate.

### Required Fields

These fields must be mapped to publish content.

| Siftly Field | Maps To       | Description                                                           |
| ------------ | ------------- | --------------------------------------------------------------------- |
| **Title**    | `title_field` | The post title. Webflow's built-in `name` field is used by default.   |
| **Slug**     | `slug_field`  | The URL slug. Webflow's built-in `slug` field is used by default.     |
| **Body**     | `body_field`  | The full post body. Must be a **Rich Text** field in your collection. |

<Tip>
  Webflow has built-in `name` and `slug` fields on every CMS item. These are handled automatically — you only need to map the body field and any optional fields you want.
</Tip>

### Optional Fields

Leave any of these blank to skip them. When mapped, they are auto-populated from your content data.

| Siftly Field         | Suggested Webflow Field Type | Example Slug   |
| -------------------- | ---------------------------- | -------------- |
| **Meta Title**       | Plain Text                   | `meta-title`   |
| **Meta Description** | Plain Text                   | `post-summary` |
| **Keywords**         | Plain Text (comma-separated) | `keywords`     |
| **Categories**       | Plain Text (comma-separated) | `categories`   |
| **JSON-LD**          | Plain Text (long)            | `json-ld`      |
| **Word Count**       | Number                       | `word-count`   |

<Tip>
  If your collection doesn't have fields for optional data yet, add them in **CMS → Collection → Add Field** before connecting.
</Tip>

***

## Custom Fields

Add extra fields your CMS collection requires that aren't part of Siftly's standard content schema.

### Field Types

| Type    | Description                  | Example                           |
| ------- | ---------------------------- | --------------------------------- |
| String  | Plain text                   | Author name, subtitle             |
| Number  | Numeric value                | Priority, reading time            |
| Boolean | True/false                   | Featured post, comments enabled   |
| JSON    | Structured object            | SEO config, social media metadata |
| Select  | Pick from predefined options | Category, status, content type    |

### Select Options with Separate Labels and Values

When adding a **Select** custom field, you define the available options in a textarea. Each option can have a separate **value** (sent to CMS) and **label** (shown in the dropdown):

```
value:label
```

**Example — Labels differ from values:**

```
1:Health
2:Tech
3:Food
4:Fashion
```

The dropdown shows `Health`, `Tech`, etc., but Siftly sends `1`, `2`, etc. to the CMS API.

**Example — Labels same as values:**

```
food
tech
health
fashion
```

When no `:` is present, the option text is used as both the label and value. This is backward-compatible with existing configurations.

<Tip>
  Use the `value:label` format when your CMS expects specific IDs, slugs, or enum values that differ from the human-readable names shown to content editors.
</Tip>

### Default Values

Set a default value when adding a custom field. This value pre-fills at publish time — you can override it for each post.

### Use Existing Field

Instead of setting a manual default, you can link a custom field to an existing content field. For example, map your collection's `post-summary` field to use the same value as **Meta Description**.

This is useful when your CMS has multiple fields that should contain the same data (e.g., `post-summary` and `meta-description` both using your meta description).

***

## Publishing

### Draft vs Published

When publishing, choose between:

* **Draft** — content is pushed to your Webflow collection as a draft CMS item
* **Published** — the CMS item is created and immediately published to your live site

### Custom Fields at Publish Time

If you've defined custom fields, they appear in the publish dialog pre-filled with their default values (or auto-filled from linked fields). You can edit them before publishing.

Standard fields (title, slug, body, meta data, keywords, categories, JSON-LD) are auto-populated from your content — no manual input needed.

***

## Troubleshooting

<AccordionGroup>
  <Accordion title="401 / Access denied — invalid token">
    The API token is incorrect or has been revoked. Generate a new token in Webflow **Site Settings → Integrations → API Access** and reconnect in Siftly.
  </Accordion>

  <Accordion title="403 — Insufficient permissions">
    Your token is missing the **CMS: Read and Write** scope. Delete the token in Webflow, create a new one with CMS + Sites read permissions, and reconnect.
  </Accordion>

  <Accordion title="Site not found (404)">
    The Site ID is incorrect. Copy it from **Site Settings → General → Site ID** — it's a 24-character hex string, not your site's domain or display name.
  </Accordion>

  <Accordion title="No collections appear in the dropdown">
    Your site has no CMS collections, or the token lacks CMS read access. Create a collection in Webflow's Designer first, then validate again in Siftly.
  </Accordion>

  <Accordion title="Item created but body field is empty">
    The body field slug you entered doesn't match the actual slug in Webflow. Open your collection in **CMS → Edit Fields** and copy the exact slug shown under the field name.
  </Accordion>

  <Accordion title="Item created but not published live">
    Siftly creates items with `isDraft: false` and then calls the publish endpoint when you select **Published** status. If the item appears in Webflow as a draft, check that your token has CMS **Write** (not just Read) access.
  </Accordion>
</AccordionGroup>

***

## Where to apply Siftly's recommendations on Webflow

Webflow has two layers for SEO: **Page-level SEO settings** and **CMS Collection fields**. Here's where each Siftly recommendation goes.

### Meta Title

**For CMS collection pages (blog posts):**
Webflow auto-generates the `<title>` tag from a CMS field you bind in **Page Settings → SEO Settings → Title Tag**. Create a plain text field in your collection (e.g., `meta-title`) and bind it:

1. Open your CMS template page in the Designer
2. Click the gear icon → **SEO Settings**
3. In the **Title Tag** field, click the purple "+" icon and select your `meta-title` CMS field

Siftly pushes the meta title value to this field on publish.

**For static pages:**
Page Settings → **SEO Settings → Title Tag**. Enter Siftly's recommendation manually.

### Meta Description

**For CMS collection pages:**
Same flow as meta title — bind a CMS field (e.g., `post-summary`) to **SEO Settings → Meta Description**:

1. CMS template page → gear icon → **SEO Settings**
2. In the **Meta Description** field, bind your `post-summary` CMS field

Siftly maps its meta description to this field automatically.

**For static pages:**
Page Settings → **SEO Settings → Meta Description**.

### Open Graph Image / Social Share Image

**For CMS collection pages:**
Webflow has a dedicated **Open Graph Image** binding:

1. CMS template page → gear icon → **Open Graph Settings**
2. Bind a CMS **Image** field to the **OG Image** slot

<Note>
  Siftly uploads hero images and inline content images to Webflow Assets automatically at publish time. Map the **Hero Image** field to your collection's image field and Siftly will upload and set the Webflow CDN URL.
</Note>

**For static pages:**
Page Settings → **Open Graph Settings → OG Image**. Upload directly.

### Canonical URL

Webflow auto-generates canonical URLs for all pages. No action needed for standard content published through Siftly.

To override: Page Settings → **SEO Settings → Canonical URL**. This is rarely needed for original content.

### Tags & Categories

Webflow doesn't have a native tag/category taxonomy. Instead, use:

* A **Plain Text** field with comma-separated values (e.g., `keywords` field)
* A **Reference** or **Multi-reference** field linking to a separate "Categories" collection

Siftly pushes keywords and categories as comma-separated strings to plain text fields. For multi-reference fields, you'd need to create the referenced items in Webflow first.

### JSON-LD Structured Data

Webflow does NOT auto-generate JSON-LD. You must add it manually.

**For static pages:**
Page Settings → **Custom Code → Head Code**. Paste the full `<script type="application/ld+json">` block.

**For CMS collection pages (dynamic JSON-LD):**
Use Webflow's embed element with CMS field bindings:

1. Add an **Embed** element to your CMS template page (inside the `<head>` via custom code, or at the bottom of the body)
2. Use Webflow's dynamic field syntax to inject CMS data:

```html theme={null}
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "{{wf {"path":"name","type":"PlainText"} }}",
  "description": "{{wf {"path":"post-summary","type":"PlainText"} }}",
  "datePublished": "{{wf {"path":"created-on","type":"PlainText"} }}",
  "author": {
    "@type": "Person",
    "name": "{{wf {"path":"author-name","type":"PlainText"} }}"
  }
}
</script>
```

<Warning>
  The `{{wf {...} }}` template syntax only works inside **Embed** elements on CMS template pages. It does NOT work in Page Settings → Custom Code. If you need per-page dynamic JSON-LD, you MUST use an Embed element in the page body.
</Warning>

**Alternative — Store full JSON-LD in a CMS field:**
Create a `json-ld` plain text (long) field in your collection. Map Siftly's JSON-LD output to this field. Then add an Embed element that outputs it:

```html theme={null}
<script type="application/ld+json">
{{wf {"path":"json-ld","type":"PlainText"} }}
</script>
```

This lets Siftly push fully-formed JSON-LD that renders dynamically per post.

### Keywords

Webflow does not render a `<meta name="keywords">` tag by default. If you want one:

1. Add an Embed element in your CMS template page's `<head>` section (via custom code):

```html theme={null}
<meta name="keywords" content="{{wf {"path":"keywords","type":"PlainText"} }}">
```

For most use cases, keywords stored as tags in a CMS field are sufficient for AI crawlers that parse page content.

***

## Pushing Siftly recommendations automatically

<Steps>
  <Step title="Generate content in Siftly">
    Siftly produces your article plus meta title, meta description, keywords, categories, and JSON-LD.
  </Step>

  <Step title="Click Publish → Webflow">
    Select your Webflow collection. Choose Draft or Published status.
  </Step>

  <Step title="Fields pushed via API">
    All mapped fields (title, slug, body, meta title, meta description, keywords, categories, JSON-LD, word count) are sent in a single API call. CMS item is created with all data populated.
  </Step>

  <Step title="Publish the site (if needed)">
    Webflow CMS items are live immediately if you chose Published. If your site has unpublished changes in the Designer, you may need to click **Publish** in Webflow to push the latest template changes.
  </Step>
</Steps>

***

## Platform-specific quirks & limitations

<Warning>
  **Dynamic JSON-LD requires Embed elements.** Webflow's Page Settings → Custom Code does not support CMS field bindings (`{{wf ...}}`). For per-post JSON-LD, you MUST use an Embed element in the template page body.
</Warning>

<Note>
  **CMS item limits:** Webflow's CMS plans have item limits (e.g., 2,000 items on the Basic plan, 10,000 on Business). Check your plan's CMS item quota before bulk-publishing from Siftly.
</Note>

* **Publishing delay:** After creating a CMS item via API, it may take a few seconds for Webflow's CDN to reflect the change. New items are usually live within 30 seconds.
* **Rich Text field quirks:** Webflow's Rich Text fields support a subset of HTML. Unsupported tags (e.g., `<table>`, `<iframe>`) are stripped. If Siftly generates tables, they'll be removed by Webflow.
* **No API access to Page Settings SEO:** The Webflow Data API writes to CMS collection fields only — it cannot modify Page Settings (title tag bindings, meta description bindings). These bindings must be configured once in the Designer manually.
* **Staging vs Production:** Webflow's staging environment shows unpublished items. Published items go live on your production domain immediately via API.

***

## Validating the setup

After publishing your first CMS item from Siftly:

<Steps>
  <Step title="View the live page source">
    Open your published Webflow page in a browser. Right-click → **View Page Source**. Search for:

    * `<title>` — should contain your bound meta title CMS field value
    * `<meta name="description"` — should contain your meta description
    * `<script type="application/ld+json">` — should contain your JSON-LD (if using Embed element)
  </Step>

  <Step title="Run Google Rich Results Test">
    Go to [Google Rich Results Test](https://search.google.com/test/rich-results) and paste your page URL. Confirm JSON-LD is detected and valid.
  </Step>

  <Step title="Run Schema.org Validator">
    Go to [Schema.org Validator](https://validator.schema.org/) and paste your URL. Check for errors.
  </Step>

  <Step title="Check CMS field bindings">
    In the Webflow Designer, preview your CMS template page with a test item selected. Verify all bound fields (title, description, JSON-LD embed) render correctly.
  </Step>
</Steps>

***

## Difficulty & setup recap

<Card title="Webflow Setup Summary" icon="code">
  | Aspect                  | Rating                                                                            |
  | ----------------------- | --------------------------------------------------------------------------------- |
  | **Initial setup**       | ⚠️ Medium — API token + field slug identification                                 |
  | **Applying SEO fields** | ✅ Easy for meta title/description (CMS field bindings)                            |
  | **JSON-LD**             | ⚠️ Requires Embed element with `{{wf ...}}` syntax or stored JSON-LD field        |
  | **Ongoing editing**     | ✅ Easy — publish from Siftly, items appear in Webflow CMS                         |
  | **Developer needed?**   | For initial template setup (field bindings, Embed elements) — not for ongoing use |
</Card>

***

## Related

<CardGroup cols={2}>
  <Card title="CMS Integrations Overview" icon="grid-2" href="/integrations/overview">
    Compare all supported platforms and the unified field mapping system.
  </Card>

  <Card title="Quickstart Guide" icon="rocket" href="/quickstart">
    Set up your brand and run your first GEO analysis.
  </Card>

  <Card title="Content Generation" icon="file-pen" href="/features/content-generation">
    How Siftly generates GEO-optimized content and recommendations.
  </Card>

  <Card title="Choosing a CMS for AI Visibility" icon="book" href="https://siftly.ai/blog/cms-and-ai-visibility">
    Our guide to picking the right CMS for GEO optimization.
  </Card>
</CardGroup>