Веб-редактор часто оказывается тесен, а контент-менеджеры просят «чтобы данные из 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 запросов в минуту, что в 2 раза быстрее, чем 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 под ваши задачи.