Ressources · Intégration n8n

Intégration Webflow n8nAutomatiser Webflow avec n8n.

Webflow garde le contenu, n8n prend ce qui se répète. L'intégration Webflow n8n donne accès à 5 opérations sur les items de collection et à un trigger qui écoute 8 événements, du formulaire envoyé à la mise en ligne du site. Utile dès que tu édites tes collections à la main.

Tester l'intégration Webflow sur n8nVoir les 5 opérations

Avis vérifiés sur Trustpilot · Agence IA, automatisation & growth

Pourquoi automatiser

À quoi sert l'intégration Webflow n8n ?

Le nœud Webflow dialogue avec l'API de Webflow depuis un workflow. Une seule ressource, Item, et 5 opérations dessus : créer, lire, lister, mettre à jour, supprimer une entrée de collection. À côté, le Webflow Trigger enregistre un webhook, c'est-à-dire une URL que Webflow appelle dès qu'il se passe quelque chose sur le site, et démarre un workflow sur l'un des 8 événements disponibles.

Premier cas, le formulaire qui ne finit plus dans une boîte mail. form_submission déclenche le workflow, le contact part vers Mautic pour la suite de la relation, et une ligne s'écrit dans Google Sheets pour la personne qui rappelle. Plus d'export manuel le lundi matin.

Deuxième cas, la mise en ligne surveillée. site_publish part au moment de la publication, le workflow prévient l'équipe dans Slack et envoie la confirmation au client via SendGrid. Personne n'a besoin de demander si c'est passé.

Troisième cas, la collection alimentée depuis ailleurs. Une fiche validée dans un autre outil devient une entrée avec item.create, et la correction qui arrive deux heures plus tard passe par item.update. L'éditeur Webflow ne s'ouvre plus que pour le design.

Les limites, maintenant, parce qu'elles conditionnent la conception. Le nœud couvre les items de collection, et rien d'autre. Ce que tu voudrais atteindre ailleurs dans Webflow n'existe pas comme opération ici. Dans ce cas, le nœud HTTP Request appelle n'importe quel endpoint de l'API en réutilisant le même credential grâce à l'authentification prédéfinie : pas de deuxième configuration à entretenir.

Deux points à connaître avant de dessiner le workflow. Le trigger surveille un seul site, choisi dans Site Name or ID, et n'écoute qu'un seul événement : plusieurs sites ou plusieurs événements, donc plusieurs workflows. Et la Webflow Data API V1 est dépréciée : en OAuth2, le bouton Legacy ne sert qu'à ce cas précis. Si c'est ton premier vrai projet n8n, la Formation n8n et l'Avis n8n couvrent tout ce qui entoure le nœud.

Connexion

Comment connecter Webflow à n8n ?

  1. 01

    Générer le jeton côté Webflow

    Deux méthodes d'authentification existent : le jeton d'accès API et OAuth2. Le jeton va plus vite. Ouvre les réglages du site, Site Settings > Apps & integrations > API access, puis Generate API token. Un site doit déjà exister pour cette méthode : le jeton est rattaché à un site précis, et sans site il n'y a rien à rattacher.

  2. 02

    Créer le credential dans n8n

    Dans n8n, ouvre le menu Credentials et crée un credential Webflow, puis colle l'Access Token. Un credential, c'est l'endroit où n8n range un accès : tu le saisis une fois, tous les workflows le réutilisent. En OAuth2, enregistre une application dans ton espace Webflow, copie l'OAuth callback URL affichée par n8n comme Redirect URI, puis ramène le Client ID et le Client Secret.

  3. 03

    Choisir le site et tester une lecture

    Pose un nœud Webflow sur le canvas, sélectionne le credential, puis choisis Site Name or ID et Collection Name or ID dans les listes que n8n remplit tout seul. Lance item.getAll une fois sur une petite collection : si les entrées reviennent, l'accès est bon. Côté trigger, le même test consiste à choisir le site et un événement, puis à activer le workflow.

Déclencheurs

Qu'est-ce qui déclenche un workflow Webflow ?

