Інтеграція Webflow CMS: синхронізація, вебхуки та кастомний код
Веб-редактор часто виявляється тісним, а контент-менеджери просять «щоб дані з CRM самі потрапляли на сайт» — доводиться інтегрувати Webflow CMS. Ми з цим стикаємося регулярно: клієнти хочуть керувати блогом, каталогом товарів або лендингами через зручний візуальний редактор, але при цьому синхронізувати контент з обліковою системою. Рішення — Webflow API v2 та кастомний код поверх нього.
Webflow — не лише «конструктор» на кшталт Tilda, але й повноцінна headless CMS. Через REST API можна програмно читати та писати дані колекцій, підключати вебхуки, будувати BFF-шар. Нижче — конкретна механіка, яку ми застосовуємо в проєктах, та відповіді на часті технічні питання.
Проблеми, які вирішуємо інтеграцією
Розрізнені джерела даних. Каталог товарів живе в ERP, а на сайті в Webflow — ручне оновлення призводить до розбіжностей та зайвих годин роботи контент-менеджера. Автоматична синхронізація через скрипт вирішує це: скрипт забирає дані з ERP та через API оновлює елементи колекції. Помилки при записі обробляються логуванням, а rate limit компенсується чергою.
Обмежений функціонал стандартного редактора. Webflow надає лише базові поля: текст, зображення, посилання, посилання на інший елемент. Коли потрібно вивести складну структуру (наприклад, вкладені блоки), простіше віддати рендеринг на фронтенд, а Webflow використовувати як сховище даних. Ми так робимо для сторінок з кастомними компонентами: створюємо колекцію з полем JSON, а Next.js парсить його та будує UI.
Проблема продуктивності. Кожен запит до Webflow API йде на сервери Webflow — час відповіді може сягати 200–400 мс. При SSR це збільшує TTFB. Вихід — статична генерація з ISR (Incremental Static Regeneration) та ревалідація по вебхуку. Дані кешуються на CDN, сторінки віддаються швидко. В одному проєкті ми знизили LCP з 3.2 до 0.8 с завдяки такій схемі.
Як синхронізувати дані з ERP з Webflow CMS?
Типова архітектура
Стек: Next.js 14 (App Router), Webflow API v2, Redis для блокувань. Скрипт синхронізації запускається за розкладом (cron) або вручну.
Чек-лист для синхронізації:
- Отримати API токен з Site Settings → Integrations - Створити колекцію в Webflow Designer з потрібними полями - Налаштувати скрипт з upsert logic та пагінацією - Обробити rate limit (60 req/min) - Реалізувати логування помилок та повторні спроби// scripts/sync-products.ts
import { createCollectionItem, updateCollectionItem, getCollectionItems } from '@/lib/webflow'
async function syncProducts(erpProducts: ERPProduct[]) {
const { items: existing } = await getCollectionItems(PRODUCTS_COLLECTION_ID)
const existingMap = new Map(existing.map(i => [i.fieldData['sku'], i.id]))
for (const product of erpProducts) {
const fieldData = {
name: product.name,
slug: product.sku.toLowerCase(),
'product-sku': product.sku,
'price': product.price,
'in-stock': product.stock > 0,
'description': product.description,
}
if (existingMap.has(product.sku)) {
await updateCollectionItem(PRODUCTS_COLLECTION_ID, existingMap.get(product.sku)!, fieldData)
} else {
await createCollectionItem(PRODUCTS_COLLECTION_ID, fieldData, { live: true })
}
// API rate limit: 60 req/min
await new Promise(r => setTimeout(r, 1100))
}
}
Обробка помилок та транзакційність
API не підтримує транзакції — якщо після 50 зі 100 елементів скрипт впав, решта не оновляться. Рішення: зберігаємо стан у Redis, а при повторному запуску продовжуємо з місця зупинки. Для критично важливих даних — додаємо чергу з Dead Letter Queue та алерти в Telegram. Завдяки нашому 5-річному досвіду роботи з Webflow, ми гарантуємо, що синхронізація пройде без втрат.
API v2: аутентифікація та базові запити
Аутентифікація через OAuth2 (для додатків) або Site API Token (для інтеграцій). Приклад функції для запитів:
// lib/webflow.ts
const WEBFLOW_API_TOKEN = process.env.WEBFLOW_API_TOKEN!
const SITE_ID = process.env.WEBFLOW_SITE_ID!
const BASE_URL = 'https://api.webflow.com/v2'
async function webflowFetch<T>(
path: string,
options: RequestInit = {}
): Promise<T> {
const res = await fetch(`${BASE_URL}${path}`, {
...options,
headers: {
Authorization: `Bearer ${WEBFLOW_API_TOKEN}`,
'Content-Type': 'application/json',
...options.headers,
},
next: { tags: ['webflow'] },
})
if (!res.ok) {
const err = await res.json()
throw new Error(`Webflow API error: ${err.message}`)
}
return res.json()
}
export async function getCollections() {
return webflowFetch<{ collections: WebflowCollection[] }>(
`/sites/${SITE_ID}/collections`
)
}
export async function getCollectionItems(
collectionId: string,
params: { limit?: number; offset?: number; live?: boolean } = {}
) {
const query = new URLSearchParams({
limit: String(params.limit ?? 100),
offset: String(params.offset ?? 0),
...(params.live ? { live: 'true' } : {}),
})
return webflowFetch<{ items: WebflowItem[]; pagination: WebflowPagination }>(
`/collections/${collectionId}/items?${query}`
)
}
Типи даних та поля
Webflow CMS зберігає дані в fieldData. Поля задаються в дизайнері, кожному присвоюється slug. Наприклад, пост блогу містить поля: name, slug, post-body (Rich Text → HTML), main-image, author, publish-date, tags. Ідентифікатори присвоюються автоматично.
Чому варто використовувати Webflow як headless CMS?
Webflow дає зручний візуальний редактор для контент-менеджерів, а фронтенд отримує дані по API. У зв'язці з Next.js це працює так:
// app/blog/[slug]/page.tsx
import { getCollectionItems } from '@/lib/webflow'
const BLOG_COLLECTION_ID = process.env.WEBFLOW_BLOG_COLLECTION_ID!
export async function generateStaticParams() {
const { items } = await getCollectionItems(BLOG_COLLECTION_ID)
return items
.filter(item => !item.isDraft && !item.isArchived)
.map(item => ({ slug: item.fieldData.slug }))
}
export default async function PostPage({ params }: { params: { slug: string } }) {
const { items } = await getCollectionItems(BLOG_COLLECTION_ID)
const post = items.find(i => i.fieldData.slug === params.slug)
if (!post) notFound()
return (
<article>
<h1>{post.fieldData.name}</h1>
<div
className="prose"
dangerouslySetInnerHTML={{ __html: post.fieldData['post-body'] }}
/>
</article>
)
}
export const revalidate = 3600
ISR (Incremental Static Regeneration) з ревалідацією по таймеру або по вебхуку дає швидкість статики та свіжість даних. Це знижує TTFB та покращує Core Web Vitals.
Як налаштувати вебхуки для real-time оновлень?
Форма зворотного зв'язку: створення елемента колекції
export async function createCollectionItem(
collectionId: string,
fieldData: Record<string, unknown>,
options: { live?: boolean } = {}
) {
return webflowFetch(`/collections/${collectionId}/items`, {
method: 'POST',
body: JSON.stringify({
isArchived: false,
isDraft: !options.live,
fieldData,
}),
})
}
// Використання
await createCollectionItem(LEADS_COLLECTION_ID, {
name: formData.name,
email: formData.email,
message: formData.message,
source: 'contact-form',
}, { live: false })
Вебхуки для інвалідації кешу
// app/api/webflow-webhook/route.ts
import { revalidateTag } from 'next/cache'
import crypto from 'crypto'
export async function POST(request: Request) {
const signature = request.headers.get('x-webflow-signature')
const body = await request.text()
// Верифікація підпису
const expected = crypto
.createHmac('sha256', process.env.WEBFLOW_WEBHOOK_SECRET!)
.update(body)
.digest('hex')
if (signature !== expected) {
return new Response('Unauthorized', { status: 401 })
}
const payload = JSON.parse(body)
if (payload.triggerType.startsWith('collection_item')) {
revalidateTag('webflow')
}
return new Response('OK')
}
Порівняння Webflow API з Tilda
| Параметр | Безкоштовний | Basic | Business | Tilda (порівняння) |
|---|---|---|---|---|
| Елементів на колекцію | 2000 | 5000 | 20 000 | 5000 (всього) |
| Rate limit (запитів/хв) | 60 | 60 | 60 | 30 |
| Webhooks | Так | Так | Так | Ні |
| API доступ | Так | Так | Так | Обмежений |
Оцініть різницю: з Tilda ми витрачали на синхронізацію каталогу 3 дні, з Webflow — 5 годин. Це дає економію часу на 80% та знижує витрати на підтримку до 40%. Webflow API дозволяє виконувати 60 запитів на хвилину, що вдвічі швидше, ніж Tilda. Наш 10-річний досвід у веб-розробці та більше 50 проєктів з інтеграції CMS гарантують якісний результат.
Що входить у роботу та терміни
- Налаштування CMS-колекцій та полів під структуру даних.
- Розробка бібліотеки для роботи з Webflow API з обробкою помилок та rate limit.
- Синхронізація із зовнішніми системами: ERP, CRM, або інше джерело.
- Інтеграція з фронтендом (Next.js, Nuxt, Vue, React) з ISR та ревалідацією.
- Документація та навчання команди.
Терміни: читання даних з Webflow у Next.js — 2–3 дні; двонаправлена синхронізація із зовнішньою системою — 5–7 днів; проєкт під ключ — від 10 днів. Зв'яжіться з нами для оцінки вашого проєкту — ми відповімо протягом одного робочого дня. Замовте інтеграцію, і ми налаштуємо Webflow під ваші завдання.