--- title: "Codes : ajouter du CSS et du JavaScript" description: "Injectez du CSS ou du JavaScript sur l'ensemble de votre site pour modifier son apparence ou brancher un script tiers non couvert par les extensions standard." url: https://docs.vivlab.com/sections/codes --- # Codes Dans **Codes**, vous ajoutez des instructions qui s'appliquent à l'ensemble du site. Le **CSS** modifie son apparence ; le **JavaScript** peut ajouter un comportement ou connecter un outil fourni par un autre service. Cette option sert lorsque les [extensions marketing](https://docs.vivlab.com/sections/plugins.md) ne prennent pas en charge l'outil souhaité. Cette fonctionnalité avancée demande des bases de développement web. Venez ici lorsque vous devez ajouter un style CSS qui n'est pas couvert par les thèmes, que vous souhaitez intégrer un script fourni par un autre service (widget de chat, outil d'A/B testing, pixel publicitaire spécifique…), ou que vous voulez désactiver temporairement un code existant sans le supprimer. ::: details Lire les étapes de la vidéo 1. — Dans Codes, cliquez sur « Créer un code ». 2. — Le code est actif et utilise le format CSS par défaut. 3. — Cliquez dans le nom, puis saisissez Badge promo. 4. — Cliquez dans l’éditeur et ajoutez une règle limitée à .promo-note. 5. — La règle ajuste légèrement l’espacement des lettres du badge. 6. — Cliquez sur « Enregistrer ». 7. — Le code CSS est enregistré et visible. 8. — Badge promo apparaît comme Style CSS avec l’état Visible. ::: ## Codes Cette section liste tous les codes personnalisés déjà ajoutés à votre site, avec leur **Nom**, leur **Type** (Style CSS ou Javascript) accompagné de son emplacement (`head` ou `body`), la date de **Dernière édition** et leur **État** (Visible ou Inactif). Cliquez sur une ligne pour ouvrir le code et le modifier ; l'interrupteur **Activer / Désactiver** en haut du formulaire coupe le code sans le supprimer. En sélectionnant plusieurs lignes, le menu **Plus d'actions** permet de les activer, les désactiver, les supprimer ou les exporter en fichier CSV. Pour ajouter un nouveau code, cliquez sur **Créer un code**. Choisissez le **Type de code** (Style CSS ou Javascript) et l'**Emplacement du code** (balise `head` ou `body`), nommez votre code pour le retrouver facilement (la description est facultative), puis collez son contenu dans l'éditeur. Enregistrez pour appliquer immédiatement le code à votre site. ::: warning Attention Une erreur dans un code injecté peut casser l'affichage de votre site ou bloquer son fonctionnement (page blanche, scripts qui plantent, formulaires inopérants). Testez votre code avant de l'enregistrer, et désactivez-le immédiatement si un dysfonctionnement apparaît en ligne plutôt que de chercher à corriger sous pression. ::: ::: info Vous n'êtes pas développeur ? Cette section suppose des bases minimales en HTML, CSS et JavaScript. Si vous voulez ajouter un script fourni par un autre service (chat, pixel, analytics) sans savoir coder, regardez d'abord [**Extensions marketing**](https://docs.vivlab.com/sections/plugins.md) : les services les plus courants y disposent déjà d'un champ dédié. Pour un cas spécifique qui n'y figure pas, vous pouvez ouvrir une [**Demande de support**](https://docs.vivlab.com/sections/supports-tickets.md) : nous pouvons vous accompagner sur la mise en place. ::: ## Demander un code à Assistant Vivlab Le bouton **Assistant code** ouvre une discussion à côté de l’éditeur. Décrivez le résultat attendu et précisez les pages concernées. Relisez le code proposé avant d’enregistrer : la discussion ne valide pas le formulaire à votre place.