Como podemos axudarlle?

Cóntenos brevemente de que se trata; responderémoslle por correo electrónico.

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.
Ir á páxina de inicio

Couleurs, police et thème

Couleur de marque, accent, surfaces personnalisées, rayon des coins, police, thèmes clair et sombre, modèles et CSS personnalisé : comment le widget garde chaque texte lisible.

Le widget reprend la couleur de votre marque, votre police et, si vous le souhaitez, tout un ensemble de couleurs personnalisées. Il recalcule les couleurs pour que chaque texte reste lisible sur chaque surface. Vous choisissez votre couleur, le widget s’occupe du contraste.

Vous trouverez tous les réglages de cette page sous /app/projects/{id}, dans l’onglet Apparence, section Marque. Seule exception : le jeu de couleurs (clair, sombre, automatique) se trouve dans l’onglet Installation, sous Données de base.

L’assistant de design

En haut de la section Marque, un assistant vous guide en quatre étapes :

  1. Style – 18 modèles prêts à l’emploi, filtrables par Clair, Sombre, Professionnel, Ludique, Chaleureux, Froid et Minimal. Ils comprennent notamment Klar, Nacht, Boutique, Support-Desk, Minimal, Corporate, Ozean, Graphit et Espresso.
  2. Couleurs – couleur principale et accent, choix rapide parmi huit paires de couleurs et choix des surfaces : par défaut, claires, sombres ou personnalisées.
  3. Forme – style de la fenêtre, rayon des coins, forme et taille du bouton du chat.
  4. Terminé – un récapitulatif.

L’assistant n’enregistre rien lui-même. Il remplit seulement les champs situés en dessous ; rien n’est enregistré tant que vous n’appuyez pas sur Enregistrer. La miniature de l’assistant est une esquisse. Le véritable widget, avec vos valeurs, apparaît dans l’aperçu de la section Écran d’accueil du widget.

Pour affiner les réglages, développez Tous les réglages un par un. La police et le CSS personnalisé ne sont disponibles qu’à cet endroit.

Les champs

Seules les couleurs au format #rrggbb à six chiffres sont valides. Les formes courtes comme #f00 ou rgb(…) sont ignorées et remplacées par la valeur par défaut.

Surfaces et texte

Sous Surfaces et texte, vous pouvez définir cinq autres couleurs si nécessaire. Chacune dispose d’une case couleur personnalisée :

Sans cocher la case, le widget utilise l’ensemble de couleurs adapté au site, clair ou sombre. La valeur du champ est alors un point de départ, pas une mesure des couleurs utilisées. En cochant la case, vous appliquez votre couleur.

Si vous définissez seulement un arrière-plan personnalisé, le widget en déduit le reste : surface des bulles, texte, texte secondaire et séparateurs.

Lisibilité : ce que le widget recalcule

Les clients choisissent la couleur de leur marque, pas une couleur lisible. Le widget vérifie donc chaque combinaison de texte et de surface pour garantir un rapport de contraste d’au moins 4,5:1. C’est le seuil des WCAG 2.x pour le texte normal.

Les éléments recalculés sont indiqués dans votre compte, juste sous le formulaire, à la ligne Recalculé pour que le texte reste lisible. Un jaune clair utilisé comme couleur de texte apparaît donc plus foncé dans le widget que la valeur saisie ; cette ligne vous en indique la raison.

Sur votre page, vous pouvez aussi consulter vous-même les valeurs mesurées :

ReactiveChat('brandCheck');   // list of pairings with measured and required contrast
ReactiveChat('brandTokens');  // the colours actually used in the widget

Clair, sombre ou comme le site

Sous Installation → Données de base → Jeu de couleurs du widget, choisissez :

En mode automatique, le widget examine les éléments suivants, dans cet ordre :

  1. la couleur d’arrière-plan de votre page au centre de l’écran,
  2. la valeur CSS color-scheme de <html>, si elle vaut exactement dark ou light,
  3. les indicateurs courants sur <html> ou <body>, comme la classe dark ou data-theme="dark",
  4. enfin, le réglage système du visiteur.

