Konwebflow → Webflow Technical Deep Dive

Output

Konwebflow → Webflow Connection

Technical architecture for publishing to konnect.homes

1. Authentication

Uses the official webflow-api npm package with bearer token authentication.

// Environment variables
WEBFLOW_TOKEN_HOMES=54bb136c...97c69
WEBFLOW_SITE_HOMES=6440a81c71df48692b588c84
WEBFLOW_COLLECTION_RESIDENTIAL=6441ec3a069d53c28b2f6be9

// Client creation
const client = new WebflowClient({ accessToken: token });

2. Site Selection Logic

Based on listing type, konwebflow routes to the correct site:

residential	→ konnect.homes (tokenHomes, siteHomes, collectionResidential)
rental	→ konnect.rentals (tokenRentals, siteRentals, collectionRental)

3. Data Transformation Pipeline

PropertyMe XML → Webflow CMS field format

Address	Parsed from XML, formatted for name field + slug generation
Status	current→sale, underOffer→underoffer, sold→sold (homes)
Images	L/M/S URLs from konimage → image-1 through image-10
Suburb	Fuzzy matched via kondata, auto-creates if missing
Agent	Fuzzy matched to team collection via kondata
Features	Boolean flags → multi-reference IDs (indoor/outdoor/eco)
Geocode	Google Maps API → lat/lng for map pins

4. Webflow API Calls

Upsert pattern (find → update or create)

// 1. Find existing by pme-uniqueid
client.collections.items.listItems(collectionId)

// 2a. Update if exists
client.collections.items.updateItem(collectionId, itemId, {
  fieldData: webflowData,
  isArchived: false,
  isDraft: false
})

// 2b. Create if new
client.collections.items.createItem(collectionId, {
  fieldData: webflowData
})

// 3. Publish site (batched)
client.sites.publish(siteId, { domains: [domainId] })

Key Files

webflow-client.ts	Main API integration (createWebflowClient, processListing)
config.ts	Loads tokens and IDs from .env
.env	Bearer tokens, site/collection/domain IDs

Quick Actions

Original Request

No layout configured

Details

Type General

Status Completed

Created 1 Jan 2026, 10:55 pm

Updated 2 Jan 2026, 3:10 pm

Created By claude

Raw Data

