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
Site Management
List Sites	Read	Retrieves a list of all sites in your Webflow account.	required trigger	sites	The first step to find your site_id.
Get Site	Read	Retrieves a Webflow site by its site ID.	required site_id	displayName	Verifying site details before performing actions.
Page Management
List Pages	Read	Retrieves a list of all pages for a Webflow site.	required site_id	pages	Getting a sitemap or finding a specific page_id.
Get Page Metadata	Read	Retrieves metadata for a single page.	required page_id	title, seo	Auditing a page's SEO settings.
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.
Collection Management
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.
Get Collection Details	Read	Retrieves comprehensive details of a collection.	required collection_id	displayName	Checking a collection's schema before adding items.
Create Collection	Write	Creates a new collection for a specific site.	required site_id, displayName	id	Setting up a new "Case Studies" section.
Delete Collection	Write	Deletes a collection using its ID.	required collection_id	Response	Removing an old, unused CMS collection.
Create Collection Field	Write	Creates a new custom field in a collection.	required collection_id, type	id	Adding a "Publication Date" field to a blog.
Update Collection Field	Write	Updates a custom field in a collection.	required collection_id, field_id	id	Renaming a collection field.
Delete Collection Field	Write	Deletes a custom field in a collection.	required collection_id, field_id	Response	Removing an unnecessary field from a collection.
Collection Item Management
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.
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.
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.

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 and content	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.

Delete Collection Item

Deletes an item from a specified collection.

INFO

This component requires an API Token for authentication.

Inputs

Field	Type	Required	Notes
collection_id	string	Yes	The unique identifier of the collection.
item_id	string	Yes	The unique identifier of the item to be deleted.

Outputs

Field	Type	Description
Response	object	Contains details about the deleted item.
Headers	object	Includes HTTP headers from the API response.

Use Case

An agent automatically removes an event from a "Upcoming Events" collection after the event date has passed.

Get Collection Item

Retrieves the details of a single item from a collection.

INFO

This component requires an API Token for authentication.

Inputs

Field	Type	Required	Notes
collection_id	string	Yes	The unique identifier of the collection.
item_id	string	Yes	The unique identifier of the item.

Outputs

Field	Type	Description
lastPublished	string	The timestamp of when the item was last published.
lastUpdated	string	The timestamp of when the item was last updated.
fieldData	object	The data fields associated with the collection item.
Response	object	The raw JSON response from the API.

Use Case

Before updating an item, an agent fetches its current fieldData to check existing values.

List Collection Items

Retrieves a list of all items within a specified Webflow collection.

INFO

This component requires an API Token for authentication.

Inputs

Field	Type	Required	Notes
collection_id	string	Yes	The unique identifier of the collection.
limit	integer	Optional	The maximum number of items to retrieve. Default: 100.

Outputs

Field	Type	Description
items	array	An array of item objects within the collection.
Response	object	The raw JSON response from the API, including pagination info.
Headers	object	The HTTP headers from the API response.

Use Case

A reporting agent uses this component to get all items from a "Testimonials" collection to display on a custom dashboard.

Create Collection Item

Creates a new item within a specified CMS Collection.

INFO

This component requires an API Token for authentication.

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 identifier 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.

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.

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.

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 Sites

Retrieves a list of all sites in your Webflow account.

INFO

This component requires an API Token for authentication.

Inputs

Field	Type	Required	Notes
trigger	any	Yes	Any value to trigger the component's execution.

Outputs

Field	Type	Description
sites	array	An array of site objects available in your Webflow account.
Response	object	The raw JSON response from the API.

Use Case

This is an essential first step for many workflows. An agent uses this component to find the correct site_id before performing other actions like listing collections.

Get Site

Retrieves detailed information about a specific Webflow site by its ID.

INFO

This component requires an API Token for authentication.

Inputs

Field	Type	Required	Notes
site_id	string	Yes	The unique identifier of the site you want to retrieve.

Outputs

Field	Type	Description
workspaceId	string	The ID of the workspace the site belongs to.
displayName	string	The display name of the site.
lastPublished	string	The timestamp of when the site was last published.
Response	object	The raw JSON response from the API.

Use Case

An agent verifies the displayName and lastPublished date of a site as part of a monitoring workflow.

List Pages

Retrieves a list of all static pages for a Webflow site.

INFO

This component requires an API Token for authentication.

Inputs

Field	Type	Required	Notes
site_id	string	Yes	The unique identifier of the site to retrieve pages from.

Outputs

Field	Type	Description
pages	array	An array of page objects associated with the site.
Response	object	The raw JSON response from the API.

Use Case

An SEO agent retrieves all pages for a site to loop through them and check their metadata using the Get Page Metadata component.

Get Page Metadata

Retrieves metadata, including SEO and Open Graph settings, for a single page.

INFO

This component requires an API Token for authentication.

Inputs

Field	Type	Required	Notes
page_id	string	Yes	The unique identifier of the page.

