Webflow Integration

Overview

AutopilotSEO's Webflow integration enables you to publish AI-generated content directly to your Webflow CMS collections. This seamless connection allows you to maintain your site's design and structure while automating content creation.

Requirements

  • A Webflow site with CMS collections
  • A Webflow API key with CMS permissions
  • Admin access to your Webflow site
  • Collections set up for blog posts or articles

Setting Up the Integration

Step 1: Create a Webflow API Key

  1. Log in to your Webflow account
  2. Go to Account Settings → Integrations tab
  3. Under "API Access," click Generate New Token
  4. Name your token (e.g., "AutopilotSEO")
  5. Select the following permissions:
    • sites:read
    • cms:read
    • cms:write
  6. Click Generate Token
  7. Important: Copy and save your API key immediately – you won't be able to see it again!

Step 2: Connect in AutopilotSEO

  1. In your AutopilotSEO workspace, go to Connections
  2. Click Add Connection and select Webflow
  3. Paste your Webflow API key
  4. Click Connect

Step 3: Select Your Webflow Site

  1. After connecting, you'll see a list of your Webflow sites
  2. Select the site you want to connect to AutopilotSEO
  3. Click <strong>Next</strong>

Step 4: Configure Collection Mapping

  1. Select the Webflow collection where you want to publish articles (typically a Blog Posts collection)
  2. Map AutopilotSEO article fields to your Webflow collection fields:
    • Title → your title field
    • Content → your rich text field
    • Summary → any excerpt or summary field
    • Featured Image → your image field
    • Categories/Tags → any category or tag fields
  3. Click Save Configuration

Note: Field mapping is crucial for proper content publishing. Make sure you map all required fields in your Webflow collection.

Step.5: Verify the Connection

  1. After saving, AutopilotSEO will verify the connection
  2. If successful, you'll see a confirmation message
  3. Your Webflow site will now appear in your connections list with a "Connected" status

Publishing Content to Webflow

Direct Publishing

To publish an article directly to Webflow:

  1. Open the completed article in your AutopilotSEO workspace
  2. Click the Publish button
  3. Select your Webflow connection from the dropdown
  4. Configure the publishing options:
    • Status: Draft or Published
    • Categories/Tags: Select as configured in your mapping
    • Custom Fields: Fill in any additional mapped fields
  5. Click Publish Now

Automated Publishing

To set up automatic publishing to Webflow:

  1. Go to the Queue section in your AutopilotSEO workspace
  2. Click Settings and then Automation
  3. Enable Auto-Publish to Webflow
  4. Configure your default publishing settings:
    • Webflow connection
    • Default collection
    • Default status (usually Draft for review)
    • Default category/tag values
  5. Save your settings

Pro Tip: When publishing to Webflow, always check your Webflow dashboard to ensure the content appears correctly with your site's styling.

Advanced Features

Rich Text Formatting

AutopilotSEO converts content to Webflow's rich text format, preserving:

  • Headings (H1-H6)
  • Text formatting (bold, italic, etc.)
  • Lists (ordered and unordered)
  • Links
  • Blockquotes

Image Handling

When publishing content with images to Webflow:

  • Images are uploaded to your Webflow asset manager
  • Featured images are automatically set if configured
  • Alt text is preserved for accessibility
  • Image dimensions are preserved

Multi-Collection Support

If your Webflow site has multiple collections:

  • You can set up different mappings for each collection
  • Select the appropriate collection when publishing
  • Create collection-specific automation rules

Troubleshooting

API Key Issues

If your connection fails:

  • Verify your API key is correct
  • Ensure you selected all the required permissions
  • Check if your API key has expired (Webflow keys expire after 1 year)
  • Generate a new API key if necessary

Publishing Errors

If articles aren't publishing correctly:

  • Check your field mapping to ensure all required fields are mapped
  • Verify that your collection hasn't been modified since setup
  • Make sure you haven't reached your Webflow API rate limits
  • Check for special characters or formatting that might cause issues

Formatting Problems

If content doesn't look right in Webflow:

  • Review your Webflow rich text field settings
  • Check custom code in your Webflow site that might affect content display
  • Verify that your rich text field allows all the elements you're using
  • Try publishing with minimal formatting first, then add complexity

Best Practices

  • Use draft status first - Always publish as drafts initially to verify formatting
  • Set up field validation - Use Webflow's field validation to ensure content meets your requirements
  • Organize with categories - Use categories and tags to keep your Webflow CMS organized
  • Regular testing - Periodically test your connection, especially after Webflow updates
  • Create templates - Use Webflow templates to ensure consistent styling for your published content

Related Resources