Codes

Codes ajoute sur toutes les pages du site du CSS (apparence) ou du JavaScript (script d'un autre service, comme un widget de chat). Pour Google Analytics, Tag Manager ou le pixel Facebook, passez plutôt par les extensions marketing, sans code.

Retrouvez cet écran

1. Tableau de bord Vivlab
2. /Site web
3. /Codes

Que voulez-vous faire ?

• Ajouter un widget de chat ou un script tiers
• Retoucher l'apparence avec du CSS
• Demander le code à l'Assistant Vivlab
• Couper un code sans le supprimer
• Plus de situations : Site web, cas pratiques

Ajouter un widget de chat ou un script tiers

Par exemple Crisp, Tawk.to, Tidio, une carte de chaleur ou un pixel publicitaire non listé.

1. Copiez l'extrait d'installation du service (la balise <script> complète).
2. Cliquez sur Créer un code et nommez-le (« Chat Crisp »).
3. Dans Insertion, choisissez Javascript et l'Emplacement du code demandé par le service (le plus souvent Dans la balise head).
4. Collez l'extrait dans l'éditeur Code, puis enregistrez.

Le code se charge sur tout le site dès l'enregistrement.

Retoucher l'apparence avec du CSS

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.

Créez un code en gardant Style CSS et Dans la balise head, écrivez vos règles dans l'éditeur Code, puis enregistrez. Avant, vérifiez que le réglage n'existe pas déjà dans Logo, couleurs et polices ou le panneau de style de l'éditeur.

Demander un code à l'Assistant Vivlab

Dans le formulaire d'un code, cliquez sur Assistant code et décrivez le résultat attendu et les pages concernées : l'assistant lit vos pages pour viser les bons éléments. Relisez le code écrit dans l'éditeur, puis enregistrez (rien n'est enregistré avant).

Couper un code sans le supprimer

Ouvrez le code et, dans la carte Statut, désactivez Activer / Désactiver, puis enregistrez. Il reste conservé, Inactif, et n'est plus chargé. Pour plusieurs codes, cochez-les et utilisez Plus d'actions (activer, désactiver, supprimer, exporter en CSV).

Bon à savoir

• Un code erroné peut casser le site (page blanche, scripts bloqués, formulaires inopérants). Testez-le, et en cas de problème en ligne désactivez-le avant de le corriger.
• Consentement aux cookies : ces scripts se chargent dès l'arrivée du visiteur, hors du bandeau de cookies Vivlab (réservé aux extensions marketing). Si votre outil dépose des cookies, utilisez son propre mécanisme de consentement.
• Pas développeur et outil non listé ? Ouvrez une Demande de support.

Tous les réglages

• Description du code (facultative) : aide à retrouver le code.
• Type de code : Style CSS (dans une balise <style>, balises <link> acceptées), Javascript (dans une balise <script>, extrait <script> complet accepté) ou Noscript (navigateurs sans JavaScript).
• Emplacement du code : Dans la balise head (styles, balises meta, suivi) ou Dans la balise body (au début du corps de la page).