Outputs

Field	Type	Description
title	string	The title of the page.
seo	object	An object containing SEO metadata like meta title and description.
openGraph	object	An object containing Open Graph data for social sharing.
Response	object	The raw JSON response from the API.

Use Case

An agent fetches a page's metadata to check if the SEO description is populated before attempting to update it.

Update Page Metadata

Updates page-level metadata, including SEO and Open Graph fields.

INFO

This component requires an API Token for authentication.

Component-Specific Settings

• Body: A JSON editor where you define the seo and/or openGraph objects with their new values.

Inputs

Field	Type	Required	Notes
page_id	string	Yes	The unique identifier of the page to update.

Outputs

Field	Type	Description
title	string	The updated title of the page.
seo	object	The updated SEO metadata object.
Response	object	The raw JSON response from the API.

Use Case

An SEO agent generates an optimized meta description with an LLM and uses this component to update the page's SEO settings directly.

List Collections

Retrieves a list of all CMS collections within a Webflow site.

INFO

This component requires an API Token for authentication.

Inputs

Field	Type	Required	Notes
site_id	string	Yes	The unique identifier of the site.

Outputs

Field	Type	Description
collections	array	An array of collection objects available on the site.
Response	object	The raw JSON response from the API.

Use Case

A content agent uses this component to find the collection_id for the "Blog Posts" collection before creating a new item in it.

Get Collection Details

Retrieves comprehensive details of a collection, including its fields.

INFO

This component requires an API Token for authentication.

Inputs

Field	Type	Required	Notes
collection_id	string	Yes	The unique identifier for the collection.

Outputs

Field	Type	Description
id	string	The unique identifier of the collection.
displayName	string	The display name of the collection.
fields	array	The fields (schema) present in the collection.
Response	object	The raw JSON response from the API.

Use Case

Before creating a new collection item, an agent fetches the collection details to understand its schema and required fields.

Create Collection

Creates a new CMS collection for a specific site.

INFO

This component requires an API Token for authentication.

Inputs

Field	Type	Required	Notes
site_id	string	Yes	The ID of the site where the collection will be created.
displayName	string	Yes	The display name of the collection (e.g., "Team Members").
singularName	string	Yes	The singular name of an item (e.g., "Team Member").
slug	string	Optional	The URL-friendly version of the collection name.

Outputs

Field	Type	Description
id	string	The unique identifier of the new collection.
Response	object	The raw JSON response from the API.

Use Case

An agent sets up a new website section by creating a "Case Studies" collection to house customer success stories.

Delete Collection

Deletes a collection by its ID.

INFO

This component requires an API Token for authentication.

Inputs

Field	Type	Required	Notes
collection_id	string	Yes	The unique ID of the collection to delete.

Outputs

Field	Type	Description
Response	object	The raw JSON response from the API, confirming deletion.

Use Case

A cleanup agent removes an old, temporary "Events 2024" collection at the end of the year.

Irreversible Action

Deleting a collection also deletes all of its items. This cannot be undone.

Create Collection Field

Creates a new custom field within a collection's schema.

INFO

This component requires an API Token for authentication.

Inputs

Field	Type	Required	Notes
collection_id	string	Yes	The ID of the collection to modify.
type	string	Yes	The type of field (e.g., PlainText, RichText, Image).
displayName	string	Yes	The user-friendly name of the field.
helpText	string	Optional	Descriptive text to help editors.

Outputs

Field	Type	Description
id	string	The unique identifier of the created field.
type	string	The type of the created field.
Response	object	The raw JSON response from the API.

Use Case

An agent adds a new "Author Bio" (RichText) field to the "Blog Posts" collection to enhance author pages.

Update Collection Field

Updates a custom field in a collection.

INFO

This component requires an API Token for authentication.

Component-Specific Settings

• Body: A JSON editor to define the properties to update, such as displayName or helpText.

Inputs

Field	Type	Required	Notes
collection_id	string	Yes	The ID of the collection.
field_id	string	Yes	The ID of the field to update.

Outputs

Field	Type	Description
id	string	The ID of the updated field.
displayName	string	The updated display name of the field.
Response	object	The raw JSON response from the API.

Use Case

An agent renames a collection field from "Post Summary" to "SEO Meta Description" for clarity.

Delete Collection Field

Deletes a custom field from a collection.

INFO

This component requires an API Token for authentication.

Inputs

Field	Type	Required	Notes
collection_id	string	Yes	The ID of the collection.
field_id	string	Yes	The ID of the field to delete.

Outputs

Field	Type	Description
Response	object	The raw JSON response from the API, confirming deletion.

Use Case

A cleanup agent removes an old, unused field from a collection schema to simplify the editor interface.

Data Loss

Deleting a field will remove all data stored in that field across all items in the collection. This is irreversible.

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 that 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 JSON syntax. Refer to the official Webflow API documentation for the correct structure for the operation you are performing.

• 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.