Aller au contenu

Comment connecter AirOps au CMS Webflow ?

Si votre équipe génère du contenu dans AirOps puis le copie à la main dans Webflow, l'automatisation ne fait que la moitié du travail. Cette définition explique comment fonctionne l'intégration entre AirOps et Webflow CMS, ce qu'il faut pour la configurer, et comment le contenu est automatiquement mappé des résultats du workflow vers les champs de vos collections.

Contribution de

SaaS Hackers
Blog

Réponse rapide : vous pouvez connecter AirOps à Webflow CMS grâce à l'intégration native de Webflow dans AirOps ou à l'action « Publish to CMS from Grid ». Une fois la connexion établie, le contenu généré par l'IA arrive directement dans vos collections Webflow CMS, sans copier-coller, sans mise en forme manuelle et sans passer d'un outil à l'autre.

Un contenu généré par l'IA n'est utile que s'il est publié. Si votre équipe lance des workflows AirOps puis copie les résultats à la main dans Webflow, vous ajoutez une friction qui annule tout l'intérêt de l'automatisation.

Ce tutoriel vous montre comment envoyer automatiquement les résultats d'AirOps vers les collections Webflow CMS. À la fin, vous disposerez d'un pipeline opérationnel qui prend le contenu généré par l'IA et le publie directement dans votre CMS, champ par champ, sans ouvrir l'éditeur Webflow.

Ce que fait réellement l'intégration entre AirOps et Webflow CMS

L'intégration entre AirOps et Webflow connecte vos workflows de contenu IA aux collections Webflow CMS via l'API. Au lieu d'exporter un document et de le remettre en forme pour Webflow, AirOps associe directement ses champs de sortie aux champs de votre collection CMS et publie les éléments à la demande.

Concrètement :

  • Les champs de titre correspondent au nom de l'élément Webflow
  • Les sorties en rich text correspondent aux champs multiligne ou rich text de votre collection
  • Les meta descriptions, slugs et tags correspondent à leurs champs respectifs
  • Le statut brouillon ou publié est défini dans le workflow lui-même

L'équipe de Webflow a utilisé cette intégration avec AirOps pour accélérer ses mises à jour de contenu d'un facteur 5. Si vous construisez un workflow de publication à grande échelle, il est aussi utile de comprendre l'effet de votre CMS sur les performances organiques, surtout pour choisir le meilleur CMS pour le SEO.

Ce qu'il vous faut avant de commencer

Avant de construire le pipeline, assurez-vous d'avoir les éléments suivants :

  • Un compte AirOps actif (tous les forfaits payants incluent les intégrations CMS)
  • Un site Webflow avec au moins une collection CMS configurée
  • Un jeton d'API Webflow avec les droits de lecture et d'écriture sur le CMS
  • Un workflow AirOps opérationnel qui produit des sorties structurées (titre, corps, meta, etc.)

Si votre workflow AirOps produit encore du texte non structuré, structurez-le d'abord. L'intégration fonctionne champ par champ : vos sorties doivent donc correspondre au schéma de votre collection avant de procéder au mappage.

Étape 1 : connecter Webflow à AirOps

  1. Ouvrez AirOps et accédez à Intégrations dans la barre latérale gauche
  2. Sélectionnez Webflow dans la liste des intégrations
  3. Cliquez sur Connect et authentifiez-vous avec votre compte Webflow
  4. Autorisez AirOps à accéder aux collections CMS de votre site
  5. Sélectionnez le site Webflow sur lequel vous souhaitez publier

AirOps utilise OAuth pour l'authentification : vous n'aurez donc pas besoin de coller manuellement des clés d'API à ce stade. Si vous travaillez dans un espace de travail d'équipe, connectez l'intégration au niveau de l'espace de travail pour que tous les workflows partagent la même connexion Webflow.

Étape 2 : configurer le schéma de votre collection Webflow CMS

Votre collection Webflow doit correspondre aux sorties produites par votre workflow AirOps. Ouvrez Webflow et comparez les champs de votre collection avec vos sorties AirOps.

Voici un schéma de collection de blog standard qui fonctionne bien avec AirOps :

Champ WebflowType de champSortie AirOps
NomTexte brutTitre de l'article
CorpsRich textCorps principal de l'article
Meta descriptionTexte brutMeta description SEO
SlugTexte brutSlug de l'URL
CatégorieRéférenceTag de catégorie
PubliéInterrupteurStatut brouillon/publié

Si votre collection n'a pas certains champs produits par votre workflow AirOps, ajoutez-les dans Webflow avant de continuer. Des champs qui ne correspondent pas feront échouer l'action de publication ou supprimeront du contenu sans avertissement.

