Webflow Integration

Connect Surva.ai to Webflow

The Webflow integration enables you to publish content from Surva.ai directly to your Webflow CMS. Streamline your content workflow while maintaining Webflow's design flexibility.

Prerequisites

Before connecting, ensure you have:

• A Webflow site with CMS enabled
• A Blog or Articles CMS collection
• Webflow API access (available on paid plans)
• Surva.ai Growth plan or higher

Getting Your Webflow API Token

1. Log in to Webflow
2. Go to Site Settings
3. Click Apps and Integrations
4. Under API Access, click Generate API Token
5. Copy the token immediately (shown only once)

Connecting to Surva.ai

1. In Surva.ai, go to Settings
2. Click Integrations
3. Find Webflow and click Connect
4. Paste your Webflow API token
5. Click Authenticate
6. Select the site to connect
7. Choose the CMS collection for blog posts
8. Map fields (see below)
9. Click Save Connection

Field Mapping

Map Surva.ai fields to your Webflow CMS collection:

• Title - Map to your Name/Title field
• Slug - Map to Slug field
• Content - Map to Rich Text body field
• Summary - Map to excerpt/summary field
• Featured Image - Map to main image field
• Author - Map to author reference (if applicable)
• Publish Date - Map to date field

Publishing Content

1. Go to Content and select an article
2. Click Publish
3. Select Webflow as destination
4. Review the field mapping preview
5. Choose to publish as Draft or Live
6. Click Publish to Webflow

Publishing to Staging vs. Production

Webflow has staging and production environments:

• Draft - Saves to CMS but not visible on live site
• Staged - Ready for publishing but not live
• Published - Live on your production site

After publishing from Surva.ai, you may need to publish your Webflow site to push changes live.

Image Handling

Images are handled automatically:

• Featured images upload to Webflow assets
• Inline images are uploaded and URLs updated
• Alt text is preserved
• Images respect your Webflow asset limits

Troubleshooting

API token rejected:

• Regenerate token in Webflow
• Ensure token has not expired
• Check site-level API access is enabled

Fields not mapping:

• Verify CMS collection field types match
• Rich text fields needed for HTML content
• Check required fields are mapped

Disconnecting

To remove the Webflow connection:

1. Go to Settings then Integrations
2. Click Disconnect next to Webflow
3. Optionally revoke the API token in Webflow