Webflow Integration with SmythOS

Want to automate your website's content management? Connect your Webflow site to SmythOS and empower your agents to create, update, and manage your CMS collections programmatically.

TL;DR

Securely link your Webflow account to SmythOS using an API Token. Then, use our suite of components to automate your entire content pipeline, from creating new blog posts in a collection to updating page metadata for SEO.

List of Webflow Components

Quickly compare Webflow components by what they do and their key I/O. Click any component name to jump directly to its detailed guide.

Component	Action	What it Does	Inputs	Key Outputs	Use Case
Create Collection Item	Write	Adds a new item to a CMS collection.	required collection_id, Body	id	Automatically creating a new blog post from a draft.
Update Collection Item	Write	Updates the fields of an existing collection item.	required collection_id, item_id, Body	id	Syncing product information from an external source.
Delete Collection Item	Write	Permanently deletes an item from a collection.	required collection_id, item_id	Response	Removing an event post after the event has passed.
Publish Item	Write	Publishes one or more collection items to your live site.	required collection_id, itemIds	publishedItemIds	Pushing staged content live after approval.
List Collection Items	Read	Retrieves a list of all items within a collection.	required collection_id optional limit	items	Getting all blog posts to display on a custom dashboard.
Get Collection Item	Read	Retrieves the details of a single collection item.	required collection_id, item_id	fieldData	Fetching the content of a specific blog post for analysis.
List Collections	Read	Retrieves a list of all CMS collections for a site.	required site_id	collections	Finding the ID of your "Blog Posts" collection.
Update Page Metadata	Write	Updates the SEO and Open Graph settings for a static page.	required page_id, Body	title, seo	Programmatically optimizing page titles and descriptions.
List Sites	Read	Retrieves a list of all sites in your Webflow account.	required trigger	sites	The first step to find your site_id.

INFO

Why Integrate Webflow with Your Agent?

Webflow's CMS is powerful and flexible. Integrating it with SmythOS allows you to build sophisticated content automation systems that save time and eliminate manual data entry.

• Automated Content Pipelines: Create agents that take content from a Google Sheet, Notion, or an AI model and automatically create new CMS items in your Webflow collections, such as blog posts, job listings, or portfolio pieces.
• Real-Time Data Synchronization: Keep your Webflow site in sync with external data sources. An agent can update product information, team member profiles, or pricing tables on your site whenever the source data changes.
• Programmatic SEO: Build agents that analyze your pages, generate optimized meta descriptions with an LLM, and then use the Update Page Metadata component to push those changes live.
• Content Management from Anywhere: Trigger content updates from other applications. For example, an agent could listen for a message in a Slack channel to update a "Team Members" page or publish a new blog post.

Prerequisites

Before you begin, please ensure you have the following:

• An active SmythOS account. (Sign up here).
• A Webflow account with an active site.
• A Webflow API Token.

Getting Started With Webflow

The connection between SmythOS and Webflow is configured using a secure API Token.

Step 1: Get Your Webflow API Token

1. Log in to your Webflow account.
2. Click on your workspace, then select Site Settings for the site you want to connect to.
3. Go to the Integrations tab.
4. Scroll down to the API Access section and click the Generate API Token button.
5. Copy the generated token immediately. It will not be shown again.

Step 2: Store Your API Token in SmythOS Vault

Your API Token is a sensitive credential. Use the SmythOS Vault to store it securely.

1. In your SmythOS dashboard, navigate to the Vault.
2. Create a new secret and paste your Webflow API Token as the value. Give it a memorable name, like webflow_api_token.
3. For more details, see the Vault Documentation.

Step 3: Configure a Webflow Component

1. In your SmythOS agent graph, drag and drop any Webflow component.
2. Click the component to open its Settings panel.
3. In the API Token field, select the secret you saved in the Vault (e.g., webflow_api_token).
4. Your connection is now configured for that component.

Heads-up

You must add the API Token from the Vault to each Webflow component you use. This ensures all your API calls are properly authenticated.

Which Webflow Component Should I Use?

If you need to…	Target	Use this Component	Why this one?
Add a new blog post to your CMS	A collection_id	Create Collection Item	The standard method for creating new content within a Webflow CMS Collection.
Update the text of an existing blog post	An item_id	Update Collection Item	Use this to modify the fields of an item that already exists.
Push a staged item live	One or more itemIds	Publish Item	This is the crucial step to make your CMS items visible on your live website.
Get all items from your "Team Members" collection	A collection_id	List Collection Items	Retrieves multiple items at once, perfect for populating lists.
Delete an outdated job posting	An item_id	Delete Collection Item	Permanently removes an item from your CMS.
Find the ID for your "Blog" collection	A site_id	List Collections	The necessary first step to find the collection_id you need for other operations.

Component Details

This section provides detailed information for each Webflow component.

Create Collection Item

Creates a new item within a specified CMS Collection.

INFO

This component requires an API Token for authentication, as detailed in the Getting Started section.

Component-Specific Settings

• Body: A JSON editor where you define the fieldData for the new item. The keys must match the "slugs" of your collection fields in Webflow.

Inputs

Field	Type	Required	Notes
collection_id	string	Yes	The unique ID of the collection where the item will be created.

Outputs

Field	Type	Description
id	string	The unique ID of the newly created collection item.
Response	object	The full, raw JSON response from the Webflow API.

Use Case

An agent takes form submissions for new job postings and uses this component to automatically create a new item in the "Careers" collection on the Webflow site.

