# CMS Integrations

Sitefire can push articles directly to your CMS as drafts. Currently supported: **Framer** and **Webflow**.

## Framer

### 1. Get your Project URL
1. Open your project in [Framer](https://framer.com/)
2. Copy the URL from your browser’s address bar — it looks like:

```
https://framer.com/projects/YourSite--aAbBcCdD1234567890xy
```
3. Paste this URL into the **Project URL** field in Sitefire

### 2. Create an API key
1. In your Framer project, click the **Framer** menu (top-left) → **Settings**
2. Scroll to **API** and click **Generate API Key**
3. Copy the key and paste it into the **API Key** field in Sitefire

For step-by-step instructions with screenshots, see the [Framer API key guide](/content/docs/cms/framer/index.html).

### 3. Select a collection
After connecting, Sitefire will show the CMS collections in your Framer project. Select the collection where you want articles to be published (e.g. “Blog Posts”).

### 4. Map your fields
Map each article field (Title, Body, Slug, Excerpt, Date) to the corresponding CMS field. Fields that aren’t mapped will be skipped during push.

---

## Webflow

### 1. Create an API token
1. In the [Webflow Designer](https://webflow.com/dashboard), open your site and go to **Site settings** (Webflow menu → Site settings) → **Apps & Integrations** → **API access**
2. Click **Generate API token**
3. Give the token a name (e.g. `Sitefire`) and set these permissions:

| Permission           | Level         | Purpose                                            |
|----------------------|---------------|---------------------------------------------------|
| Assets               | Read and write| Upload hero/OG images                              |
| Authorized User      | Read-only     | Token verification                                 |
| CMS                  | Read and write| Push blog posts as drafts, upsert by slug        |
| Components           | Read-only     | Verify layout compatibility                         |
| Pages                | Read and write| Set meta titles, descriptions, OG tags             |
| Sites                | Read-only     | List sites in workspace, read site info           |

All other permissions can stay at **No access**.

4. Copy the token and paste it into the **API Key** field in Sitefire

For step-by-step instructions with screenshots, see the [Webflow API token guide](/content/docs/cms/webflow/index.html).

### 2. Select a site
If your workspace has multiple sites, Sitefire will ask you to pick one. If you only have one site, it’s selected automatically.

### 3. Select a collection
Choose the CMS collection where articles will be published. Sitefire shows all collections from your selected site.

### 4. Map your fields
Map each article field to the corresponding Webflow CMS field. Sitefire auto-detects common field names (like “Post Body” → Body, “Name” → Title), but you can adjust the mapping.

**Supported field types:**
- **PlainText** — used for Title, Slug, Excerpt
- **RichText** — used for Body (markdown is converted to HTML automatically)
- **Date** — used for publish date

---

## Pushing articles

Once connected, each completed article shows a **Push to [CMS]** button. Articles are always pushed as **drafts** — you can review and publish them in your CMS editor.

If an article with the same slug already exists in your CMS, Sitefire updates it instead of creating a duplicate.

### Tables in Webflow
Webflow’s rich text fields don’t support HTML tables. When your article contains tables, Sitefire converts them to a copyable HTML snippet inside a blockquote. To display the table on your site:
1. Push the article to Webflow
2. Open it in the Webflow Designer
3. Find the blockquote containing the table HTML
4. Replace it with a **Custom Code** embed block
5. Paste the HTML into the embed block