{
  "id": "3c637ce1-9120-48c8-bfa7-e3738a787a94",
  "type": "general",
  "status": "completed",
  "title": "Konwebflow → Webflow Technical Deep Dive",
  "description": "How konwebflow connects to konnect.homes via Webflow API",
  "context": {
    "output": "<div style=\"background:#1e1e1e;color:#e0e0e0;padding:20px;border-radius:8px;font-family:sans-serif;\">\n<h2 style=\"color:#fff;margin:0 0 8px 0;\">Konwebflow → Webflow Connection</h2>\n<p style=\"color:#7f848e;margin:0 0 20px 0;\">Technical architecture for publishing to konnect.homes</p>\n\n<div style=\"background:#2d2d2d;padding:16px;border-radius:6px;margin-bottom:16px;\">\n<h3 style=\"color:#61afef;margin:0 0 12px 0;font-size:1rem;\">1. Authentication</h3>\n<p style=\"color:#e0e0e0;margin:0 0 12px 0;line-height:1.6;\">Uses the official <code style=\"background:#1a1a1a;padding:2px 6px;border-radius:3px;\">webflow-api</code> npm package with bearer token authentication.</p>\n<pre style=\"background:#1a1a1a;padding:12px;border-radius:4px;font-family:monospace;font-size:0.85rem;overflow-x:auto;margin:0;\"><span style=\"color:#7f848e;\">// Environment variables</span>\n<span style=\"color:#e5c07b;\">WEBFLOW_TOKEN_HOMES</span>=<span style=\"color:#98c379;\">54bb136c...97c69</span>\n<span style=\"color:#e5c07b;\">WEBFLOW_SITE_HOMES</span>=<span style=\"color:#98c379;\">6440a81c71df48692b588c84</span>\n<span style=\"color:#e5c07b;\">WEBFLOW_COLLECTION_RESIDENTIAL</span>=<span style=\"color:#98c379;\">6441ec3a069d53c28b2f6be9</span>\n\n<span style=\"color:#7f848e;\">// Client creation</span>\n<span style=\"color:#c678dd;\">const</span> <span style=\"color:#e06c75;\">client</span> = <span style=\"color:#c678dd;\">new</span> <span style=\"color:#e5c07b;\">WebflowClient</span>({ <span style=\"color:#e06c75;\">accessToken</span>: token });</pre>\n</div>\n\n<div style=\"background:#2d2d2d;padding:16px;border-radius:6px;margin-bottom:16px;\">\n<h3 style=\"color:#98c379;margin:0 0 12px 0;font-size:1rem;\">2. Site Selection Logic</h3>\n<p style=\"color:#e0e0e0;margin:0 0 12px 0;line-height:1.6;\">Based on listing type, konwebflow routes to the correct site:</p>\n<table style=\"width:100%;border-collapse:collapse;font-size:0.9rem;font-family:monospace;\">\n<tr style=\"border-bottom:1px solid #444;\">\n<td style=\"padding:8px 0;color:#c678dd;\">residential</td>\n<td style=\"padding:8px 0;color:#e0e0e0;\">→ konnect.homes (tokenHomes, siteHomes, collectionResidential)</td>\n</tr>\n<tr>\n<td style=\"padding:8px 0;color:#c678dd;\">rental</td>\n<td style=\"padding:8px 0;color:#e0e0e0;\">→ konnect.rentals (tokenRentals, siteRentals, collectionRental)</td>\n</tr>\n</table>\n</div>\n\n<div style=\"background:#2d2d2d;padding:16px;border-radius:6px;margin-bottom:16px;\">\n<h3 style=\"color:#e5c07b;margin:0 0 12px 0;font-size:1rem;\">3. Data Transformation Pipeline</h3>\n<p style=\"color:#7f848e;margin:0 0 12px 0;\">PropertyMe XML → Webflow CMS field format</p>\n<table style=\"width:100%;border-collapse:collapse;font-size:0.85rem;\">\n<tr style=\"border-bottom:1px solid #444;\">\n<td style=\"padding:6px 0;color:#61afef;width:140px;\">Address</td>\n<td style=\"color:#e0e0e0;\">Parsed from XML, formatted for name field + slug generation</td>\n</tr>\n<tr style=\"border-bottom:1px solid #444;\">\n<td style=\"padding:6px 0;color:#61afef;\">Status</td>\n<td style=\"color:#e0e0e0;\">current→sale, underOffer→underoffer, sold→sold (homes)</td>\n</tr>\n<tr style=\"border-bottom:1px solid #444;\">\n<td style=\"padding:6px 0;color:#61afef;\">Images</td>\n<td style=\"color:#e0e0e0;\">L/M/S URLs from konimage → image-1 through image-10</td>\n</tr>\n<tr style=\"border-bottom:1px solid #444;\">\n<td style=\"padding:6px 0;color:#61afef;\">Suburb</td>\n<td style=\"color:#e0e0e0;\">Fuzzy matched via kondata, auto-creates if missing</td>\n</tr>\n<tr style=\"border-bottom:1px solid #444;\">\n<td style=\"padding:6px 0;color:#61afef;\">Agent</td>\n<td style=\"color:#e0e0e0;\">Fuzzy matched to team collection via kondata</td>\n</tr>\n<tr style=\"border-bottom:1px solid #444;\">\n<td style=\"padding:6px 0;color:#61afef;\">Features</td>\n<td style=\"color:#e0e0e0;\">Boolean flags → multi-reference IDs (indoor/outdoor/eco)</td>\n</tr>\n<tr>\n<td style=\"padding:6px 0;color:#61afef;\">Geocode</td>\n<td style=\"color:#e0e0e0;\">Google Maps API → lat/lng for map pins</td>\n</tr>\n</table>\n</div>\n\n<div style=\"background:#2d2d2d;padding:16px;border-radius:6px;margin-bottom:16px;\">\n<h3 style=\"color:#c678dd;margin:0 0 12px 0;font-size:1rem;\">4. Webflow API Calls</h3>\n<p style=\"color:#7f848e;margin:0 0 12px 0;\">Upsert pattern (find → update or create)</p>\n<pre style=\"background:#1a1a1a;padding:12px;border-radius:4px;font-family:monospace;font-size:0.85rem;overflow-x:auto;margin:0;\"><span style=\"color:#7f848e;\">// 1. Find existing by pme-uniqueid</span>\n<span style=\"color:#e06c75;\">client</span>.<span style=\"color:#61afef;\">collections</span>.<span style=\"color:#61afef;\">items</span>.<span style=\"color:#61afef;\">listItems</span>(<span style=\"color:#e06c75;\">collectionId</span>)\n\n<span style=\"color:#7f848e;\">// 2a. Update if exists</span>\n<span style=\"color:#e06c75;\">client</span>.<span style=\"color:#61afef;\">collections</span>.<span style=\"color:#61afef;\">items</span>.<span style=\"color:#61afef;\">updateItem</span>(<span style=\"color:#e06c75;\">collectionId</span>, <span style=\"color:#e06c75;\">itemId</span>, {\n  <span style=\"color:#e06c75;\">fieldData</span>: <span style=\"color:#e06c75;\">webflowData</span>,\n  <span style=\"color:#e06c75;\">isArchived</span>: <span style=\"color:#d19a66;\">false</span>,\n  <span style=\"color:#e06c75;\">isDraft</span>: <span style=\"color:#d19a66;\">false</span>\n})\n\n<span style=\"color:#7f848e;\">// 2b. Create if new</span>\n<span style=\"color:#e06c75;\">client</span>.<span style=\"color:#61afef;\">collections</span>.<span style=\"color:#61afef;\">items</span>.<span style=\"color:#61afef;\">createItem</span>(<span style=\"color:#e06c75;\">collectionId</span>, {\n  <span style=\"color:#e06c75;\">fieldData</span>: <span style=\"color:#e06c75;\">webflowData</span>\n})\n\n<span style=\"color:#7f848e;\">// 3. Publish site (batched)</span>\n<span style=\"color:#e06c75;\">client</span>.<span style=\"color:#61afef;\">sites</span>.<span style=\"color:#61afef;\">publish</span>(<span style=\"color:#e06c75;\">siteId</span>, { <span style=\"color:#e06c75;\">domains</span>: [<span style=\"color:#e06c75;\">domainId</span>] })</pre>\n</div>\n\n<div style=\"background:#2d2d2d;padding:16px;border-radius:6px;border-left:4px solid #22c55e;\">\n<h3 style=\"color:#22c55e;margin:0 0 8px 0;font-size:1rem;\">Key Files</h3>\n<table style=\"width:100%;border-collapse:collapse;font-size:0.85rem;font-family:monospace;\">\n<tr style=\"border-bottom:1px solid #444;\">\n<td style=\"padding:6px 0;color:#e5c07b;\">webflow-client.ts</td>\n<td style=\"color:#7f848e;\">Main API integration (createWebflowClient, processListing)</td>\n</tr>\n<tr style=\"border-bottom:1px solid #444;\">\n<td style=\"padding:6px 0;color:#e5c07b;\">config.ts</td>\n<td style=\"color:#7f848e;\">Loads tokens and IDs from .env</td>\n</tr>\n<tr>\n<td style=\"padding:6px 0;color:#e5c07b;\">.env</td>\n<td style=\"color:#7f848e;\">Bearer tokens, site/collection/domain IDs</td>\n</tr>\n</table>\n</div>\n</div>",
    "requestedAt": "2026-01-01T12:45:00.000Z",
    "requestId": "36763fb4-96a3-45ee-b102-c4a3e5d35fdf"
  },
  "createdBy": "claude",
  "createdAt": "2026-01-01T12:55:01.284Z",
  "updatedAt": "2026-01-02T05:10:54.070Z",
  "requestId": "36763fb4-96a3-45ee-b102-c4a3e5d35fdf"
}