{
  "component": "webflow.createCollectionItem",
  "collection_id": "62e3c8f3b4bC1a4e19293a5c",
  "Body": {
    "fieldData": {
      "name": "My Awesome New Blog Post",
      "post-body": "<p>This is the content of my post.</p>",
      "slug": "my-awesome-new-blog-post"
    }
  }
}

Body Schema and Publishing

The fieldData keys must match your collection's field slugs exactly. This component creates the item in a staged state; you must use the Publish Item component to make it live.

Update Collection Item

Updates the fields of an existing item in a CMS Collection.

INFO

This component requires an API Token for authentication, as detailed in the Getting Started section.

Component-Specific Settings

• Body: A JSON editor where you define the fieldData to be updated.

Inputs

Field	Type	Required	Notes
collection_id	string	Yes	The ID of the collection containing the item.
item_id	string	Yes	The unique ID of the item to update.

Outputs

Field	Type	Description
id	string	The ID of the updated item.
Response	object	The full, raw JSON response from the Webflow API.

Use Case

An agent syncs product prices from an external database to the Webflow "Products" collection, using this component to update the "price" field for each item.

Publish Item

Publishes one or more collection items, making them visible on your live website.

INFO

This component requires an API Token for authentication, as detailed in the Getting Started section.

Inputs

Field	Type	Required	Notes
collection_id	string	Yes	The ID of the collection containing the items.
itemIds	string	Yes	A comma-separated list of the item IDs to publish.

Outputs

Field	Type	Description
publishedItemIds	array	A list of the item IDs that were successfully published.
errors	array	A list of any errors that occurred during the process.
Response	object	The raw JSON response from the Webflow API.

Use Case

After an agent creates a new blog post with Create Collection Item, it immediately calls this component with the new item_id to publish it.

List & Get Components

Includes List Sites, Get Site, List Collections, Get Collection Details, List Pages, Get Page Metadata, List Collection Items, and Get Collection Item. These components are used to retrieve information from your Webflow account.

INFO

These components require an API Token for authentication, as detailed in the Getting Started section.

Common Inputs

Field	Type	Required	Notes
site_id	string	Varies	The ID of the site to query.
collection_id	string	Varies	The ID of the collection to query.
item_id	string	Varies	The ID of the specific item to retrieve.
page_id	string	Varies	The ID of the page to query.

Outputs

Field	Type	Description
sites/collections/pages/items	array	An array of the requested resources.
fieldData	object	(Get Item) The specific fields of a single collection item.

Use Case: Finding a Collection ID

To create a new blog post, you need the ID for your "Blog Posts" collection. First, use List Sites to get your site_id. Then, pass that site_id to List Collections to find the correct collection and its collection_id.

Best Practices & Advanced Tips

• Secure Your API Key: Always store your Webflow API key in the SmythOS Vault.
• Master the CMS Workflow: The standard automated workflow is: 1. Create Collection Item (or Update Collection Item). 2. Publish Item. You must explicitly publish items to make them live.
• Understand the Body Schema: When creating or updating items, the fieldData object in the Body is critical. The keys must be the "slugs" of your collection fields (which you can find in the Webflow Designer). Refer to the Webflow API documentation for the correct data structure for different field types (Plain Text, Rich Text, Images, etc.).
• Start with List Components: When starting a new workflow, it's often easiest to begin with List Sites and List Collections to programmatically find the IDs you need, rather than hardcoding them.

Troubleshooting Common Issues

• Error: 401 Unauthorized

  • Cause: The API Token is incorrect, has been revoked, or does not have the necessary permissions.
  • Solution: Verify the API Token in your SmythOS Vault is correct. In your Webflow settings, check that the key is active and has the required scopes (e.g., cms:write).

• Error: 404 Not Found

  • Cause: An incorrect site_id, collection_id, or item_id was provided.
  • Solution: Double-check all IDs for typos. Use the List components to verify that the resource you are trying to access exists.

• Error: 400 Bad Request / Validation Error

  • Cause: The JSON Body payload for a create/update operation is malformed, missing required fields, or a field key does not match the collection's field slug.
  • Solution: Carefully validate your fieldData object. Ensure every key matches a field slug in your Webflow collection and that the value is in the correct format for that field type.

• Items are Created but Not Visible on the Live Site

  • Cause: You have successfully used Create Collection Item but have not yet used the Publish Item component.
  • Solution: After creating or updating an item, you must call the Publish Item component with the corresponding item_id(s) to push the changes to your live website.

What's Next?

You are now ready to build powerful content management automations with the SmythOS Webflow Integration!

Consider these ideas:

• Build an Agent That...

  • Acts as a headless CMS bridge. It reads product data from a Squarespace or Shopify store and uses the Create/Update Collection Item components to keep a "Products" collection on your Webflow marketing site in sync.
  • Automates a job board. It scrapes new job listings from various career sites, and for each new listing, it creates a new item in a "Job Openings" collection on your Webflow site.
  • Connects to your social media. When you publish a new article to Dev.to, an agent takes the content and creates a corresponding blog post on your main Webflow site.

• Explore Other Integrations:

  • Use an LLM component to generate a blog post, then use Create Collection Item and Publish Item to publish it.
  • When a new item is published, take its URL and share it across your social channels using the Ayrshare Integration.
  • Log every new CMS item created by your agents into a Google Sheet for content auditing and tracking.