Personnaliser l’apparence

L’apparence du chat se règle dans Paramètres de l’App > Apparence. Une fois enregistrés, les changements arrivent sur votre site et dans votre app sans nouvelle version de votre code.

• Couleur de la marque : la couleur principale du chat.
• Logo : dans l’en-tête du chat, et à côté de vos réponses quand l’expéditeur affiché est l’App.
• Lanceur : le bouton rond qui ouvre le chat sur un site, avec l’icône par défaut ou votre image, en bas à droite ou en bas à gauche.
• Texte d’en-tête : sous le nom de l’App sur un site, tant que le Contact n’a pas écrit. Une app React Native ne l’affiche pas : son en-tête tient sur une ligne.
• Expéditeur affiché : le prénom et la photo du membre qui répond, ou seulement le nom de l’App.
• Badge « Propulsé par » : votre Plan dit si vous pouvez le masquer.

Le thème clair ou sombre sur un site

Sur un site, le chat prend le thème de la page, sans réglage. Il lit le thème que la page déclare, comme class="dark" ou data-theme="dark" sur <html>, sinon la couleur de son fond. Quand la page change de thème, le chat change avec elle.

Le thème clair ou sombre dans une app

Avec React Native, le chat suit le thème du téléphone. Passez colorScheme, "light" ou "dark", pour imposer celui de votre app.

import { useColorScheme } from "react-native";import { ZeanChat } from "@zean-chat/react-native";export function Chat() {  // Le thème choisi dans votre app, ici celui du téléphone  const scheme = useColorScheme() === "dark" ? "dark" : "light";  return <ZeanChat appKey="app_your_app_key" colorScheme={scheme} />;}

Le lanceur n’existe que sur le web : dans une app React Native, vous ouvrez le chat avec vos propres boutons. Voir Ouvrir et fermer le chat.