Fenêtre de chat : style, taille, panneau latéral et affichage mobile

Les couleurs donnent le ton, la forme fait le reste. Sous /app/projects/{id}, onglet Apparence, section Marque, vous trouverez deux groupes de réglages : Style (la forme plutôt que la couleur) et Fenêtre (l’apparence de la fenêtre ouverte). Sans sélection, les valeurs par défaut s’appliquent. Enregistrez avec Enregistrer ; l’aperçu sous Écran d’accueil du widget montre le véritable widget.

Les modèles de l’assistant de design définissent aussi ces réglages.

Style

• En-tête – gradient (par défaut), flat ou glass. S’applique à l’en-tête de l’écran d’accueil et à la barre de titre.
• Densité – normal (par défaut), compact ou airy. Espacement sur l’écran d’accueil et dans la conversation.
• Bulles – soft (par défaut, suit votre rayon des coins), round (18 px) ou square (4 px).
• Ombre – soft (par défaut), hard ou none. S’applique à la fenêtre, pas au bouton du chat.
• Avatar – round (par défaut) ou square.
• Champ de saisie – flat (par défaut) ou pill (très arrondi, avec des boutons ronds).
• Cartes – outlined (par défaut) ou flat. S’applique aux tuiles d’accueil, aux lignes d’aide et aux cartes dans la conversation.

Fenêtre

• Taille de fenêtre – normal (par défaut, 380 px de large), wide (440 px), narrow (340 px) ou tall (presque toute la hauteur de l’écran, au maximum 960 px). La hauteur normale est de 620 px, moins sur les petits écrans.
• Disposition – floating window (par défaut) ou side panel. Le panneau latéral occupe toute la hauteur sur le bord du côté du bouton du chat et glisse depuis ce bord. Le bouton s’efface pendant son ouverture. Le bouton de l’en-tête ferme le panneau.
• Arrière-plan – fond de la zone des messages : plain (par défaut), dots, grid ou gradient (une touche de votre couleur de marque).
• Taille du texte – normal (par défaut, 14 px), large (15,5 px) ou small (13 px). S’applique aux bulles et à la saisie, pas au bouton du chat.
• Animation d’ouverture – slide in (par défaut), zoom in, fade in ou none. Si le visiteur a activé la réduction des animations dans son système, l’animation est supprimée dans tous les cas.
• Bulle du visiteur – couleur des bulles des visiteurs : primary colour (par défaut, mélange clair de votre couleur de marque), accent colour ou neutral (grey). Ici aussi, le widget recalcule le texte jusqu’à ce qu’il soit lisible.

La taille et la disposition de la fenêtre ne prennent effet qu’à partir de 481 px de largeur d’écran. En dessous, le chat s’ouvre toujours en plein écran (voir ci-dessous).

Dans le code

Tous les réglages se trouvent dans l’identité visuelle, sous stil. Les valeurs sont les noms internes :

• kopf: verlauf, flach, glas
• dichte: normal, kompakt, luftig
• blase: weich, rund, eckig
• schatten: weich, hart, keiner
• avatar: rund, eckig
• eingabe: flach, pille
• karten: rahmen, flach
• fenster: normal, breit, schmal, hoch
• ansicht: schwebend, seite
• hintergrund: schlicht, punkte, raster, verlauf
• schrift: normal, gross, klein
• animation: gleiten, zoom, blenden, keine
• besucher: marke, akzent, neutral

Une valeur inconnue rétablit la valeur par défaut.

ReactiveChat('setBrand', { stil: { ansicht: 'seite', hintergrund: 'punkte', schrift: 'gross' } });

Dans le code d’intégration, avec data-rc-brand='{"stil":{"ansicht":"seite"}}', l’identité visuelle devient propre à cette page et prime sur votre compte ; voir Couleurs, police et thème.

Animations

Avec data-rc-motion dans le code d’intégration, contrôlez les animations : auto (par défaut, suit le réglage système du visiteur), reduced (aucun mouvement) ou full.

data-rc-motion="reduced"

En-tête

L’en-tête indique qui répond :

• Si une personne de votre équipe écrit, il affiche son nom affiché. Chaque membre le gère dans ses réglages personnels ; voir Équipe, console et notifications.
• Si l’assistant IA répond, il affiche son nom défini sous IA & connaissances → Assistant (« Ada » par défaut) ; voir Assistant IA.
• Sinon, le titre est « Chat ». Modifiez-le ainsi que la seconde ligne (« Nous sommes là », « Assistant IA ») sous Textes et langues, avec les clés header.title, header.subtitle_online et header.subtitle_bot.

Les avatars affichent la première lettre du nom et le signe ✦ pour l’assistant. Il n’est pas encore possible d’enregistrer des photos des membres de l’équipe.

L’en-tête comporte aussi une icône d’enveloppe pour recevoir la conversation par e-mail. Désactivez-la sous Règles et service → Transcription de la conversation par e-mail ; voir Disponibilité, formulaires et service.

La mention « Powered by reactive.chat »

Avec le forfait gratuit, la mention « Powered by reactive.chat » apparaît au bas de la fenêtre. À partir d’un forfait payant, vous décidez sous Apparence → reactive.chat dans le chat, avec le réglage Masquer « Powered by reactive.chat ». La valeur par défaut est alors : masqué. Le texte de cette mention ne peut pas être modifié.

Sur téléphone

Jusqu’à 480 px de largeur et, en orientation paysage, jusqu’à 480 px de hauteur, le chat s’ouvre en plein écran : sans coins arrondis, sur toute la hauteur visible, même lorsque le clavier à l’écran s’ouvre. Le champ de saisie utilise un texte de 16 px pour éviter le zoom du téléphone et les boutons mesurent au moins 44 px. Le bouton du chat s’efface pendant l’ouverture.

La taille de fenêtre et le panneau latéral ne s’appliquent pas sur téléphone. Les autres réglages de style, les couleurs et la taille du texte s’y appliquent. La taille du bouton sur téléphone se définit sous Le bouton du chat.