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

# Webflow Integration

> Publish XLR8.ai-generated content directly to your Webflow CMS — no copy-pasting required.

The Webflow integration lets you push content generated by XLR8.ai straight into your Webflow site as CMS collection items. Once connected, you can select a target site and collection, then publish in a single action from the XLR8.ai content view.

## Prerequisites

Before connecting, make sure you have:

* A Webflow account with at least one published site
* A CMS collection on that site (or you can create one during setup)
* A Webflow **personal access token** with the following scopes: `sites:read`, `sites:write`, `cms:read`, `cms:write`

<Note>
  You need a site-level token, not a workspace token. Site tokens are created under **Site Settings → Apps & integrations → API access** in the Webflow dashboard.
</Note>

***

## Connect your Webflow account

<Steps>
  <Step title="Open the Webflow integration page">
    In XLR8.ai, go to **Settings → Integrations → Webflow** (or navigate directly to `/settings/integrations/webflow`).
  </Step>

  <Step title="Generate a Webflow personal access token">
    In a separate tab, open your Webflow site dashboard and go to **Site Settings → Apps & integrations → API access**.

    Click **Generate API token**, give it a name such as "XLR8 Integration", and grant **Read and Write** access for all four scopes:

    * `sites:read`
    * `sites:write`
    * `cms:read`
    * `cms:write`

    Click **Generate token** and copy it. You won't be able to see it again.

    <Tip>
      Click **How to get a token?** on the XLR8.ai integration page for a step-by-step guide with a link to the official Webflow documentation.
    </Tip>
  </Step>

  <Step title="Paste the token and connect">
    Back in XLR8.ai, paste the token into the **Webflow personal access token** field and click **Connect with API token**.

    XLR8.ai validates the token by calling the Webflow API and retrieving your sites. If the token is valid, the connection status changes to **Connected** and your first site is selected automatically.
  </Step>
</Steps>

<Warning>
  Your token is stored encrypted and used only to call the Webflow API on your behalf. Never share your token publicly or include it in version-controlled files.
</Warning>

***

## Configure your site and collection

After connecting, the integration page shows a **Connected** status with your Webflow site name. Configure where your content will be published before you use the publish action.

### Select a site

Use the **Webflow Site** dropdown to choose which of your Webflow sites receives published content. Switching the site reloads the available collections automatically.

### Select a default collection

Use the **Default Collection** dropdown to choose the CMS collection that XLR8.ai will publish content into. This collection is used by default every time you publish a piece of content.

If you don't have a suitable collection yet, click **Create Collection** to create one directly from XLR8.ai.

#### Create a collection

<Steps>
  <Step title="Click Create Collection">
    Select the target site first, then click **Create Collection** next to the collection dropdown.
  </Step>

  <Step title="Enter a name and optional slug">
    Enter a base name for the collection — XLR8.ai automatically prefixes it with `XLR8-` to keep it identifiable in your Webflow dashboard (for example, `XLR8-Blog Posts`).

    Optionally enter a URL slug. If you leave the slug empty, it is generated from the name. The collection is created with **Name** and **Body** fields.
  </Step>

  <Step title="Confirm">
    Click **Create Collection**. XLR8.ai creates the collection in Webflow and selects it as the default automatically.
  </Step>
</Steps>

<Note>
  Collections created from XLR8.ai include a Name field and a Body field. If you need additional fields (such as author, category, or tags), add them in the Webflow CMS editor after creation.
</Note>

***

## Publish content to Webflow

Once your site and collection are configured, you can publish any piece of generated content to Webflow.

<Steps>
  <Step title="Open a content item">
    Navigate to **Content** and open the piece of content you want to publish.
  </Step>

  <Step title="Select Publish to Webflow">
    Click the **Publish to Webflow** action. XLR8.ai uses your configured default collection.
  </Step>

  <Step title="Review the slug">
    A URL slug is generated from your content title. You can customize it before confirming. Slugs must be lowercase, hyphen-separated, and unique within the collection.

    <Tip>
      XLR8.ai checks slug availability in real time. If a slug is already taken, it suggests an alternative.
    </Tip>
  </Step>

  <Step title="Confirm and publish">
    Click **Publish**. XLR8.ai creates a CMS item in your Webflow collection. Content is published live immediately.
  </Step>
</Steps>

***

## Check sync status

After publishing, XLR8.ai tracks whether your local content has changed since the last sync to Webflow.

If you edit the content in XLR8.ai after publishing, the content view shows a **local changes** indicator. This means your Webflow CMS item is out of date relative to the current version in XLR8.ai.

To push the latest version to Webflow, use the **Update** (or re-publish) action. XLR8.ai sends the updated fields and marks the content as synced.

***

## Disconnect Webflow

To remove the Webflow integration from your account:

1. Go to **Settings → Integrations → Webflow**.
2. Click **Disconnect**.
3. Confirm the prompt.

Disconnecting removes the stored access token and integration record. Previously published content remains in your Webflow site — disconnecting does not delete any Webflow CMS items.

<Warning>
  After disconnecting, you won't be able to publish new content or update existing Webflow items from XLR8.ai until you reconnect.
</Warning>

***

## Troubleshooting

<AccordionGroup>
  <Accordion title="Connection fails with 'Invalid token or missing required scopes'">
    Your token is missing one or more required scopes. Go to **Webflow → Site Settings → Apps & integrations → API access**, revoke the existing token, generate a new one, and make sure you enable **Read** and **Write** for `sites:read`, `sites:write`, `cms:read`, and `cms:write`.
  </Accordion>

  <Accordion title="No sites appear after connecting">
    Your token must be a **site-level token**, not a workspace-level token. Site-level tokens are generated from within a specific site's settings, not from the Webflow workspace dashboard. Create a new token from **Site Settings → Apps & integrations → API access**.
  </Accordion>

  <Accordion title="No collections appear for my site">
    The selected site may not have any CMS collections. In Webflow, go to **CMS → Collections** for that site and create at least one collection. Then return to XLR8.ai and reload the collections list. Alternatively, use **Create Collection** in XLR8.ai to create one directly.
  </Accordion>

  <Accordion title="Slug validation error when publishing">
    Slugs must contain only lowercase letters, numbers, and hyphens. They cannot start or end with a hyphen, and must be unique within the collection. Edit the slug to remove any special characters or spaces, and try again.
  </Accordion>

  <Accordion title="Content published but changes aren't visible on the live site">
    Webflow may require a site publish after CMS item changes. Go to your Webflow site dashboard and click **Publish** to push the changes live. If the issue persists, check that your token has `sites:write` scope — without it, automatic site publishing after content changes is not possible.
  </Accordion>

  <Accordion title="Disconnect succeeded but the item is still in Webflow">
    Disconnecting XLR8.ai only removes the integration credentials — it does not delete CMS items from Webflow. To remove published items, delete them directly from the Webflow CMS editor.
  </Accordion>
</AccordionGroup>

***

## Related

<CardGroup cols={2}>
  <Card title="Content generation" icon="pen-to-square" href="/content/generation">
    Generate AI-optimized content ready to publish to Webflow.
  </Card>

  <Card title="Content optimization" icon="chart-line" href="/content/optimization">
    Improve existing content before pushing it to your Webflow site.
  </Card>

  <Card title="Settings" icon="gear" href="/integrations/settings">
    Configure your company profile and blog URL monitoring.
  </Card>

  <Card title="Quick start" icon="rocket" href="/quickstart">
    New to XLR8.ai? Start here.
  </Card>
</CardGroup>