--- title: "Intégrer du JavaScript sur Webflow : les bonnes pratiques" description: "Marre de galérer avec le custom code Webflow ? Découvrez une méthode propre et moderne pour intégrer du JavaScript avec Git, Vite, Netlify & co." url: "https://lonestone.io/blog/comment-utiliser-du-js-sur-votre-site-webflow-la-bonne-facon" --- [Lonestone](/) ⟩ [Blog](/blog) # Comment utiliser du JS sur votre site Webflow (la bonne façon) 17 mars 2023 · 4 min de lecture Cela fait un peu plus de 2 ans que j’interviens sur des projets Webflow, pour de l’intégration ou pour coder des fonctionnalités custom. Au début j’utilisais le custom code directement dans Webflow, mais le temps que met le site pour se republier + l‘absence d’auto-complétion et tout le tralala habituel des IDE me faisait perdre pas mal de temps, surtout pour fixer des bugs. Par la suite, j’ai décidé de ne plus passer par Webflow pour le JS. Je demandais le lien de la pré-production du site et je codais dans la console dévelopeur. Je gagnais du temps + un tout petit peu d’auto-complétion et ça me permettait d’envoyer un code fonctionnel directement au client. Par contre, pour implémenter des libs externes ou pour organiser un projet un peu plus ambitieux ça commençait à être limite. En plus, utiliser l’historique Slack comme “outil de versionning” c’est vraiment pas une bonne idée.‍ Puis un beau jour, je me suis motivé à trouver la meilleure organisation pour coder en JS. Git, un vrai IDE, Yarn, ViteJs, TypeScript, ESLint et Pettier ENFIN réunis pour Webflow. Ce setup m’a fait gagner un temps inconsidérable ! En plus d’être pratique pour moi, il l’est pour les clients et les intégrateurs Webflow. Il suffit de coller un script dans le custom code de Webflow et de lancer une commande sur notre ordi et pouf vous voilà en capacité de coder n’importe quel projet JS avec vos libs et votre stack préférées. La cerise sur le gâteau est qu’avec Netlify + GitHub, on a un build automatique de notre code et un lien personnalisable pour le récupérer. Plus besoin d’envoyer des versions du code à votre client. Tout est automatisé.‍ ## Les différentes façon d’intégrer du JS sur un projet Webflow Je pense qu’une petite revue des différentes façons de gérer son JS avec Webflow est importante pour comprendre les soucis que j’ai cherché à régler avec mon template.‍ ### Utiliser le custom code directement dans Webflow Pas top car on a pas une bonne coloration syntaxique ni d’auto-complétion. On est limité à un certains nombre de caractères. À chaque modification, il faut republier le site. Si le dev JS n’est pas l’intégrateur sur Webflow il faut envoyer le nouveau code, attendre que la personne le change, publie etc… C’est long et fastidieux. ### Utiliser des fichiers JS au format .txt On peut utiliser un vrai IDE et on a plus de limite de caractères. Par contre, à chaque modification, il faut changer l’extension du fichier JS en .txt, mettre le fichier sur Webflow et republier le site. On peut faire mieux ! ### Utiliser un bundler (ViteJs), git et un CDN La perfection ! * On peut utiliser l’écosystème de NodeJs, avoir accès à tous les packages JS disponibles sur NPM, convertir notre code trop moderne en un JS compatible avec la grande majorité des navigateurs, optimiser notre code en production en le minimisant, avoir nos fichiers JS dispos sur un serveur de développement en local lors du développement, ce qui fait qu’on a pas à republier le site à chaque fois qu’une ligne est modifié * On a le HMR qui actualise la page à chaque fois qu’on sauvegarde nos fichiers * On peut séparer notre code dans différents fichiers pour une meilleure organisation * On peut ajouter des plugins à ViteJs pour faire tout un tas de trucs trop cool * On peut utiliser git et Github pour héberger notre code et le versionner * On peut plugger tout ça à Netlify pour qu’à chaque push Netlify lance le build du JS et nous le serve sur une URL personnalisée ! On peut même utiliser TypeScript, React, Vue, Preact etc… le tout gratuitement ## Les templates JS et TS avec ViteJs J’ai créé deux templates, un qui utilise du JS vanilla et l’autre qui utilise Typescript. La documentation FR et EN se trouve dans les ReadMe des projets. ### Template ViteJs + JS [https://github.com/armandsalle/vite-javascript-webflow](https://github.com/armandsalle/vite-javascript-webflow) ### Template ViteJs + TS [https://github.com/armandsalle/vite-typescript-webflow](https://github.com/armandsalle/vite-typescript-webflow) J’espère que vous pourrez en profiter autant que moi, et si vous avez des questions n’hésitez pas à me contacter sur Twitter [@ArmandSalle](https://twitter.com/ArmandSalle) 🥨 ![Intégrer du JavaScript sur Webflow : les bonnes pratiques](/.netlify/images?url=_astro%2Fthumbnail.B2HkjgBP.jpg&w=1920&h=960&dpl=69e9deed41371b000857cf89) Sommaire [1 / Les différentes façon d’intégrer du JS sur un projet Webflow](#les-différentes-façon-dintégrer-du-js-sur-un-projet-webflow) [2 / Les templates JS et TS avec ViteJs](#les-templates-js-et-ts-avec-vitejs) Sommaire 1 / Les différentes façon d’intégrer du JS sur un projet Webflow 2 / Les templates JS et TS avec ViteJs Lonestone est une agence qui conçoit et développe des produits web et mobile innovants intégrant de l'IA. Nos experts partagent leurs expériences sur le blog. Contactez-nous pour discuter de vos projets ! [En savoir plus sur Lonestone](/) [Parler à un expert](/contact) ![](/_astro/use-case-corner.3qL77H9h.png) Besoin d'accompagnement ? Nos experts sont disponibles pour discuter de votre projet. [Parler à un expert](/contact) ## On continue la lecture ? [Tous les articles](/blog) [![Le SEO technique n’est pas une option](/.netlify/images?url=_astro%2Fthumbnail.D7bGGwb3.jpg&w=1920&h=1280&dpl=69e9deed41371b000857cf89) Le SEO technique n’est pas une option Le SEO technique est indispensable pour assurer la visibilité de votre site ou web app. Découvrez les bonnes pratiques à connaître pour éviter de disparaître dans les résultats de recherche. ](/blog/le-seo-technique-nest-pas-une-option)[![Pourquoi j’ai (re)adopté le style inline grâce à Stitches](/.netlify/images?url=_astro%2Fthumbnail.RWWUT00S.jpg&w=1920&h=1280&dpl=69e9deed41371b000857cf89) Pourquoi j’ai (re)adopté le style inline grâce à Stitches Entre CSS-in-JS, Atomic Design et composants utilitaires, Stitches m’a réconcilié avec le style inline. Retour d’expérience et réflexion sur les bonnes pratiques modernes. ](/blog/comment-stitches-ma-reconcilie-avec-le-style-inline)[![Créer sa startup : 6 questions préalables](/.netlify/images?url=_astro%2Fthumbnail._Y1ILV-l.jpeg&w=1400&h=892&dpl=69e9deed41371b000857cf89) Créer sa startup : 6 questions préalables Créer sa startup, c’est plus qu’une idée brillante. Voici 6 questions clés à se poser avant de se lancer, issues de 10 ans d’expérience terrain avec des porteurs de projet. ](/blog/creer-sa-startup-6-questions-prealables) [Tous les articles](/blog) ## Nos guides ### Guide de l'IA générative [ 01\. IA, Machine Learning & Deep Learning ](/ai/deep-learning)[ 02\. LLM (Large Language Model) : définition et fonctionnement ](/ai/llm)[ 03\. RAG + MCP : Architecture pour agents IA ](/ai/rag-mcp)[ 04\. Agents IA : définition et cas d'usage ](/ai/agents-ia)[ 05\. Boostez vos logiciels avec l'intégration de l'IA ](/ai/integration-ia)[ 06\. Meilleurs outils IA pour les entreprises ](/ai/outils-ia) ### Guide pour créer un SaaS IA [ 01\. Construire un SaaS IA rentable : la méthode qui fonctionne ](/creer-saas-ia/roadmap)[ 02\. Comparatif LLM 2026 : quel modèle choisir pour votre SaaS ? ](/creer-saas-ia/comparatif-llm-saas)[ 03\. Héberger un SaaS IA en France : performances, coûts et souveraineté ](/creer-saas-ia/heberger-ia)[ 04\. Framework d’évaluation IA : pourquoi et comment le mettre en place ](/creer-saas-ia/evaluation)[ 05\. MCP (Model Context Protocol) : le standard pour connecter IA et logiciels ](/creer-saas-ia/mcp)[ 06\. Bien choisir entre RAG et ses alternatives : ce que personne ne vous explique vraiment ](/creer-saas-ia/rag)[ 07\. Comment concevoir un copilote IA qui crée de la vraie valeur dans un SaaS ](/creer-saas-ia/copilote-ia)[ 08\. POC IA : comment valider votre idée avant d’investir dans un SaaS IA ](/creer-saas-ia/poc) ### Blog de Lonestone Retrouvez nos derniers articles sur le développement web, l'IA, le product design et les retours d'expérience de nos projets. [Accéder au blog](/blog) Lonestone apporte son expertise product à 200+ grands comptes, PME et startups depuis 11 ans. Avec notre équipe senior et nos méthodes rodées, vous pouvez comptez sur une livraison rapide d'un produit robuste vraiment utile. ## Nos solutions [ 01\. Intégration IA pour éditeurs logiciels ](/solutions/integration-ia-editeurs)[ 02\. Automatisation de process avec IA ](/solutions/automatisation-process-ia)[ 03\. Création de SaaS pour startup ](/solutions/creation-saas)[ 04\. Développement d'outils internes ](/solutions/developpement-outil-metier)[ 05\. Création d'app mobile ](/solutions/creation-app-mobile)[ 06\. Création de site web ](/solutions/creation-site-web)[ 07\. Création de CRM sur mesure ](/solutions/crm-sur-mesure) ## On discute de votre projet ? Échange gratuit et sans engagement, directement avec un expert du sujet. Devis sous 48h. [Demander un devis](/contact) Prendre rdv Contacter l'équipe de Lonestone