Thème et variables CSS

Le widget Recorder peut adopter les couleurs, les polices et la mise en page d’une marque par trois canaux distincts. Ils se combinent, mais chacun a son propre responsable et sa propre durée de vie.

Avant cette page

Cette page suppose connue la structure de configuration présentée à la page précédente, en particulier ses clés styles et layout. Configuration

La clé de configuration styles

L’objet de configuration accepté par le widget comporte une clé styles : un dictionnaire de variables CSS. C’est la façon statique, maîtrisée par l’intégrateur, d’habiller le widget aux couleurs de la marque — définie une fois, livrée avec le reste de la configuration, et identique pour chaque visiteur.

styleOverrides en React

Le composant React accepte le même mécanisme sous forme de prop plutôt que de champ de configuration imbriqué.

tsx

import { LivstickWidget } from "@livstick/widget-react-v2";

<LivstickWidget
  uid="code"
  domain="example.com"
  styleOverrides={{ "--lv-accent": "#0f62fe" }}
/>

styleOverrides est un dictionnaire de variables CSS, appliqué par-dessus ce que définit déjà la clé styles de la configuration.
Il existe uniquement côté React : le Custom Element et le loader classique n’exposent pas de prop équivalente, seulement la clé config.styles.

Couleurs et polices dynamiques fournies par le serveur

Au-delà de la configuration statique, le widget peut aussi recevoir des couleurs et des polices calculées côté serveur — des valeurs de marque résolues par plateforme plutôt que codées en dur à l’intégration. Ces valeurs sont filtrées par sécurité, puis appliquées comme styles locaux sur les éléments rendus, sans être injectées dans une feuille de style.

La feuille de style et l’isolation par Shadow DOM

La feuille de style principale du widget est externe : elle est publiée sous @livstick/widget-react-v2/style.css et, pour le Custom Element, peut être chargée via l’attribut style-url. Le Custom Element lui-même est isolé par Shadow DOM : le CSS de la page hôte ne peut pas l’atteindre, et les styles du widget ne peuvent pas déborder sur la page hôte. Les trois canaux de personnalisation décrits plus haut opèrent tous à l’intérieur de cette frontière.