Étape 3 : créer ou adapter votre workflow AirOps pour produire des champs structurés

Dans AirOps, votre workflow doit produire des sorties nommées qui correspondent à vos champs Webflow. Si vous utilisez un workflow Grid (l'outil de contenu en lot d'AirOps), chaque colonne de la grille devient un champ mappable.

Structurez les sorties de votre workflow ainsi :

  • title (texte brut, moins de 60 caractères pour le SEO)
  • body (rich text ou HTML, selon le type de votre champ Webflow)
  • meta_description (texte brut, 140 à 160 caractères)
  • slug (en minuscules, avec des tirets, sans espaces)
  • status (défini sur « draft » pendant les tests, puis sur « published » une fois prêt)

Pour les champs rich text en particulier, AirOps accepte l'HTML en entrée. Si votre champ rich text Webflow accepte l'HTML, mettez en forme le corps du texte en HTML plutôt qu'en markdown brut. Cela préserve la hiérarchie des titres, le gras, les listes et les liens, sans que Webflow supprime la mise en forme à l'import.

C'est le point de défaillance le plus courant dans les configurations entre AirOps et Webflow CMS. Un corps de texte en texte brut perdra toute sa mise en forme lorsqu'il sera envoyé vers un champ rich text.

Étape 4 : ajouter l'action « Publish to CMS » dans AirOps

C'est ici que le pipeline prend forme.

  1. Dans votre workflow AirOps, cliquez sur Add Action
  2. Sélectionnez Publish to CMS from Grid (pour les workflows en lot) ou Webflow CMS Item (pour les workflows à élément unique)
  3. Choisissez votre site Webflow connecté dans la liste déroulante
  4. Sélectionnez la collection CMS cible
  5. Associez chaque champ de sortie AirOps au champ correspondant de la collection Webflow

L'écran de mappage affiche les champs de votre collection Webflow à droite et les sorties de votre workflow AirOps à gauche. Faites glisser ou sélectionnez les éléments pour les relier.

Pour les champs de référence (comme un champ catégorie ou auteur dans Webflow), vous devrez transmettre l'ID de l'élément Webflow correspondant, et non son libellé. Récupérez ces ID via l'API Webflow CMS ou dans le gestionnaire de collections Webflow.

Étape 5 : tester avec un seul élément en brouillon

Avant de lancer une publication en lot, testez la connexion avec un seul élément au statut brouillon.

  1. Définissez la sortie de statut de votre workflow sur "draft"
  2. Lancez le workflow pour une seule ligne ou une seule entrée
  3. Ouvrez Webflow CMS et vérifiez que l'élément brouillon apparaît dans votre collection
  4. Vérifiez chaque champ : la mise en forme du rich text est intacte, le slug est correct et aucun champ n'est vide

Problèmes courants à cette étape :

  • Le champ rich text affiche des balises HTML brutes : votre champ Webflow est défini en texte brut et non en rich text. Modifiez le type de champ dans Webflow.
  • L'élément apparaît mais le slug est vide : votre sortie de slug contient des espaces ou des majuscules. Ajoutez une étape de transformation de texte dans AirOps pour le nettoyer.
  • Le champ de référence est vide : vous transmettez un libellé au lieu d'un ID d'élément Webflow. Passez à un mappage basé sur les ID.

Corrigez les problèmes de champs avant de passer à la publication en lot.

Étape 6 : lancer la publication en lot depuis la grille AirOps

Une fois votre test sur un seul élément réussi, vous pouvez publier à grande échelle avec les grilles AirOps.

  1. Ouvrez votre grille AirOps contenant les lignes de contenu à publier
  2. Sélectionnez les lignes à envoyer vers Webflow (ou sélectionnez-les toutes)
  3. Cliquez sur Publish to CMS
  4. Confirmez la collection cible et le mappage des champs
  5. Lancez l'action en lot

AirOps traite chaque ligne l'une après l'autre et crée un nouvel élément CMS dans Webflow pour chacune. Un indicateur de statut par ligne affiche la réussite ou l'échec. Les lignes en échec affichent un message d'erreur qui pointe généralement vers un problème de mappage sur un champ précis.

