Hoe koppel je AirOps aan Webflow CMS?
Als je team content genereert in AirOps en die daarna handmatig naar Webflow kopieert, doet de automatisering maar de helft van het werk. Deze uitleg laat zien hoe de integratie tussen AirOps en Webflow CMS werkt, wat je nodig hebt om hem in te stellen en hoe content uit workflow-outputs automatisch wordt gekoppeld aan de velden in je collecties.
Bijdrage van
SaaS Hackers
Kort antwoord: Je kunt AirOps koppelen aan Webflow CMS via de native Webflow-integratie van AirOps of de actie "Publish to CMS from Grid". Zodra de koppeling actief is, komt AI-gegenereerde content rechtstreeks in je Webflow CMS-collecties terecht, zonder handmatig kopiëren, opmaken of schakelen tussen tools.
AI-gegenereerde content is pas nuttig als ze gepubliceerd wordt. Als je team AirOps-workflows draait en de resultaten daarna handmatig naar Webflow kopieert, creëer je extra gedoe dat het doel van automatisering volledig ondermijnt.
In deze tutorial lees je stap voor stap hoe je AirOps-outputs automatisch naar Webflow CMS-collecties stuurt. Aan het einde heb je een werkende pipeline die AI-gegenereerde content veld voor veld rechtstreeks in je CMS publiceert, zonder dat je de Webflow-editor hoeft aan te raken.
Wat de integratie tussen AirOps en Webflow CMS precies doet
De integratie tussen AirOps en Webflow verbindt je AI-contentworkflows via een API met Webflow CMS-collecties. In plaats van een document te exporteren en voor Webflow opnieuw op te maken, koppelt AirOps zijn outputvelden direct aan de velden van je CMS-collectie en publiceert het items op aanvraag.
Dit betekent:
- Titelvelden worden gekoppeld aan de itemnaam in Webflow
- Rich text-outputs worden gekoppeld aan meerregelige of rich text-velden in je collectie
- Metabeschrijvingen, slugs en tags worden gekoppeld aan hun eigen velden
- De status concept of gepubliceerd stel je in binnen de workflow zelf
Het eigen team van Webflow gebruikte deze integratie met AirOps om contentupdates 5x sneller uit te voeren. Als je een schaalbare publicatieworkflow opzet, helpt het ook om te begrijpen hoe je CMS de organische prestaties beïnvloedt, vooral bij het kiezen van het beste CMS voor SEO.
Wat je nodig hebt voordat je begint
Zorg dat je het volgende klaar hebt voordat je de pipeline bouwt:
- Een actief AirOps-account (elk betaald abonnement bevat CMS-integraties)
- Een Webflow-site met minstens één ingestelde CMS-collectie
- Een Webflow API-token met leesrechten en schrijfrechten voor het CMS
- Een werkende AirOps-workflow die gestructureerde outputs levert (titel, body, meta enzovoort)
Als je AirOps-workflow nog ongestructureerde tekst oplevert, structureer die dan eerst. De integratie werkt veld voor veld, dus je outputs moeten overeenkomen met het schema van je collectie voordat koppelen zin heeft.
Stap 1: Koppel Webflow aan AirOps
- Open AirOps en ga in de zijbalk links naar Integraties
- Kies Webflow in de lijst met integraties
- Klik op Connect en log in met je Webflow-account
- Geef AirOps toestemming om de CMS-collecties van je site te gebruiken
- Selecteer de Webflow-site waarop je wilt publiceren
AirOps gebruikt OAuth voor authenticatie, dus in deze stap hoef je geen API-sleutels handmatig te plakken. Werk je in een teamworkspace, leg de integratie dan vast op workspaceniveau, zodat alle workflows dezelfde Webflow-koppeling gebruiken.
Stap 2: Stel het schema van je Webflow CMS-collectie in
Je Webflow-collectie moet overeenkomen met de outputs van je AirOps-workflow. Open Webflow en vergelijk de velden van je collectie met je AirOps-outputs.
Een standaard blogcollectieschema dat goed werkt met AirOps ziet er zo uit:
| Webflow-veld | Veldtype | AirOps-output |
|---|---|---|
| Naam | Platte tekst | Artikeltitel |
| Body | Rich text | Hoofdtekst van het artikel |
| Metabeschrijving | Platte tekst | SEO-metabeschrijving |
| Slug | Platte tekst | URL-slug |
| Categorie | Verwijzing | Categorietag |
| Gepubliceerd | Schakelaar | Status concept/gepubliceerd |
Ontbreken er velden in je collectie die je AirOps-workflow wel oplevert, voeg ze dan toe in Webflow voordat je verdergaat. Niet-overeenkomende velden zorgen ervoor dat de publicatieactie mislukt of dat content ongemerkt wegvalt.
Stap 3: Bouw of pas je AirOps-workflow aan zodat die gestructureerde velden oplevert
In AirOps moet je workflow benoemde outputs opleveren die overeenkomen met je Webflow-velden. Gebruik je een Grid-workflow (de batchcontenttool van AirOps), dan wordt elke kolom in de grid een veld dat je kunt koppelen.
Structureer je workflow-outputs zo:
- title (platte tekst, korter dan 60 tekens voor SEO)
- body (rich text of HTML, afhankelijk van het veldtype in Webflow)
- meta_description (platte tekst, 140-160 tekens)
- slug (kleine letters, met koppeltekens, zonder spaties)
- status (zet op "draft" tijdens het testen en schakel over naar "published" als alles klaar is)
Voor rich text-velden ondersteunt AirOps HTML-invoer. Accepteert je Webflow rich text-veld HTML, lever je body-output dan aan als HTML in plaats van als platte markdown. Zo blijven de koppenstructuur, vetgedrukte tekst, lijsten en links behouden en haalt Webflow de opmaak niet weg bij het importeren.
Dit is het vaakst voorkomende struikelblok bij setups van AirOps naar Webflow CMS. Body-outputs in platte tekst verliezen alle opmaak zodra ze naar een rich text-veld worden gestuurd.
Stap 4: Voeg de actie "Publish to CMS" toe in AirOps
Hier komt de pipeline samen.
- Klik in je AirOps-workflow op Add Action
- Kies Publish to CMS from Grid (voor batchworkflows) of Webflow CMS Item (voor workflows met één item)
- Kies je gekoppelde Webflow-site in de dropdown
- Selecteer de CMS-collectie waarin je wilt publiceren
- Koppel elk AirOps-outputveld aan het bijbehorende veld van de Webflow-collectie
Op het koppelscherm staan de velden van je Webflow-collectie rechts en de outputs van je AirOps-workflow links. Sleep of selecteer om ze met elkaar te verbinden.
Voor verwijzingsvelden (zoals een categorie- of auteursveld in Webflow) moet je het Webflow-item-ID van die verwijzing doorgeven, niet het tekstlabel. Haal deze ID's op via de Webflow CMS API of zoek ze op in het collectiebeheer van Webflow.
Stap 5: Test met één conceptitem
Test de koppeling met één item met de status concept voordat je een batch publiceert.
- Stel de statusoutput van je workflow in op
"draft" - Draai de workflow voor één rij of één invoer
- Open Webflow CMS en controleer of het conceptitem in je collectie verschijnt
- Controleer elk veld: kijk of de rich text-opmaak intact is, de slug klopt en er geen velden leeg zijn
Veelvoorkomende problemen in deze fase:
- Rich text-veld toont ruwe HTML-tags: je Webflow-veld is ingesteld op platte tekst in plaats van rich text. Pas het veldtype aan in Webflow.
- Item verschijnt, maar de slug is leeg: je slug-output bevat spaties of hoofdletters. Voeg in AirOps een tekstbewerkingsstap toe om de slug op te schonen.
- Verwijzingsveld is leeg: je geeft een label door in plaats van een Webflow-item-ID. Schakel over op koppelen via ID.
Los eventuele veldproblemen op voordat je overgaat op batchpublicatie.
Stap 6: Publiceer in batches vanuit de AirOps Grid
Als je test met één item slaagt, kun je op schaal publiceren met AirOps Grids.
- Open je AirOps Grid met de contentrijen die je wilt publiceren
- Selecteer de rijen die je naar Webflow wilt sturen (of selecteer alles)
- Klik op Publish to CMS
- Bevestig de doelcollectie en de veldkoppeling
- Start de batchactie
AirOps verwerkt elke rij na elkaar en maakt voor elke rij een nieuw CMS-item aan in Webflow. Bij elke rij zie je een statusindicator die aangeeft of het gelukt is. Bij mislukte rijen verschijnt een foutmelding die meestal naar een specifiek probleem met de veldkoppeling wijst.
Bij workflows voor contentupdates (bestaande Webflow-items bijwerken in plaats van nieuwe aanmaken) kan AirOps op item-ID of slug matchen om bij te werken in plaats van te dupliceren. Geef het bestaande Webflow-item-ID door als outputkolom en koppel die aan de updateactie in plaats van aan de aanmaakactie.
Zo ga je om met rich text-opmaak in Webflow
Rich text is het technisch lastigste onderdeel van de pipeline van AirOps naar Webflow CMS, dus het verdient een eigen onderdeel.
Het rich text-veld van Webflow accepteert HTML. AirOps kan HTML opleveren als je dat in je prompt of workflowinstellingen aangeeft. De veiligste aanpak is:
- Stel de body-output van AirOps in je prompt expliciet in op HTML ("Output the article body as valid HTML with proper heading tags, paragraph tags, and list tags")
- Koppel deze output aan een Webflow rich text-veld
- Test of
<h2>,<h3>,<ul>,<ol>,<strong>, en<a>-tags correct worden weergegeven in Webflow
Tabellen en aangepaste code-elementen vragen extra aandacht. Het rich text-veld van Webflow ondersteunt HTML-tabellen niet op dezelfde manier als een gewone HTML-pagina. Bevat je content tabellen, zet ze dan voor het publiceren om naar gestructureerde lijsten, of gebruik in Webflow een custom embed-veld in plaats van het rich text-veld.
Het hele proces automatiseren: van trigger tot gepubliceerd CMS-item
De efficiëntste versie van deze workflow haalt alle handmatige stappen weg. Zo zet je een lus op van trigger tot publicatie:
- Trigger: een nieuwe rij in een Google Sheet, een bijgewerkt Airtable-record of een geplande AirOps-run
- Genereren: AirOps draait de contentworkflow en levert gestructureerde outputs op
- Publiceren: AirOps start automatisch de publicatieactie voor Webflow CMS, zonder handmatige klik
- Melden: AirOps stuurt een melding via Slack of e-mail om te bevestigen dat het item is gepubliceerd
Deze opzet is vooral handig voor workflows voor contentupdates. Je geeft AirOps een lijst met bestaande Webflow CMS-item-ID's en de huidige content, de workflow herschrijft of actualiseert die, en de output gaat direct terug naar dezelfde CMS-items.
Veelgestelde vragen
V: Publiceert AirOps rechtstreeks naar Webflow CMS of is Zapier nodig?
AirOps heeft een native Webflow-integratie die rechtstreeks naar CMS-collecties publiceert, zonder dat je Zapier of Make als tussenlaag nodig hebt. Je koppelt Webflow in AirOps, wijst je outputvelden toe aan de velden van de collectie en publiceert in één handeling. Een automatiseringstool van een derde partij is niet nodig.
V: Welk formaat moet AirOps gebruiken voor Webflow-rich-textvelden?
Gebruik HTML-output voor Webflow-rich-textvelden. Geef je AirOps-workflow de opdracht om de hoofdtekst op te maken als geldige HTML, met de juiste tags voor koppen, alinea's, vetgedrukte tekst en lijsten. Platte tekst of markdown verliest de opmaak bij het importeren in een Webflow-rich-textveld.
V: Kan AirOps bestaande Webflow CMS-items bijwerken, of alleen nieuwe aanmaken?
AirOps kan bestaande Webflow CMS-items bijwerken door de Webflow-ID van het bestaande item door de workflow te sturen en die toe te wijzen aan een updateactie in plaats van een aanmaakactie. Zo werken workflows voor het verversen van content: je matcht op item-ID, schrijft de content opnieuw en stuurt de update terug naar hetzelfde CMS-item.
V: Hoeveel Webflow CMS-items kan AirOps in één batchrun publiceren?
AirOps verwerkt Grid-rijen na elkaar, dus vanuit AirOps geldt er geen harde limiet voor de batchgrootte. De CMS API van Webflow heeft wel rate limits (momenteel 60 verzoeken per minuut bij standaardabonnementen). Bouw bij grote batches van meer dan 60 items een buffer voor de rate limit in je AirOps-workflowinstellingen in, of splits de batch op in kleinere runs.
V: Is deze integratie geschikt voor niet-technische teams?
Ja. De interface voor het toewijzen van velden in AirOps is visueel en vraagt geen kennis van API's. De belangrijkste technische stap is het opzetten van de Webflow OAuth-verbinding en het begrijpen van het schema van je collectie. Zodra die op orde zijn, kunnen contentteams workflows draaien en publiceren zonder hulp van developers.
Bijdrage van
SaaS Hackers


