Ga naar de inhoud

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
Blog

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

  1. Open AirOps en ga in de zijbalk links naar Integraties
  2. Kies Webflow in de lijst met integraties
  3. Klik op Connect en log in met je Webflow-account
  4. Geef AirOps toestemming om de CMS-collecties van je site te gebruiken
  5. 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-veldVeldtypeAirOps-output
NaamPlatte tekstArtikeltitel
BodyRich textHoofdtekst van het artikel
MetabeschrijvingPlatte tekstSEO-metabeschrijving
SlugPlatte tekstURL-slug
CategorieVerwijzingCategorietag
GepubliceerdSchakelaarStatus 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.

  1. Klik in je AirOps-workflow op Add Action
  2. Kies Publish to CMS from Grid (voor batchworkflows) of Webflow CMS Item (voor workflows met één item)
  3. Kies je gekoppelde Webflow-site in de dropdown
  4. Selecteer de CMS-collectie waarin je wilt publiceren
  5. 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.

  1. Stel de statusoutput van je workflow in op "draft"
  2. Draai de workflow voor één rij of één invoer
  3. Open Webflow CMS en controleer of het conceptitem in je collectie verschijnt
  4. 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.

  1. Open je AirOps Grid met de contentrijen die je wilt publiceren
  2. Selecteer de rijen die je naar Webflow wilt sturen (of selecteer alles)
  3. Klik op Publish to CMS
  4. Bevestig de doelcollectie en de veldkoppeling
  5. 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:

  1. 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")
  2. Koppel deze output aan een Webflow rich text-veld
  3. 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:

  1. Trigger: een nieuwe rij in een Google Sheet, een bijgewerkt Airtable-record of een geplande AirOps-run
  2. Genereren: AirOps draait de contentworkflow en levert gestructureerde outputs op
  3. Publiceren: AirOps start automatisch de publicatieactie voor Webflow CMS, zonder handmatige klik
  4. 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

Vind een B2B SaaS-expert

We hebben een gids samengesteld met B2B SaaS-experts en -bureaus die we hebben beoordeeld en ingedeeld op dienst en specialisme.

Vind een expert
Alles bekijken