Paramètres d’apparence

L’onglet Appearance est l’endroit où l’assistant prend son apparence. Il est organisé en cinq sections repliables, des choix simples jusqu’au contrôle complet au niveau CSS : allez aussi loin que nécessaire.

Mise en page et lanceur

Quand utiliser un bouton flottant : chaque fois que vous intégrez l’assistant sur un site qui a son propre contenu et que vous ne voulez pas que le chat lui dispute l’espace. Le bouton reste dans un coin et les visiteurs l’ouvrent quand ils en ont besoin.

Quand l’intégrer dans la page : quand l’assistant est le contenu, par exemple une page de support dédiée, un portail de recherche ou la page d’accueil d’un centre d’aide.

Thème de base

Le thème de base est votre point de départ. Choisissez celui qui se rapproche le plus de l’apparence de votre site, puis affinez avec la palette ou l’éditeur de thème.

Personnaliser la palette de couleurs du thème

L’éditeur de palette affiche un sélecteur de couleur pour chaque variable CSS de couleur utilisée par l’assistant. Chaque sélecteur indique le nom de la variable (par ex. --brand) et sa valeur hexadécimale actuelle. Il suffit de définir celles que vous voulez modifier : tout le reste conserve la valeur du thème de base. Les couleurs sont regroupées par zone :

Marque et fondations : l’apparence de base : --brand (accent principal), --brand-2 (secondaire), --accent, --bg-base (fond de base), --bg-deep, --surface, --surface-paper, --text, --text-strong, --text-muted, --link, --border, --error, --white.

Bouton flottant et en-tête : --floating-button-bg, --floating-button-text, --floating-button-avatar-bg, --floating-header-bg, --floating-header-text, --floating-header-title.

Pied de page : --footer-bg, --footer-button-text, --footer-button-hover-text, --footer-secondary-hover-text.

Recherche et saisie : --header-bg, --search-box-bg, --search-input-text, --input-bg, --input-border.

Boutons et actions : --button-primary-bg, --button-primary-hover-bg, --button-hover, --scroll-button-bg, --scroll-button-hover-bg.

Messages : --assistant-avatar-bg, --assistant-avatar-text, --assistant-response-border, --user-message-bg, --user-message-text.

Suggestions : --hint-text, --hint-border, --form-hint-bg, --form-hint-border.

Code et citations : --code-bg, --code-text, --blockquote-text, --blockquote-border, --blockquote-strong-text.

Tableaux : --table-head-bg.

Onglets : --tab-text, --tab-active-text, --tab-active-border.

États et réactions : --success-bg, --success-border, --success-text, --reaction-hover-bg.

Barre de défilement : --scrollbar-thumb-bg.

Fenêtres modales et overlays : --modal-bg, --modal-backdrop-bg, --overlay-muted-bg, --overlay-backdrop-bg, --overlay-panel-bg, --overlay-header-text, --overlay-search-bg, --overlay-modal-bg.

Verre et halo : --glass-bg, --glass-border, --brand-glow, --accent-glow.

Exemple de palette

Pour correspondre à une marque dont la couleur principale est le bleu sur fond blanc, définissez :

• --brand → #1a73e8
• --button-primary-bg → #1a73e8
• --accent → #1a73e8

Pour que le bouton flottant s’accorde avec une barre de navigation sombre :

• --floating-button-bg → #1e293b
• --floating-button-text → #ffffff
• --floating-header-bg → #1e293b
• --floating-header-text → #ffffff

Personnaliser les paramètres du thème

Sous la palette de couleurs, la section Override theme settings expose les variables autres que les couleurs (polices, dimensions, bordures, ombres et effets) sous forme de champs texte regroupés par catégorie :

Typographie : --font-base (police principale), --font-code (blocs de code), --font-assistant (réponses de l’assistant). Saisissez une pile de polices CSS, par ex. 'Inter', sans-serif.

Mise en page et dimensions : --floating-bottom-offset, --floating-right-offset (position du bouton flottant), --container-width, --container-height (dimensions du conteneur de l’assistant).

Bordures et contours : --card-border-style, --article-table-border, --modal-header-border, --overlay-panel-border, --overlay-search-border, --loading-spinner-border.

Ombres et profondeur : --shadow-soft, --shadow-raised, --shadow-light, --shadow-subtle, --shadow-minimal, --shadow-elevated, --shadow-premium, --floating-button-shadow, --floating-button-hover-shadow, --overlay-panel-shadow.

Dégradés et effets : --brand-gradient-line, --brand-halo-welcome, --skeleton-shimmer, --glass-shimmer, --glass-blur.

Exemple de paramètres

Pour utiliser une police personnalisée et repositionner le bouton flottant :

• --font-base → 'Inter', sans-serif
• --font-assistant → 'Inter', sans-serif
• --floating-bottom-offset → 24px
• --floating-right-offset → 24px

Pour adoucir les ombres :

• --shadow-soft → 0 2px 8px rgba(0,0,0,0.06)
• --shadow-raised → 0 4px 16px rgba(0,0,0,0.08)

Éditeur de thème personnalisé

Pour un contrôle complet au niveau CSS, le Custom theme editor, en bas de l’onglet Appearance, ouvre un éditeur de code Monaco dans lequel vous écrivez un objet de thème en JSON, fusionné en profondeur par-dessus tout le reste. C’est là que vous ciblez des composants précis par leurs sélecteurs CSS, ajoutez des règles responsives ou remplacez n’importe quelle propriété de style.

Charger les valeurs par défaut

Cliquez sur Load default theme definition pour remplir l’éditeur avec le thème calculé actuel, c’est-à-dire le résultat de votre thème de base + palette + paramètres, entièrement développé. Vous disposez ainsi d’un point de départ fonctionnel : trouvez la propriété à modifier, changez sa valeur et enregistrez. Vous n’avez jamais à écrire un thème de zéro.

Structure

L’objet de thème utilise la syntaxe CSS-in-JS (propriétés en camelCase) et cible les composants de l’assistant par leurs sélecteurs CSS :

{
  ":root": {
    "--brand": "#1a73e8",
    "--text": "#1e293b"
  },
  ".skdwn-assistant-response": {
    "backgroundColor": "#f8fafc",
    "borderRadius": "12px",
    "padding": "16px"
  },
  "#skdwn-floating-button": {
    "boxShadow": "0 4px 12px rgba(0,0,0,0.15)"
  },
  "@media (max-width: 600px)": {
    "#skdwn-main-container": {
      "fontSize": "14px"
    }
  }
}

Ce que vous pouvez cibler

Exemple : bulles arrondies avec une police personnalisée

{
  ":root": {
    "--font-base": "'Inter', sans-serif",
    "--font-assistant": "'Inter', sans-serif"
  },
  ".skdwn-assistant-response": {
    "borderRadius": "16px"
  },
  ".skdwn-user-request": {
    "borderRadius": "16px"
  }
}

Exemple : bouton flottant circulaire

{
  "#skdwn-floating-button": {
    "borderRadius": "50%",
    "width": "56px",
    "height": "56px"
  }
}

Comment les quatre couches se combinent

L’assistant construit son apparence finale en fusionnant quatre couches dans l’ordre, chacune remplaçant la précédente :

1. Thème de base : le préréglage choisi (default, light, dark, purple, blue, otherBlue).
2. Palette de couleurs : les sélecteurs de couleur. Ils remplacent les couleurs du thème de base.
3. Paramètres du thème : les champs texte pour les polices, ombres, bordures et dimensions.
4. JSON de thème personnalisé : l’éditeur de code. Il est fusionné en profondeur par-dessus tout le reste et a donc le dernier mot.

La plupart des assistants n’ont besoin que d’un thème de base et de quelques couleurs de palette. Les paramètres du thème servent à ajuster polices et espacements sans écrire de JSON. L’éditeur de thème personnalisé sert au contrôle complet, au niveau CSS, de composants précis.

Dépannage

• Si le texte est difficile à lire, augmentez le contraste entre les couleurs du texte et du fond dans la palette.
• Si le widget semble trop grand ou trop petit, essayez de changer de template de base (default ou overlay) ou ajustez --container-width et --container-height dans les paramètres du thème.
• Les couleurs s’appliquent immédiatement dans l’aperçu intégré : servez-vous-en pour itérer rapidement.
• Si le JSON du thème personnalisé affiche des erreurs, vérifiez les virgules finales, les guillemets manquants ou les accolades mal appariées. Utilisez Load default theme definition pour partir d’un objet valide.
• Le camelCase est obligatoire pour les propriétés CSS dans l’éditeur de thème personnalisé (backgroundColor, et non background-color), mais les noms de variables CSS gardent leurs tirets (--brand, --text).

Documentation associée

• Ouvrir l’aperçu intégré