Pour les workflows de mise à jour de contenu (qui modifient des éléments Webflow existants au lieu d'en créer de nouveaux), AirOps peut faire la correspondance par ID d'élément ou par slug afin de mettre à jour plutôt que de dupliquer. Transmettez l'ID de l'élément Webflow existant dans une colonne de sortie et associez-le à l'action de mise à jour plutôt qu'à l'action de création.

Comment gérer la mise en forme du rich text dans Webflow

Le rich text est la partie techniquement la plus délicate du pipeline entre AirOps et Webflow CMS : elle mérite donc sa propre section.

Le champ rich text de Webflow accepte l'HTML. AirOps peut produire de l'HTML si vous le lui demandez dans votre prompt ou dans les paramètres du workflow. L'approche la plus sûre consiste à :

  1. Définir explicitement le format HTML pour le corps du texte dans votre prompt (« Output the article body as valid HTML with proper heading tags, paragraph tags, and list tags »)
  2. Associer cette sortie à un champ rich text Webflow
  3. Vérifier que les <h2>, <h3>, <ul>, <ol>, <strong>, et <a> balises s'affichent correctement dans Webflow

Les tableaux et les éléments de code personnalisé demandent un traitement supplémentaire. Le champ rich text de Webflow ne prend pas en charge nativement les tableaux HTML comme le fait une page HTML standard. Si votre contenu comprend des tableaux, convertissez-les en listes structurées avant la publication, ou utilisez un champ d'intégration personnalisé dans Webflow à la place du champ rich text.

Automatiser toute la chaîne : du déclencheur à l'élément CMS publié

La version la plus efficace de ce workflow supprime entièrement les étapes manuelles. Voici comment mettre en place une boucle complète, du déclencheur à la publication :

  1. Déclencheur : une nouvelle ligne ajoutée à un Google Sheet, un enregistrement Airtable mis à jour, ou une exécution AirOps planifiée
  2. Génération : AirOps exécute le workflow de contenu et produit des sorties structurées
  3. Publication : AirOps déclenche automatiquement l'action de publication Webflow CMS, sans clic manuel
  4. Notification : AirOps envoie une notification Slack ou par e-mail confirmant la publication de l'élément

Cette configuration est particulièrement utile pour les workflows de mise à jour de contenu. Vous fournissez à AirOps une liste d'ID d'éléments Webflow CMS existants avec leur contenu actuel, le workflow les réécrit ou les met à jour, et le résultat retourne directement dans les mêmes éléments du CMS.

FAQ

Q : AirOps publie-t-il directement dans Webflow CMS ou faut-il passer par Zapier ?

AirOps propose une intégration native avec Webflow qui publie directement dans les collections du CMS, sans passer par Zapier ou Make comme couche intermédiaire. Vous connectez Webflow dans AirOps, associez vos champs de sortie aux champs de la collection, puis publiez en une seule action. Aucun outil d'automatisation tiers n'est nécessaire.

Q : Quel format AirOps doit-il utiliser pour les champs de texte enrichi de Webflow ?

Utilisez une sortie HTML pour les champs de texte enrichi de Webflow. Indiquez à votre workflow AirOps de mettre en forme le corps du contenu en HTML valide, avec les balises adaptées pour les titres, les paragraphes, le gras et les listes. Le texte brut ou le markdown perdent leur mise en forme lorsqu'ils sont importés dans un champ de texte enrichi Webflow.

Q : AirOps peut-il mettre à jour des éléments existants du CMS Webflow, ou seulement en créer de nouveaux ?

AirOps peut mettre à jour des éléments existants du CMS Webflow : il suffit de transmettre l'ID Webflow de l'élément dans le workflow et de l'associer à une action de mise à jour plutôt que de création. C'est ainsi que fonctionnent les workflows d'actualisation de contenu : on identifie l'élément grâce à son ID, on réécrit le contenu, puis on renvoie la mise à jour vers le même élément du CMS.

Q : Combien d'éléments du CMS Webflow AirOps peut-il publier en une seule exécution par lot ?

AirOps traite les lignes de la Grid de façon séquentielle, il n'y a donc aucune limite stricte de taille de lot côté AirOps. L'API CMS de Webflow, en revanche, a des limites de débit (actuellement 60 requêtes par minute sur les offres standard). Pour les lots de plus de 60 éléments, prévoyez une marge dans les paramètres de limite de débit de votre workflow AirOps, ou divisez le lot en exécutions plus petites.

Q : Cette intégration convient-elle aux équipes non techniques ?

Oui. L'interface de mappage des champs d'AirOps est visuelle et ne demande aucune connaissance des API. La principale étape technique consiste à configurer la connexion OAuth avec Webflow et à comprendre le schéma de votre collection. Une fois ces deux points réglés, les équipes de contenu peuvent lancer et publier des workflows sans l'aide d'un développeur.

Contribution de

SaaS Hackers

Trouver un expert B2B SaaS

Nous avons constitué un annuaire d'experts et d'agences B2B SaaS que nous avons évalués et classés par service et par spécialité, pour que vous puissiez les consulter.

Trouver un expert
Tout voir