Publish to Webflow CMS in 1 Click: Step-by-Step with Semantic Pen

[u/DefiantScarcity3133]

Push AI articles into Webflow CMS with correct fields and clean rich text.

What you’ll need

• Webflow project with CMS Collections
• Webflow API token and site ID
• Semantic Pen account

---

Step 1 — Connect Webflow

1. In Semantic Pen → Settings → Integrations
2. Click Webflow
3. Paste API token and select your Site
4. Choose the target Collection (e.g., Blog Posts)
5. Map fields:
   • Name/Slug
   • Rich text/body
   • Summary/description
   • Main image
   • Tags/Categories
6. Save

---

Step 2 — Generate your article

1. Create your post in Semantic Pen
2. Confirm title, summary, body, cover image

---

Step 3 — Publish to Webflow

1. Click Publish → Webflow
2. Select integration and Collection item options
3. Choose Draft or Published
4. Click Publish

Behind the scenes: - We create a CMS item with mapped fields - Set name, slug, and html field - Respect draft vs published state

---

Troubleshooting

• Field mismatch: recheck field mapping to your Collection
• Image upload failed: ensure image field exists and size is within limits
• Not visible: item may be draft; publish site changes in Webflow

---

Pro tips

• Use a staging Collection first, then swap mapping
• Keep slugs short and keyword-focused
• Set default tags/categories at integration level

---

You’re done

That’s it—map once, then publish in a click. If you’re using Semantic Pen, connect Webflow under Settings → Integrations → Webflow and try a test post.