API et bibliothèques externes : guide pour Wized
Guide pour connecter Webflow via Wized à des API et bibliothèques JS : sécurité des clés, intégrations (Xano, Supabase, Airtable, Stripe) et optimisation.
Wized est un outil qui transforme Webflow en une plateforme pour créer des applications web dynamiques en connectant l’interface utilisateur à des bases de données et services tiers via des API. Voici les points essentiels à retenir :
- Wized agit comme une couche logique pour gérer les requêtes réseau, l’état de l’application et les interactions avec des composants externes.
- Les API permettent de connecter Webflow à des bases de données comme Xano, Airtable ou Supabase, offrant des possibilités d’authentification, de gestion de données, et d’intégration avec des outils comme Stripe ou des services d’IA.
- Les bibliothèques JavaScript externes (ex. : GSAP, Three.js, Lottie) enrichissent les projets avec des animations, des visuels 3D ou des fonctionnalités avancées.
- La sécurité des clés API est un point central, avec des pratiques comme le stockage dans des backends sécurisés et la rotation régulière des clés.
- Exemples d’utilisation : tableaux de bord, systèmes d’apprentissage, e-commerce headless, gestion des abonnements, intégrations de paiements, etc.
Comment démarrer ?
Ajoutez le script Wized dans le <head> de votre projet Webflow, configurez vos requêtes et votre code personnalisé via l’éditeur intégré ou des scripts externes. Pour des performances optimales, suivez les bonnes pratiques de gestion des API et des bibliothèques.
Wized est utilisé dans des projets variés, comme des portails clients ou des systèmes de réservation. Pour des besoins complexes, des agences spécialisées comme Vanara peuvent accompagner les entreprises dans leurs projets.
Wized's JavaScript API | The full walkthrough part I
Démarrer avec les intégrations externes dans Wized
Guide de démarrage Wized : 4 étapes pour intégrer API et bibliothèques externes
Pour activer Wized, il suffit de copier le script dans le <head> de votre projet Webflow et de publier le site [7]. Cette étape essentielle transforme Wized en une couche logique qui relie l'interface utilisateur aux services externes. Notez que seuls les éléments dotés de l'attribut wized (par exemple, wized="element_name") seront pris en compte pour vos actions personnalisées [7].
Configurer le code personnalisé dans Wized
Une fois le script ajouté, configurez votre code personnalisé pour gérer vos intégrations avec des services tiers. Avec Wized, vous avez deux options pour écrire du JavaScript personnalisé : directement dans l'éditeur de fonctions intégré ou via un script externe. L'éditeur de fonctions offre un accès direct à l'objet Wized, permettant d'interagir avec le Data Store et les requêtes API. Si vous préférez un script externe, utilisez cette structure d'initialisation :
window.Wized = window.Wized || [];
window.Wized.push((Wized) => {
// votre code ici
});
Ce format garantit que l'API Wized est entièrement chargée avant que votre script ne s'exécute [2]. Le Data Store (Wized.data) est un outil central pour regrouper les variables, cookies et réponses API [2].
Gérer les clés API et assurer la sécurité
Manipuler les clés API demande une attention particulière pour éviter leur exposition côté client. Wized permet de configurer les en-têtes HTTP (comme Authorization) directement dans le panneau Requests, en récupérant les valeurs depuis le Data Store au lieu de les coder en dur [6]. Pour les projets nécessitant une sécurité renforcée, il est conseillé d'utiliser un backend intermédiaire, tel que Xano ou Supabase, pour stocker les clés sensibles et gérer la communication avec les services tiers [8][3].
« La règle d'or de la gestion des clés API est de ne jamais les stocker dans le code source, les dépôts publics ou les fichiers de configuration non chiffrés. » - Yilia Lin, Technology Writer, API7.ai [8]
Quand cela est possible, limitez l’utilisation des clés API à des domaines spécifiques (HTTP referrers) ou à des adresses IP autorisées [8]. Appliquez le principe du moindre privilège en générant des clés avec des permissions minimales pour réduire les risques [8]. Enfin, pensez à effectuer une rotation régulière de vos clés pour limiter les opportunités d'exploitation [8].
Tester et déboguer les intégrations
Une fois vos accès sécurisés, passez à la phase de tests et de débogage. Wized propose divers outils pour surveiller et diagnostiquer vos intégrations. L'objet global Wized fournit des propriétés comme Wized.version (pour vérifier la version de la bibliothèque) et Wized.config (pour examiner la configuration de votre projet) [2]. Le Data Store (Wized.data) permet de visualiser en temps réel les variables, cookies et réponses API [2].
Pour suivre le cycle de vie des appels API, utilisez les écouteurs d'événements Wized.on('requeststart') et Wized.on('requestend'). Ces outils offrent des informations sur le nom des requêtes, leur identifiant et leur durée d’exécution [2]. Si vous souhaitez surveiller les changements dans le Data Store, la méthode Wized.reactivity.watch() peut vous aider à identifier pourquoi certaines logiques ou mises à jour d'interface ne fonctionnent pas comme prévu [2]. Enfin, si du contenu est ajouté dynamiquement par une bibliothèque externe, la commande Wized.elements.update() permet de rescanner la page et d'initialiser les nouveaux éléments [2].
Intégrer des API populaires avec Wized
Le trio WWX (Webflow, Wized, Xano) offre une solution moderne et efficace : Webflow gère l'interface utilisateur, Xano centralise les données et expose des API RESTful, tandis que Wized relie le tout, permettant de surmonter la limite de 10 000 éléments imposée par le CMS de Webflow [9] [13] [12].
Utiliser l'API Xano pour les opérations backend
Pour intégrer Xano, procédez en quatre étapes simples : configurez le backend, créez l'interface avec Wized, connectez les deux via des clés API et appliquez la logique métier [9]. Concernant l'authentification, Xano propose des endpoints dédiés (/api/auth/signup, /api/auth/login). Les tokens JWT générés peuvent être stockés dans le localStorage grâce à Wized, assurant ainsi une gestion fluide des sessions utilisateur [12]. Les opérations CRUD (Créer, Lire, Mettre à jour, Supprimer) sont directement gérées via les API REST auto-générées par Xano pour chaque table de votre base de données [9] [12].
Pour sécuriser vos endpoints, appliquez des mesures comme l'authentification, le contrôle d'accès basé sur les rôles (RBAC) et des politiques CORS restrictives [10] [11] [12]. Gardez en tête que Webflow limite les appels API à 60 requêtes par minute par token (avec une capacité de rafale jusqu'à 120), tandis que Xano propose des limites plus élevées selon le plan choisi [12].
« J'avais des doutes sur Xano en venant du code natif. Il s'est avéré plus rapide pour itérer et plus rentable - les problèmes sont corrigés, testés et poussés en production rapidement. » - WeiJi Zhang, Founder & COO, EcoBeam GmbH [10]
Une fois Xano configuré pour vos besoins backend, vous pouvez explorer les connexions avec Supabase et Airtable.
Se connecter à Supabase et Airtable
Wized simplifie l’intégration avec Supabase et Airtable grâce à des méthodes prédéfinies, rendant la création de requêtes plus intuitive qu’avec des API REST classiques [6]. Avant de démarrer, assurez-vous que l’intégration (« App ») pour Supabase ou Airtable est correctement configurée dans les paramètres de votre projet Wized [6]. Ensuite, ouvrez le panneau Requests, ajoutez une nouvelle requête, nommez-la et sélectionnez l'application concernée. Choisissez la méthode adaptée (par exemple, Get List Items, Get Item, Create Item, Update Profile, Login), renseignez les champs nécessaires et définissez un déclencheur pour exécuter la requête [6].
Les données restent hébergées par le fournisseur externe, tandis que Wized facilite les appels API et leur intégration avec les éléments Webflow [3]. Pour Airtable, Wized prend également en charge les requêtes complexes, idéales pour des applications web avancées [3].
Une fois vos intégrations de bases de données en place, il est temps de s’intéresser à la gestion des paiements avec Stripe.
Implémenter l'API Stripe pour les paiements
Avec Wized, la gestion des paiements via Stripe devient simple et sécurisée. Associez les emails des utilisateurs à leurs abonnements, configurez des webhooks Stripe pour suivre l’état des paiements en temps réel et stockez le Stripe Customer ID dans votre backend dès sa création [14].
Les informations de carte bancaire sont protégées grâce aux sessions de paiement Stripe, et Wized met à jour l’interface utilisateur en fonction du statut d’abonnement [3] [14]. Le configurateur visuel de Wized permet d’afficher les méthodes de paiement enregistrées et les statuts d’abonnement directement à partir des données Stripe, renforçant ainsi la transparence et la confiance [14]. Les webhooks jouent un rôle clé en notifiant immédiatement votre application des paiements réussis, des échecs ou des changements de méthode de paiement [14].
sbb-itb-dec7f38
Ajouter des bibliothèques JavaScript externes à Wized
Wized ne se limite pas à l'intégration d'API. Il permet également d'incorporer des bibliothèques JavaScript tierces pour enrichir vos projets avec des animations complexes, des scènes 3D ou des animations vectorielles. Ces bibliothèques peuvent être intégrées via l'importation ESM (par exemple, avec esm.run et la syntaxe await import()) ou grâce à window.Wized.push, qui garantit que l'API est entièrement chargée avant utilisation [15][2]. Pour cibler les éléments DOM, utilisez Wized.elements.get('nom_element').node, ce qui facilite leur interaction avec Wized [2]. Passons maintenant à des exemples pratiques avec des bibliothèques populaires.
Intégrer GSAP pour les animations
GSAP est une bibliothèque puissante pour créer des animations fluides. Vous pouvez l'activer via les paramètres de Webflow, ce qui charge la bibliothèque principale ainsi que ses plugins sur l'ensemble de votre site [16]. Cependant, pour éviter de ralentir votre projet, il est recommandé de ne charger GSAP que sur les pages qui en ont besoin, en configurant les paramètres de page plutôt que globaux [16]. Avant d'utiliser GSAP, n'oubliez pas d'enregistrer les plugins nécessaires, comme gsap.registerPlugin(ScrollTrigger) [16].
Pour intégrer GSAP avec Wized, encapsulez vos commandes dans Wized.reactivity.watch() ou Wized.reactivity.effect(). Cela permet de déclencher automatiquement des animations dès qu'une variable du Data Store change [2]. Par exemple, une timeline GSAP peut démarrer dès qu'une donnée spécifique est mise à jour.
Utiliser Three.js pour des visuels 3D
Three.js est idéal pour créer des scènes 3D immersives et peut être intégré dans Wized en important la bibliothèque dynamiquement :
const THREE = await import('https://esm.run/three')
[15]. Si la bibliothèque utilise des exports nommés, vous pouvez y accéder directement avec une syntaxe comme const { namedExport } = module [15].
Lorsque Three.js ajoute des éléments DOM de manière dynamique (comme des canvases ou des conteneurs), il est nécessaire d'appeler Wized.elements.update() pour que Wized reconnaisse ces nouveaux éléments [2]. Pour synchroniser vos scènes 3D avec l'interface utilisateur, utilisez WizedElement.on() pour écouter les changements d'attributs ou de visibilité, ce qui permet de mettre à jour le rendu en temps réel [2].
Implémenter Lottie pour les animations vectorielles
Les fichiers Lottie s'intègrent facilement dans Wized en important la bibliothèque via ESM. Vous pouvez contrôler la lecture des animations en utilisant le système de gestion d'état de Wized. Pour déclencher une animation en fonction d'une variable, encapsulez les commandes dans Wized.reactivity.watch(). Cela garantit que l'animation réagit immédiatement aux interactions ou aux changements d'état [2].
Pour éviter les erreurs "undefined" lors de l'utilisation de Lottie, appliquez toujours ce pattern avant d'ajouter des commandes :
window.Wized = window.Wized || [];
[2]. Ce petit détail permet d'assurer la stabilité de votre code, en particulier lorsque vous travaillez avec des animations complexes.
Bonnes pratiques et cas d'usage avancés
Optimiser les performances des API et bibliothèques
Pour tirer le meilleur parti de vos API, utilisez la méthode Wized.requests.waitFor() afin d’éviter les appels redondants et d’optimiser les performances [2]. Une autre astuce consiste à paginer les ensembles de données volumineux. Cela réduit la consommation de ressources et améliore les temps de chargement, un avantage non négligeable. D’ailleurs, les entreprises qui adoptent ces pratiques constatent une baisse de 67 % des tickets de support liés aux développeurs [17].
Pour un code plus réactif, encapsulez vos fonctions avec Wized.reactivity.watch()/effect(). Cette méthode garantit que vos fonctions ne s’exécutent que lorsque les données changent [2]. Pour des opérations complexes, privilégiez l’utilisation de Wized.requests.getClient() qui permet un accès direct aux SDK de Supabase ou Firebase. Ces outils sont souvent plus performants que les requêtes REST classiques [2].
Exemples de projets en production
Ces optimisations ne sont pas que théoriques : elles sont déjà utilisées dans des projets concrets. Par exemple, des portails clients combinant l'authentification via Supabase, la récupération de données avec Xano et un filtrage dynamique démontrent l’efficacité de Wized [5]. Les plateformes d’e-learning s’appuient également sur cette architecture pour suivre les progressions des utilisateurs. De même, les systèmes de réservation en temps réel exploitent la réactivité de Wized pour synchroniser instantanément les disponibilités [5].
Le stack WWX (Webflow + Wized + Xano) offre un gain de temps impressionnant, permettant un développement jusqu’à 10 fois plus rapide comparé au code traditionnel [1][5]. Certaines entreprises ayant adopté cette architecture ont vu leur trafic annuel bondir de 1 170 % [17]. Ces exemples montrent à quel point une mise en œuvre technique bien pensée peut transformer un projet.
Collaborer avec Vanara pour des projets évolutifs
Vanara, une agence certifiée Webflow et Wized, est un partenaire clé pour les projets web nécessitant des intégrations complexes. Leur expertise couvre des domaines variés : développement d’applications web internes, optimisation SEO ou encore création de workflows sur mesure avec des API tierces. Pour les projets exigeant une architecture solide – comme l’authentification multi-facteurs, la gestion avancée des états ou des intégrations de paiement – leur approche garantit des solutions performantes et adaptées. Les tarifs sont établis sur devis, selon la complexité et les besoins spécifiques du projet.
Conclusion
Ce guide a mis en lumière comment l'intégration d'API et de bibliothèques externes transforme Wized en une solution puissante pour développer des applications évolutives. Ces outils permettent d’ajouter des fonctionnalités avancées comme l’authentification, les paiements ou encore les animations, sans avoir à tout construire à partir de zéro. Le gain de temps est indéniable, comme le souligne Jonas Schäuffelen, CEO de Halbstark :
« Wized a révolutionné notre processus de développement en réduisant considérablement le temps nécessaire pour implémenter les mises à jour frontend et en améliorant les interactions utilisateur via Webflow »
[4].
Des exemples concrets montrent l’efficacité de cette approche dans des domaines variés, allant de la gestion d’étudiants aux plateformes e-commerce. Ils démontrent que l’association de Webflow, Wized et des API tierces constitue une alternative performante au développement traditionnel.
Pour tirer le meilleur parti de ces outils, il est essentiel de suivre certaines bonnes pratiques : sécuriser vos clés API, optimiser vos requêtes (par exemple avec la pagination) et gérer les erreurs avec rigueur. Ces ajustements peuvent transformer un projet fonctionnel en une application véritablement solide.
Dans cet environnement complexe, s’entourer d’un partenaire expérimenté peut faire toute la différence. Vanara accompagne les entreprises dans la mise en œuvre de ces intégrations techniques. Grâce à leur maîtrise du stack WWX (Webflow + Wized + Xano), ils proposent des solutions sur mesure, adaptées aux besoins spécifiques de chaque projet, qu’il s’agisse d’applications internes, de plateformes e-commerce ou de systèmes de gestion avancés. Les tarifs sont définis sur devis, en tenant compte de la complexité et des exigences du projet.
FAQs
Comment protéger vos clés API lors de l'utilisation de Wized ?
Pour sécuriser vos clés API avec Wized, il est crucial de ne jamais les intégrer directement dans le code client. À la place, conservez-les sur un serveur sécurisé ou utilisez un gestionnaire de secrets, et effectuez vos appels API via un point d’accès sécurisé intermédiaire. Avec Wized Request Helpers, vous pouvez facilement acheminer vos requêtes vers ce serveur sécurisé.
Prenez soin de limiter les permissions associées à vos clés API, comme les scopes, les adresses IP ou les domaines autorisés. Assurez-vous également que toutes les communications passent par des connexions chiffrées, comme HTTPS. Pour renforcer davantage la sécurité, pensez à régénérer vos clés à intervalles réguliers et surveillez les journaux d’activité pour repérer d’éventuelles anomalies. Ces bonnes pratiques permettent de sécuriser vos intégrations API tout en tirant le meilleur parti des outils offerts par Wized.
Quels bénéfices offre l’utilisation conjointe de Wized, Webflow et Xano ?
Associer Wized, Webflow et Xano ouvre la porte à la création d’applications interactives et performantes, sans nécessiter de connaissances techniques poussées. Avec Webflow, vous concevez visuellement une interface utilisateur à la fois élégante et fonctionnelle, sans écrire une seule ligne de code complexe. Wized, quant à lui, simplifie l’ajout de logique grâce à une approche low-code, évitant ainsi le recours à des frameworks comme React ou Vue. Enfin, Xano prend en charge la gestion des données via des API REST, offrant des fonctionnalités comme les opérations CRUD et les mises à jour en temps réel.
Cette combinaison permet de développer des applications fluides, réactives et sécurisées, tout en réduisant les complications techniques et en accélérant considérablement le processus de création.
Comment utiliser une bibliothèque JavaScript externe avec Wized ?
Pour intégrer une bibliothèque JavaScript externe dans Wized, commencez par sélectionner la bibliothèque souhaitée sur npm et obtenez son URL ESM via un service comme jsDelivr. Une fois l'URL récupérée, passez à l'éditeur de fonctions dans Wized et ajoutez une nouvelle fonction pour importer dynamiquement la bibliothèque avec import(). Voici un exemple pratique :
const lib = await import('https://esm.run/js-confetti');
const confetti = new lib.JSConfetti();
confetti.addConfetti();
Si votre code doit fonctionner en dehors de l'éditeur, assurez-vous de l'encapsuler avec window.Wized.push() afin de garantir que l'API Wized est correctement initialisée. Après avoir intégré la bibliothèque, testez votre configuration en prévisualisant le projet, puis publiez vos modifications.
Avec cette méthode, enrichir vos applications Wized avec des fonctionnalités avancées devient rapide et accessible, sans complexité inutile.