Webflow Trigger est le nœud qui démarre un workflow quand quelque chose se passe dans Webflow. Il écoute 8 événements, listés ci-dessous par famille. Tu en choisis un ou plusieurs, tu actives le workflow : n8n enregistre le webhook (l'URL que Webflow appelle) sur ton compte.

Ce que tu vois dans n8n

Tous les événements, par famille

Une ligne par objet, une puce par action. L'événement à cocher dans le nœud s'écrit objet.action ; survole une puce pour lire quand il se déclenche.

collection_item_changed.*1
  • collection_item_changed.
    • collection_item_changed
collection_item_created.*1
  • collection_item_created.
    • collection_item_created
collection_item_deleted.*1
  • collection_item_deleted.
    • collection_item_deleted
ecomm_inventory_changed.*1
  • ecomm_inventory_changed.
    • ecomm_inventory_changed
ecomm_new_order.*1
  • ecomm_new_order.
    • ecomm_new_order
ecomm_order_changed.*1
  • ecomm_order_changed.
    • ecomm_order_changed
form_submission.*1
  • form_submission.
    • form_submission
site_publish.*1
  • site_publish.
    • site_publish

Notes de configuration

01Set up the Webflow TriggerLe Webflow Trigger, c'est le nœud qui lance le workflow quand quelque chose se passe dans Webflow, au lieu que tu cliques sur Execute. La version 2 fonctionne par webhook : à l'activation du workflow, n8n enregistre son URL auprès de Webflow, et chaque événement concerné arrive en quelques secondes. Rien à planifier, aucun intervalle à régler.

Le Webflow Trigger, c'est le nœud qui lance le workflow quand quelque chose se passe dans Webflow, au lieu que tu cliques sur Execute. La version 2 fonctionne par webhook : à l'activation du workflow, n8n enregistre son URL auprès de Webflow, et chaque événement concerné arrive en quelques secondes. Rien à planifier, aucun intervalle à régler.

Paramètres clés

  • Site Name or ID : le site surveillé, pris dans la liste que n8n charge avec ton credential, ou écrit sous forme d'expression comme {{ $json.siteId }} quand la valeur vient d'un nœud précédent. Une expression, c'est la manière dont n8n lit un champ de l'item entrant.
  • Event : l'unique événement écouté, à prendre parmi 8. Il n'y a pas de joker, donc un workflow n'écoute jamais tout en même temps.
Quand l'utiliser
dès que Webflow est le point de départ du processus et non sa destination, et qu'attendre une exécution planifiée arriverait trop tard.
02Collection item eventsTrois des 8 événements suivent la vie d'une entrée de collection : collection_item_created, collection_item_changed et collection_item_deleted. Chacun transmet au workflow l'entrée qui a bougé, ce qui permet de tenir une copie à jour ailleurs sans relire toute la collection à chaque fois.

Trois des 8 événements suivent la vie d'une entrée de collection : collection_item_created, collection_item_changed et collection_item_deleted. Chacun transmet au workflow l'entrée qui a bougé, ce qui permet de tenir une copie à jour ailleurs sans relire toute la collection à chaque fois.

Paramètres clés

  • Event : choisis le sens qui t'intéresse, création pour une nouvelle entrée, modification pour une correction, suppression pour un nettoyage. Couvrir les trois, c'est trois workflows.
  • Site Name or ID : les événements portent sur le site, pas sur une collection en particulier, donc les entrées de toutes les collections de ce site passent par là.
Cas d'usage
une nouvelle référence client apparaît dans la collection et le workflow la publie dans le canal de l'équipe avec son lien ; une entrée supprimée efface la ligne correspondante du tableau de suivi, et les deux restent alignés.
03Ecommerce eventsLa boutique fournit trois événements de plus : ecomm_new_order à la commande, ecomm_order_changed quand cette commande est modifiée ensuite, et ecomm_inventory_changed quand le stock bouge. Ensemble, ils permettent de suivre une vente de bout en bout sans que personne ne surveille le tableau de bord Webflow.

La boutique fournit trois événements de plus : ecomm_new_order à la commande, ecomm_order_changed quand cette commande est modifiée ensuite, et ecomm_inventory_changed quand le stock bouge. Ensemble, ils permettent de suivre une vente de bout en bout sans que personne ne surveille le tableau de bord Webflow.

Paramètres clés

  • Event : un seul par workflow. Un tunnel de commande qui s'intéresse à la vente puis à ses modifications se monte en deux workflows qui alimentent les mêmes étapes suivantes.
  • Site Name or ID : le site qui héberge la boutique. Ces événements n'existent que là où l'ecommerce est configuré, le trigger reste muet sur un site purement éditorial.
Cas d'usage
une commande ouvre la tâche de préparation et affiche le détail dans le canal logistique ; un stock qui descend sous le seuil que tu acceptes déclenche un rappel de réassort pour l'acheteur.
04Form submission and site publishform_submission transmet les champs d'un formulaire Webflow à la seconde où un visiteur l'envoie. site_publish part à la publication du site. Les deux n'ont pas grand-chose en commun, sinon d'être les seuls événements qui ne parlent pas d'entrées de collection, et de faire d'excellents points d'entrée.

form_submission transmet les champs d'un formulaire Webflow à la seconde où un visiteur l'envoie. site_publish part à la publication du site. Les deux n'ont pas grand-chose en commun, sinon d'être les seuls événements qui ne parlent pas d'entrées de collection, et de faire d'excellents points d'entrée.

Paramètres clés

  • Event : form_submission pour tout ce qui touche aux contacts, site_publish pour le travail de mise en ligne et les vérifications qui suivent.
  • Site Name or ID : les formulaires de toutes les pages du site arrivent par le même trigger, donc le tri par formulaire se fait plus loin dans le workflow, pas dans le nœud.
Cas d'usage
un formulaire de contact alimente la liste de diffusion et le canal commercial en une seule exécution, sans outil de formulaire intermédiaire ; une publication lance un contrôle des liens et prévient le client que la nouvelle version est en ligne.
Actions

Ce que le nœud Webflow sait faire

Le nœud Webflow expose 5 opérations sur 1 ressources. Pour chacune : le nœud tel que tu le configures dans n8n, les champs obligatoires, et nos notes de terrain.

Matrice ressources × opérations
RessourceCreateGetGet ManyUpdateDelete
Item✓✓✓✓✓

Item

5 opérations
01

Create an item

item.create

Ce que tu vois dans n8n

Notes & cas d'usage

Ajoute une entrée dans une collection et la renvoie telle que Webflow l'a enregistrée, identifiant compris, que les nœuds suivants réutilisent.

Paramètres clés

  • Site Name or ID : le site qui héberge la collection visée, pris dans la liste ou donné par une expression.
  • Collection Name or ID : la collection qui reçoit l'entrée.
  • Live : activé, l'entrée est publiée tout de suite sur le site en ligne ; désactivé, elle attend la prochaine publication dans la collection.
  • Fields : le contenu lui-même, ajouté champ par champ avec Add Field, en général alimenté par des expressions comme {{ $json.title }} venant du nœud précédent.
Cas d'usage
un brouillon validé devient un article publié sans que personne le retape dans l'éditeur.
02

Delete an item

item.deleteItem

Ce que tu vois dans n8n

Notes & cas d'usage

Retire définitivement une entrée d'une collection. Webflow travaille ici avec l'identifiant, jamais avec le nom affiché dans l'éditeur : le workflow doit donc transporter cette valeur.

Paramètres clés

  • Site Name or ID : le site dont la collection contient l'entrée.
  • Collection Name or ID : la collection concernée.
  • Item ID : l'entrée à supprimer, le plus souvent transmise par {{ $json.itemId }} depuis l'étape qui l'a identifiée.
Cas d'usage
une offre d'emploi clôturée dans l'outil de recrutement disparaît le jour même de la collection carrières.
03

Get an item

item.get

Ce que tu vois dans n8n

Notes & cas d'usage

Lit une entrée et renvoie ses champs, sans rien modifier. C'est l'étape qui sert à décider de la suite.

Paramètres clés

  • Site Name or ID : le site qui contient la collection.
  • Collection Name or ID : là où vit l'entrée.
  • Item ID : l'entrée à lire, souvent récupérée d'un événement du trigger par une expression.
Cas d'usage
avant d'écrire une mise à jour, le workflow relit les valeurs actuelles et saute l'écriture quand rien n'a changé, ce qui garde un historique lisible côté site.
04

Get many items

item.getAll

Ce que tu vois dans n8n

Notes & cas d'usage

Liste les entrées d'une collection, un item par entrée, prêtes à être filtrées ou comparées plus loin.

Paramètres clés

  • Site Name or ID : le site à lire.
  • Collection Name or ID : la collection à lister.
  • Return All : activé, n8n enchaîne les pages de l'API et ramène toutes les entrées ; désactivé, il s'arrête à Limit.
  • Limit : le nombre maximal d'entrées renvoyées quand Return All est désactivé, pratique pour tester sur une grosse collection.
Cas d'usage
un export nocturne de toute la collection produits vers un tableur, pour repérer les fiches sans image.
05

Update an item

item.update

Ce que tu vois dans n8n

Notes & cas d'usage

Réécrit les champs d'une entrée existante en conservant le même identifiant : les liens et les références qui pointent vers elle survivent.

Paramètres clés

  • Site Name or ID : le site qui héberge la collection.
  • Collection Name or ID : la collection à laquelle appartient l'entrée.
  • Item ID : l'entrée à modifier.
  • Live : activé, les nouvelles valeurs apparaissent sur le site publié ; désactivé, elles restent dans la collection.
  • Fields : seuls les champs ajoutés ici sont envoyés, donc une mise à jour de prix ne touche que le prix.
Cas d'usage
stock et tarifs synchronisés chaque matin depuis le back-office.
Besoin d'aide

Besoin d'aide pour automatiser Webflow avec n8n ?

L'équipe te répond directement.

Chaque message est lu par une personne.

FAQ

Webflow et n8n, les questions qui reviennent

01L'intégration Webflow n8n est-elle gratuite ?
Oui côté n8n. Le nœud Webflow et le Webflow Trigger sont livrés avec n8n : rien à installer, rien à payer en plus pour les utiliser. C'est vrai sur n8n Cloud, l'offre hébergée par n8n, comme sur une instance auto-hébergée installée en Docker ou en npm, en Community Edition sous licence Sustainable Use. Un workflow se comporte de la même façon dans les deux cas, tu peux donc prototyper d'un côté et faire tourner de l'autre. Ce que coûte ton abonnement Webflow est une autre question et dépend de ton propre compte.
02Quels credentials faut-il pour Webflow dans n8n ?
Deux méthodes fonctionnent, et le nœud lui-même n'a pas de sélecteur d'authentification : le choix se fait à la création du credential. La première, le jeton d'accès API, se génère depuis Site Settings, Apps and integrations, API access, bouton Generate API token. Elle suppose un site existant et ne couvre que ce site. La seconde, OAuth2 : enregistre une application dans ton espace Webflow, ajoute l'OAuth callback URL de n8n comme Redirect URI, puis ramène le Client ID et le Client Secret dans n8n. Si tu es encore sur la Webflow Data API V1, dépréciée, le bouton Legacy est là pour ça. Le même credential sert au nœud et au trigger.
03Quelles sont les limites du nœud Webflow ?
Ça dépend de ce que tu attends. Le nœud expose une ressource, Item, avec 5 opérations : tout ce qui sort des entrées de collection n'est pas couvert, et aucun réglage ne l'ajoutera. La réponse dans ce cas, c'est le nœud HTTP Request, qui appelle n'importe quel endpoint de l'API Webflow en réutilisant le même credential grâce à l'authentification prédéfinie. En lecture, Get Many s'arrête à Limit tant que Return All n'est pas activé, et c'est la raison classique d'un export qui paraît incomplet. En écriture, c'est Live qui décide si la modification atteint le site publié ou reste dans la collection.
04Le trigger Webflow réagit-il en temps réel ?
Oui. Le Webflow Trigger fonctionne par webhook : Webflow appelle une URL n8n au moment où l'événement se produit, au lieu que n8n demande en boucle si quelque chose a changé. n8n enregistre cette URL auprès de Webflow à l'activation du workflow, et les événements arrivent en quelques secondes. Aucun intervalle à régler, aucun délai à prévoir dans la conception. Deux contraintes à intégrer quand même : le trigger surveille un seul site, défini dans Site Name or ID, et écoute un seul événement parmi les 8 disponibles, sans joker. Plusieurs événements, donc plusieurs workflows.
05n8n ou Make pour automatiser Webflow ?
Ça dépend de ce que tu veux maîtriser. Make est une plateforme d'automatisation hébergée, facturée à l'opération, sans option d'auto-hébergement. n8n tourne soit sur son cloud, soit sur ton propre serveur, ce qui compte quand les formulaires et les données de commande qui traversent le workflow doivent rester sur une infrastructure que tu contrôles. Le modèle de coût diffère aussi : à l'opération d'un côté, à l'instance ou au forfait de l'autre. Côté Webflow, la couverture est celle décrite sur cette page, 5 opérations et 8 événements de trigger : compare-la à ta vraie liste de besoins plutôt qu'à un nombre de fonctionnalités.
Même plateforme

Autres docs utiles sur ce stack.

Voir toutes les intégrations