Ce este Webflow API și de ce ar trebui să-ți pese
Webflow API îți oferă control complet asupra conținutului din CMS fără să deschizi editorul vizual. Nu mai stai să adaugi manual 50 de produse, să actualizezi stocuri sau să modifici prețuri unul câte unul.
Dacă ai un magazin online cu sute de articole sau un blog cu zeci de colaboratori, manualul nu mai e o opțiune. Automatizarea CMS devine necesitate, nu lux.
Acest ghid te învață exact cum să folosești Webflow API pentru a crea, citi, actualiza și șterge conținut programatic. Fără teorie inutilă — doar ce ai nevoie ca să implementezi azi.
API-ul REST vs. API-ul GraphQL
Webflow oferă două tipuri de API. REST API-ul clasic funcționează cu endpoint-uri specifice pentru fiecare operațiune. GraphQL API-ul este mai flexibil, permițându-ți să ceri exact datele de care ai nevoie într-o singură cerere.
Pentru majoritatea proiectelor, REST API-ul este suficient și mai ușor de înțeles dacă ești la început. Vom folosi REST în exemplele de mai jos.
Configurarea accesului la Webflow API
Înainte de orice cod, ai nevoie de un token de acces. Fără el, nicio cerere nu va funcționa.
Pasul 1: Intră în dashboard-ul Webflow și selectează proiectul. Pasul 2: Mergi la Settings → Integrations → API Access. Pasul 3: Generează un nou API token. Copiază-l imediat — nu vei mai putea vedea ulterior.
Permisiunile token-ului
Token-ul vine cu anumite drepturi. Poți să citești conținut (read-only) sau să ai acces complet (read-write). Pentru automatizare CMS, ai nevoie de read-write. Fii atent unde stochezi token-ul — nu-l pune niciodată în cod sursă publică.
La Lazart Studios, folosim variabile de mediu pentru a gestiona secretele API. Astfel, token-ul nu ajunge niciodată pe GitHub sau în fișiere accesibile publicului.
Prima cerere API: Listează toate colecțiile
Să începem cu ceva simplu — să vedem ce colecții ai în CMS. Iată cererea folosind Node.js:
const axios = require('axios');
const WEBFLOW_TOKEN = process.env.WEBFLOW_API_TOKEN;
const SITE_ID = 'id-ul-site-ului-tau';
async function getCollections() {
const response = await axios.get(
`https://api.webflow.com/sites/${SITE_ID}/collections`,
{
headers: {
'Authorization': `Bearer ${WEBFLOW_TOKEN}`,
'accept-version': '1.0.0'
}
}
);
return response.data;
}Răspunsul conține un array cu toate colecțiile, fiecare având un ID unic. Acest ID îl vei folosi în toate operațiunile următoare.
Crearea automată de item-uri în CMS
Aici devine interesant. Să zicem că ai un CSV cu 200 de produse și vrei să le încarci pe toate în Webflow CMS.
Structura unui item nou
Fiecare item are câmpuri obligatorii și opționale. Pentru o colecție de blog posts, ai nevoie de: name (titlul), slug (URL-ul), și câmpurile custom definite de tine.
async function createItem(collectionId, itemData) {
const response = await axios.post(
`https://api.webflow.com/collections/${collectionId}/items`,
{
fields: {
name: itemData.title,
slug: itemData.slug,
_archived: false,
_draft: false,
'post-body': itemData.content,
'post-summary': itemData.excerpt,
'post-date': itemData.date
}
},
{
headers: {
'Authorization': `Bearer ${WEBFLOW_TOKEN}`,
'Content-Type': 'application/json',
'accept-version': '1.0.0'
}
}
);
return response.data;
}Notă importantă: item-urile create prin API rămân în draft. Trebuie să le publici separat dacă vrei să fie vizibile pe site.
Procesarea în loturi
Webflow API are rate limiting — nu poți trimite sute de cereri simultan. Limitele curente sunt de 60 de cereri pe minut pentru planul gratuit și 120 pentru planurile plătite.
Soluția: procesează item-urile în loturi mici cu pauză între ele. Un delay de 1-2 secunde între cereri funcționează de obicei. Pentru volume mari, ia în considerare planul Enterprise cu limite mai ridicate.
Actualizarea conținutului existent
Stocurile se schimbă, prețurile se ajustează, descrierile se îmbunătățesc. Update-ul manual devine o corvoadă rapid.
Identificarea item-ului după câmp custom
Dacă ai un SKU sau ID extern, poți căuta item-ul după acel câmp și apoi îl actualizezi. Iată un exemplu complet:
async function updateProductBySKU(collectionId, sku, updates) {
// Primul pas: caută item-ul după SKU
const items = await axios.get(
`https://api.webflow.com/collections/${collectionId}/items`,
{ headers: { 'Authorization': `Bearer ${WEBFLOW_TOKEN}` } }
);
const item = items.data.items.find(i => i.fields.sku === sku);
if (!item) throw new Error(`Product with SKU ${sku} not found`);
// Al doilea pas: actualizează
const response = await axios.put(
`https://api.webflow.com/collections/${collectionId}/items/${item._id}`,
{ fields: updates },
{ headers: { 'Authorization': `Bearer ${WEBFLOW_TOKEN}` } }
);
return response.data;
}Publicarea modificărilor
Toate schimbările făcute prin API rămân în CMS până le publici. Poți publica tot site-ul sau doar item-uri specifice.
async function publishSite() {
await axios.post(
`https://api.webflow.com/sites/${SITE_ID}/publish`,
{ domains: ['domeniultau.ro'] },
{ headers: { 'Authorization': `Bearer ${WEBFLOW_TOKEN}` } }
);
}Pentru site-uri cu trafic mare, publicarea o dată pe zi e suficientă. Pentru magazine cu stocuri care se schimbă frecvent, poți programa publicarea la fiecare oră.
Greșeli frecvente și cum le eviți
După zeci de implementări, am identificat pattern-urile care cauzează cele mai multe probleme.
Slug-uri duplicate
Webflow nu permite slug-uri identice în aceeași colecție. Dacă încerci să creezi un item cu slug existent, primești eroare 409. Soluția: verifică unicitatea înainte sau adaugă un sufix numeric automat.
Tipuri de date incorecte
Câmpurile de tip number trebuie să fie numere, nu stringuri. Datele trebuie în format ISO 8601. Referințele către alte colecții trebuie să fie array-uri de ID-uri.
Depășirea limitelor API
Dacă primești eroare 429 (Too Many Requests), înseamnă că ai depășit rate limit-ul. Implementează exponential backoff — după fiecare eșec, așteaptă din ce în ce mai mult înainte de retry.
Integrarea cu n8n pentru automatizare fără cod
Pentru cei care nu vor să scrie cod, n8n oferă o alternativă vizuală. Poți crea workflow-uri care preiau date dintr-un Google Sheet, le transformă și le trimit în Webflow CMS.
Un workflow tipic arată așa: trigger (schedule la fiecare 6 ore) → preia date din sursa externă → compară cu datele existente → creează sau actualizează item-uri → publică site-ul.
La Lazart Studios am implementat acest tip de automatizare pentru mai mulți clienți cu magazine online. Unul dintre ei a redus timpul de actualizare a produselor de la 8 ore pe săptămână la 15 minute automatizate.
Când Webflow API nu e suficient
API-ul are limitări. Nu poți crea colecții noi, doar item-uri în colecții existente. Nu poți modifica structura CMS-ului. Nu poți accesa anumite funcții avansate de e-commerce.
Pentru proiecte complexe cu nevoi de automatizare avansată, soluția e să combini Webflow API cu un backend custom. API-ul gestionează conținutul, iar backend-ul tău adaugă logica de business lipsă.
Securitate și bune practici
Nu subestima securitatea când lucrezi cu API-uri. Un token compromis poate șterge tot conținutul site-ului tău.
Reguli de aur: nu stoca token-ul în cod sursă, folosește HTTPS pentru toate cererile, validează datele înainte de a le trimite, implementează logging pentru a urmări ce s-a întâmplat în caz de probleme, și revizuiește periodic permisiunile token-urilor active.
Dacă lucrezi cu o echipă, fiecare membru ar trebui să aibă token-ul propriu. Astfel, poți revoca accesul individual fără să afectezi pe ceilalți.
Concluzie: De la manual la automat
Webflow API transformă un proces manual, repetitiv și predispus la erori în ceva automat, rapid și fiabil. Nu trebuie să fii programator experimentat — cu exemplele de mai sus poți începe să automatizezi chiar azi.
Începe cu ceva simplu: un script care exportă datele din CMS într-un CSV backup. Apoi trece la import automat. Apoi la sincronizare cu sistemul tău de inventar. Fiecare pas îți economisește ore întregi de muncă manuală.
Dacă ai nevoie de ajutor cu implementarea Webflow API sau cu automatizări CMS mai complexe, echipa Lazart Studios te poate ajuta. Avem experiență cu integrări API pentru magazine online, site-uri de conținut și platforme SaaS.
