Badge Webflow Award Winner 2023

Comment utiliser l'API Webflow pour son site web ?

Publié le 
7/12/2021
Modifié le 
27/3/2023
Temps de lecture : 5 min
Ordinateur bleu avec image de documentation API et icon Webflow sur fond bleu ciel
Écrit par
Thomas Labonne avec un T-shirt Digidop

Thomas Labonne

Co-fondateur

L'API de Webflow est un accès simplifié vers toutes les données de votre site web. Dans cet article nous vous expliquons ce à quoi vous donne accès l'API de Webflow et comment l'utiliser de manière simple. En utilisant les différents protocoles HTTP de l'API, vous pourrez transformer votre simple site vitrine en une véritable plateforme web. Connectez tous vos outils no-code, outils Saas, applications et autres logiciels à votre site Webflow pour automatiser votre site et améliorer l'expérience utilisateur.

Points clés à retenir

Qu’est-ce qu’une API ?

Une API pour “Application Programming Interface” est un ensemble de protocoles qui vont vous permettre de connecter et intégrer très simplement des logiciels et applications entre eux. Une API va donc permettre à vos outils d’échanger entre eux un certains nombre de données, et donc d’automatiser certaines taches. Ces protocoles simplifient et facilitent les échanges de données, notamment dans un univers de plus en plus no-code. Les API sont un moyen no-code ou low-code de développer des applications ou des sites web bien plus facilement et rapidement. Puisque c’est un moyen de connecter facilement des outils, les API vous permettront donc d’optimiser chacun d’entre eux.

A quoi sert l’API Webflow ?

L’API de Webflow est un livre ouvert sur le CMS de votre site web. Vous pourrez y retrouver énormément d’informations concernant votre site, son balisage, vos collections, vos items, etc. Le schema ci-dessous vous montre comment sont pensées les données dans Webflow. L’API Webflow vous permettra d’accéder facilement et rapidement à trois grands types de données :

  • Les données propres au Site : regroupent les données basiques liées à la création du site, sa publication, son créateur ou encore son identifiant “site ID”.
  • Les données de vos collections : comprend des informations générales sur le nombre de collections que vous avez, les Collection ID, le slug, ou encore le nom des collections.
  • Les données de vos items : qui regroupent plus d’information sur les items, leur date de création, modification, publication, slug, Item ID, etc.

L’API de Webflow met donc a votre disposition de nombreuses données pour vous permettre de connecter (sans code) votre site Webflow à d’autres API, ou certains de vos outils.

Comment utiliser l’API Webflow ?

1 - Créez une clé API

Une clé API Webflow est une méthode d’authentification pour votre site web. Elle permettra d’identifier votre site et vous donner accès à toutes les requêtes API de Webflow. Vous pourrez ainsi utiliser chacune des requêtes HTTP (voir 2) pour utiliser les données de votre site web.

Pour créer votre première clé API Webflow, rendez-vous dans les paramètre de votre projet en cliquant sur “Project settings” . Cliquez sur “Integration” et descendez jusqu’à la section “API Access” et cliquez sur “Generate new API token”.

2 - Utilisez des requêtes HTTP Webflow

Une requête HTTP pour “ Hypertext Transfer Protocol” est en fait un moyen de communication entre les navigateurs web et les serveurs web. Ce sont en quelque sorte les coulisses du web et on parle alors de “protocole HTTP”. Des qu’une requête est effectuée sur un navigateur, elle va alors être communiquée via ce protocole HTTP à un serveur web qui héberge des données. Par exemple pour accéder à un site web, vous envoyez une requête HTTP en cliquant sur l’URL du site, qui de son coté va apporter une réponse en affichant la page web. Il existe plusieurs méthodes de requêtes HTTP, qui vont permettre d’indiquer l’action que l’on souhaite effectuer. On parle souvent de “verbes HTTP”  

Webflow vous met donc à disposition plusieurs “verbes HTTP” pour pouvoir communiquer avec son API. Voici les HTTP verbs utilisés par l’API Webflow.

  • GET - méthode utilisée pour récupérer des données sur un serveur. En utilisant le HTTP verb GET de Webflow, vous pourrez récupérer des informations sur votre site, vos items, vos collections, vos produits e-commerce, etc.
  • POST - méthode utilisée pour envoyer des données à un serveur. Dans le cas de Webflow, vous pourrez par exemple utiliser la requête HTTP POST pour publier un site, créer une nouvelle collection, un nouvel Item, etc.
  • PUT - ce verbe HTTP vous permet de mettre à jour des éléments de votre site Webflow comme des items de votre CMS.
  • PATCH - similaire au verbe PUT ce verbe HTTP vous permet de mettre à jour des éléments de votre site Webflow à la différence qu’on peut se limiter aux seuls champs à modifier.
  • DELETE - une requête qui vous permettra de supprimer des éléments de votre CMS comme un item, une collection, etc.
Schéma des données structurées du CMS Webflow
Structure des données CMS Webflow

3 - Utilisez la documentation API de Webflow

Webflow met gratuitement disposition des développeurs web ou personnes qui souhaiteraient son API une documentation Webflow API. Cette documentation très complète vous donne tous les éléments pour pouvoir utiliser via des requêtes HTTP les données des API.

Vous retrouverez dans cette documentation toutes les informations concernant les requêtes HTTP à utiliser en fonction des actions que vous souhaitez effectuer, différents modèles que vous pouvez utiliser pour personnaliser vos requêtes, etc.

Que ce soit pour un site vitrine, un site e-Commerce ou une plateforme web ultra connectée, l’API de Webflow vous permet d’optimiser et automatiser votre site web rapidement et facilement.

projet Flomodia by Digidop
projet Coudac by Digidop
projet Heka by Digidopprojet Flaw by Digidopprojet Morfo by Digidop