Si votre page passe du clair au sombre ou inversement, le widget suit ce changement. Il vérifie aussi de nouveau le thème à l’ouverture de la fenêtre.

Dans le code, vous définissez le thème dans le code d’intégration ou pendant l’exécution. Ce réglage prime sur celui du compte :

<script src="https://cdn.reactive.chat/loader.js"
        data-rc-site-key="SITE_KEY"
        data-rc-theme="dark"
        async></script>

ReactiveChat('setTheme', 'dark');   // 'light', 'dark' or 'auto'

Avec setTheme, le widget mémorise le choix dans le navigateur du visiteur. setTheme('auto') le supprime. Cela convient à un sélecteur clair/sombre que vous proposez sur votre page.

Définir les couleurs dans le code

Pour certaines pages, par exemple une campagne, vous pouvez définir l’identité visuelle dans le code d’intégration ou pendant l’exécution. Les noms des champs sont :

ReactiveChat('setBrand', { primary: '#0F766E', accent: '#F59E0B', radius: 8 });

setBrand recalcule immédiatement le contraste et les couleurs dérivées, sans reconstruire le widget. null supprime une valeur et rétablit la valeur par défaut.

Dans le code d’intégration, l’attribut s’appelle data-rc-brand et accepte du JSON :

<script src="https://cdn.reactive.chat/loader.js"
        data-rc-site-key="SITE_KEY"
        data-rc-brand='{"primary":"#0F766E","accent":"#F59E0B"}'
        async></script>

Important – qui l’emporte, le code d’intégration ou le compte ? Le code généré par votre compte contient déjà la couleur de votre marque, le rayon, ainsi que la forme et la taille du bouton du chat. Il s’agit seulement de l’état initial, pour que le bouton apparaisse immédiatement dans la bonne couleur. Dès que le widget reçoit les réglages du serveur, ceux du compte s’appliquent intégralement.

Si vous ajoutez toutefois un champ supplémentaire, quel qu’il soit, à data-rc-brand, par exemple accent, stil ou un libellé, l’identité visuelle du code d’intégration devient propre à cette page. Elle prime alors sur votre compte. Seul le mode d’affichage « Uniquement via vos propres liens » défini dans votre compte reste applicable à cette page. De plus, cette page ne participe à aucun test A/B.

Si vous changez la couleur de marque dans votre compte, recopiez ensuite le code d’intégration sous Installation. Sinon, l’ancienne couleur apparaît brièvement au chargement de la page.

Le fonctionnement du code d’intégration et les autres possibilités (window.ReactiveChatSettings, ReactiveChat('boot', …)) sont décrits dans Intégration technique.

CSS personnalisé

Sous Tous les réglages un par un → CSS personnalisé, saisissez le CSS à appliquer en dernier, après toutes les autres règles.

.rc-launcher { box-shadow: 0 0 0 4px #fff; }

Dans le code, vous pouvez faire de même avec customCss, par exemple dans ReactiveChat('boot', { customCss: '…' }) ou avec l’attribut data-rc-custom-css.

Logo dans l’en-tête de la fenêtre

Le plus simple est de renseigner le logo dans votre compte : Projet → Apparence → Marque, champ Logo (adresse). Il apparaît alors dans l’en-tête de la fenêtre de chat, au plus tard une minute après l’enregistrement.

Dans le code, logo permet aussi de définir la hauteur, le texte alternatif et la position, par exemple dans le bouton du chat. Un logo défini dans le code prime sur le champ du compte :

<script src="https://cdn.reactive.chat/loader.js"
        data-rc-site-key="SITE_KEY"
        data-rc-logo='{"src":"https://www.example.com/logo.svg","alt":"Example Ltd","height":24,"placement":"header"}'
        async></script>

Le logo de l’écran d’accueil se définit facilement dans votre compte ; voir L’écran d’accueil du chat.

Si l’affichage ne correspond pas à vos attentes

Última actualización: