Comment intégrer du Javascript dans Webflow

Comment intégrer du Javascript dans Webflow

Résumez cet article avec une IA
min
de lecture
Publié le
July 6, 2021
Mis à jour le
This is some text inside of a div block.
Et si on bossait ensemble ?
+ 350 projets réalisés
100% de satisfaction
Éligibles CII
Devis gratuit

Pourquoi utiliser Javascript dans un site Webflow ?

En effet, la question mérite d'être posée : pourquoi s'embêterait-on à écrire du code et à l'intégrer à un site sur une plateforme qui existe justement pour créer des sites sans code ? La réponse est simple : inclure quelques portions de Javascript permettra de faire passer votre site à la vitesse supérieure grâce à des animations poussées, du contenu dynamique, etc.

Comment utiliser Javascript avec Webflow ?

Le JS (et HTML/CSS) saisi dans la balise Head est appliqué à l'ensemble de votre site et permet de lier des ressources externes, d'ajouter des métadonnées et d'utiliser des styles personnalisés dans votre document. Pour ce faire, allez dans Project Settings > Custom Code

Un peu plus bas sur la même page, la partie Footer Code vous permet d'entrer du JS (et HTML/CSS) dans la balise Body. Le code saisi dans cette balise est appliqué à l'ensemble de votre site et permet d'y ajouter des éléments tels que des scripts.

utiliser javascript avec Webflow

Si vous ne voulez inclure du code personnalisé que sur une seule et unique page et non tout le site, allez dans les paramètres de votre page et choisissez où vous souhaitez mettre votre code.

utiliser JS dans Webflow
Besoin d'aide ?
Contactez un expert
Ça s'agite là-bas dedans ?

Vos questions,
nos réponses !

Où placer le code JavaScript dans Webflow pour qu'il fonctionne ?

Project Settings > Custom Code = site entier. Page Settings > Before = page spécifique. Pro tip : mettez vos scripts juste avant pour de meilleures perfs !

Peut-on utiliser jQuery dans Webflow ?

jQuery est déjà là ! Pas besoin de l'importer. Utilisez $ ou jQuery directement. Mais franchement, en 2024, vanilla JS fait souvent le job plus proprement et plus rapidement.

Le JavaScript personnalisé affecte-t-il les performances du site ?

Mal codé = site qui rame. Bien fait = impact minimal. Minifiez, utilisez async/defer, évitez les animations JS (préférez CSS). Testez avec Lighthouse, visez le score 90+ !

Ma question est plus complexe ?

Réserver un call avec un expert
Contactez NocodeFactory
Assez parlé,
à vous de jouer !
🥳 Estimation gratuite !
Merci ! Votre message a bien été envoyé 🥳
😿 Une erreur est survenue. Merci de recommencer
+ 350 projets
déjà réalisés