Webflow Integration
iContentForge seamlessly connects to your Webflow site, allowing you to automatically publish AI-generated articles directly to a specified CMS Collection. This guide walks you through setting up the connection and configuring the field mapping.
Prerequisites
Before you begin, ensure you have:
- An active iContentForge project with articles in the Ready status.
- A Webflow site with at least one CMS Collection set up for blog posts or articles.
- Admin or Owner access to the Webflow site to generate API credentials.
Step 1: Generate a Webflow API Key
iContentForge uses Webflow's V2 API for authentication. You need to generate a unique API key from your Webflow dashboard.
- Log in to your Webflow Dashboard.
- Select the site you want to connect.
- Go to Project Settings > Integrations > API Access.
- In the "API Access" section, click Generate API Key.
- Give the key a descriptive name (e.g., "iContentForge Auto-Publish").
- Select the permissions: You must grant Read and Write access for CMS.
- Click Generate Key and Copy the key immediately. Store it securely, as you will not be able to see it again.
Security Note: Your Webflow API key grants write access to your CMS. Treat it like a password. Never share it publicly or commit it to version control. You can regenerate or revoke it at any time from the same Webflow settings panel.
Step 2: Find Your Collection ID
Next, you need the unique ID of the CMS Collection where articles should be published.
- In your Webflow Designer, open the CMS panel.
- Select the target Collection (e.g., "Blog Posts").
- Look at the URL in your browser's address bar. The Collection ID is the alphanumeric string after
/collection/.https://webflow.com/design/YOUR-SITE-NAME#/cms/YOUR-SITE-ID/collection/COLLECTION-ID - Copy the
COLLECTION-ID.
Webflow Designer URL showing the Collection ID location
Step 3: Connect in iContentForge
With your API Key and Collection ID, you can now set up the connection in iContentForge.
- Navigate to your Project in iContentForge and go to Settings > CMS Integration.
- Select Webflow from the list of CMS providers.
- Enter the required credentials:
- API Key: Paste the Webflow V2 API Key you copied.
- Collection ID: Paste the Collection ID.
- Click Test Connection. A success message confirms iContentForge can communicate with your Webflow CMS.
- Click Save & Configure to proceed to field mapping.
Step 4: Configure Field Mapping
Field mapping tells iContentForge how to match the content it generates to the specific fields in your Webflow CMS Collection. This is a crucial step for proper formatting.
In the Field Mapping configuration page, you will see a list of iContentForge's default article fields on the left and input fields for your Webflow Collection's field names (slugs) on the right.
iContentForge field mapping interface showing Webflow field slugs
Essential Field Mappings
Map these core fields for basic functionality:
| iContentForge Field | Webflow Field Type | Description & Tips |
|---|---|---|
| Title | Plain Text | The article's main headline. Map to your collection's primary title field. |
| Slug | Plain Text | The URL-friendly version of the title. Crucial for SEO. |
| Body (HTML) | Rich Text | The full article content in HTML format. Must be mapped to a Rich Text field. |
SEO & Metadata Fields
For full SEO optimization, map these additional fields if your collection has them:
| iContentForge Field | Webflow Field Type | Purpose |
|---|---|---|
| Excerpt | Plain Text or Rich Text | A short summary for meta descriptions and previews. |
| SEO Title | Plain Text | Custom title tag for search engines. |
| SEO Description | Plain Text | Custom meta description for search engines. |
| Featured Image URL | Image or Plain Text | URL of the article's main image. Webflow will upload it from this URL. |
| Tags | Multi-Reference | Connect to a separate "Tags" collection for taxonomy. |
Pro Tip: Before mapping, create all necessary fields in your Webflow CMS Collection. Use the exact field names (slugs) as they appear in Webflow's field settings. For reference fields (like Author or Tags), you need the ID of the specific item to link to. iContentForge can use a static ID you provide in the mapping settings.
How Publishing Works
Once connected and mapped:
- Articles in the Ready status will be published according to your project's Drip Feed schedule (approximately every 5 minutes).
- iContentForge sends the article data to the Webflow API, creating a new item in your mapped Collection.
- The article status in iContentForge will change from Ready to Published.
- The new item will be in Draft mode within your Webflow CMS. You can review it, add final touches (like a custom thumbnail), and publish it to your live site when ready.
Note: iContentForge pushes content to the Webflow CMS as draft items. You must log into Webflow to publish them to your live site. This provides a final quality control checkpoint.
Troubleshooting
- "Invalid API Key" Error: Regenerate your API key in Webflow and update it in iContentForge. Ensure you selected CMS Read/Write permissions.
- "Collection Not Found" Error: Verify the Collection ID is correct. The ID is case-sensitive.
- HTML Formatting Issues: Ensure the Body field is mapped to a Webflow Rich Text field, not a Plain Text field.
- Images Not Appearing: The
Featured Image URLmust be a publicly accessible, direct image link (ending in .jpg, .png, etc.).
Next Steps
- Learn how to automate your publishing schedule with Drip Feed.
- Understand the complete Article Generation Workflow.
- Explore other available CMS Integrations.