Connect Webflow CMS drafts

Webflow publishing creates draft CMS items in the collection you choose. PageOptimized verifies the collection before saving the connector.

Official Webflow references:

• Get collection details: https://developers.webflow.com/data/reference/cms/collections/get
• Create collection items: https://developers.webflow.com/data/reference/cms/collection-items/staged-items/create-item
• List collection items: https://developers.webflow.com/data/reference/cms/collection-items/staged-items/list-items

Before you start

1. Confirm you have access to the Webflow workspace and site.
2. Confirm the site has a CMS collection for blog posts or content pages.
3. Confirm you can create API tokens for the site or workspace.
4. Open PageOptimized in another tab.
5. Go to the project.
6. Open Publishing > Connections.
7. Find the Webflow card.

Step 1: create or copy a Webflow API token

1. Open Webflow.
2. Open the workspace or site settings area where API access is managed.
3. Create a new API token for PageOptimized, or copy an existing token created for this workflow.
4. Give the token CMS read permission.
5. Give the token CMS write permission.
6. Copy the token.
7. Store it somewhere secure until you paste it into PageOptimized.

Step 2: copy the collection ID

1. Open the Webflow CMS collection that should receive drafts.
2. Open the collection settings or API details.
3. Copy the collection ID.
4. If you use the Webflow API, you can also retrieve collection details from the collections endpoint and copy the collection ID from the response.
5. Do not use the site ID as the collection ID.
6. Do not use the collection display name as the collection ID.

Step 3: confirm field slugs

PageOptimized always sends these Webflow fields:

1. name: the CMS item name.
2. slug: the CMS item slug.
3. Your body field slug: the article body.
4. Your excerpt field slug, if you provide one: the meta description or summary.

To find the field slugs:

1. Open the collection settings in Webflow.
2. Open the fields list.
3. Find the rich text field where article body content should go.
4. Copy its field slug, not its display label.
5. Paste that value into Body field slug in PageOptimized.
6. Find the plain text or text area field used for summaries.
7. Copy its field slug.
8. Paste that value into Excerpt field slug if you want excerpts synced.
9. If you do not use an excerpt field, leave Excerpt field slug blank.

Step 4: save in PageOptimized

1. Return to PageOptimized.
2. Paste the API token into API token.
3. Paste the collection ID into Collection ID.
4. Paste the body field slug.
5. Paste the excerpt field slug if you use one.
6. Leave Require approval on if drafts should need approval before Xavier creates them.
7. Click Save Webflow.
8. PageOptimized verifies the collection through the Webflow API.
9. Click Create draft item.
10. Open Webflow CMS.
11. Confirm a draft CMS item appears in the selected collection.

What PageOptimized sends when creating a draft

1. isArchived is false.
2. isDraft is true.
3. fieldData.name is the article title.
4. fieldData.slug is the article slug.
5. fieldData for the body slug is the article content.
6. fieldData for the excerpt slug is the summary if an excerpt slug is configured.

Troubleshooting

1. If Save Webflow fails, confirm the token has CMS read permission.
2. If Create draft item fails, confirm the token has CMS write permission.
3. If Webflow returns a collection error, check that you pasted the collection ID, not the site ID.
4. If Webflow returns a field error, confirm the body and excerpt values are field slugs.
5. If the draft appears in the wrong collection, copy the intended collection ID again.
6. Check the Audit Logs tab in PageOptimized for the exact Webflow response.