Le bouton du chat : forme, taille, icône, libellé et position
Le bouton qui ouvre le chat : forme, taille sur ordinateur et téléphone, icône, libellé et seconde ligne, affichage, 20 modèles, position et évitement des barres.
Le bouton du chat, ou lanceur, se trouve dans un coin inférieur de la page et permet aux visiteurs d’ouvrir le chat. Configurez-le sous /app/projects/{id}, onglet Apparence, section Marque. L’aperçu en direct Voici votre bouton du chat montre immédiatement chaque modification. Vous enregistrez avec Enregistrer et la modification parvient aux visiteurs dans la minute.
La couleur du bouton est votre couleur principale ; voir Couleurs, police et thème.
Modèles de bouton du chat
20 combinaisons prêtes à l’emploi, par exemple « Assistant virtuel – Répond en 2 min », « Une question ? », « Service client – Lun–Ven 8 h–18 h » ou « Assistant IA – Répond en quelques secondes ». Un clic remplit la forme, l’icône, le libellé, la seconde ligne, l’affichage et la taille. Vos couleurs restent inchangées ; rien n’est enregistré avant Enregistrer. Adaptez ensuite les textes.
Les champs
- Forme –
circle(par défaut),rounded,square,speech bubbleouleaf. Pour la bulle, un coin pointu est orienté vers le coin de l’écran. Pour la feuille, deux coins opposés sont petits. - Taille (px) – de 44 à 72, 56 par défaut. 44 est la plus petite zone encore facile à toucher de manière fiable.
- Taille sur téléphone (px) – de 40 à 72. Vide signifie : 48 px, ou moins si la taille ci-dessus est inférieure.
- Icône –
speech bubble(par défaut),question mark,headset,sparkleouno icon (text only). Sans icône, le bouton nécessite un libellé et l’affichage toujours. Sinon, le widget affiche la bulle. - Libellé – texte visible à côté de l’icône, 40 caractères maximum. Vide signifie : l’icône seule.
- Seconde ligne – une ligne plus petite sous le libellé, 60 caractères maximum. Sans libellé, elle reste invisible.
- Affichage – quand le libellé est visible :
- toujours (par défaut),
- au survol uniquement – seule l’icône est visible ; le libellé se déploie au survol ou au focus clavier. Sur les appareils tactiles, seule l’icône reste visible.
- sur grands écrans uniquement – le libellé apparaît à partir de 481 px de largeur ; en dessous, seule l’icône apparaît,
- Uniquement via vos propres liens (pas d’icône de chat) – aucun bouton du chat ; voir ci-dessous.
Libellé par langue
Le libellé et la seconde ligne du formulaire s’appliquent à toutes les langues. Pour les différencier par langue, renseignez-les sous Textes et formulaires → Textes personnalisés, avec les clés launcher.text et launcher.subtext. Une entrée à cet endroit prime sur les champs de cette page. Détails dans Textes et langues.
Chat sans aucun bouton
Avec l’affichage Uniquement via vos propres liens (pas d’icône de chat), aucun bouton du chat n’apparaît. Les visiteurs ouvrent le chat depuis vos propres liens ou boutons :
<a href="#rc-open">Help & support</a>
Placez au moins un de ces liens sur chaque page où le chat doit être accessible. Recopiez ensuite le code d’intégration sous Installation : le nouveau code ne contient plus votre couleur de marque, ce qui évite l’apparition fugitive du bouton pendant le chargement.
Tant que le widget n’a pas pu obtenir votre réglage du serveur, par exemple sans connexion ou lors d’une première visite avant le consentement aux cookies, le bouton apparaît encore par sécurité. S’il ne doit jamais apparaître, ajoutez aussi ceci au code :
<script src="https://cdn.reactive.chat/loader.js"
data-rc-site-key="SITE_KEY"
data-rc-hide-launcher="true"
async></script>
data-rc-hide-launcher s’applique toujours, quels que soient les réglages du compte. Sans bouton du chat, il n’y a pas non plus d’infobulles à cet endroit. Toutes les façons d’ouvrir le chat depuis vos éléments, avec texte prérempli et choix d’onglet, sont décrites dans Ouvrir le chat depuis votre propre lien ou bouton.
Au lieu d’un lien, vous pouvez aussi utiliser un élément existant de votre page comme déclencheur. data-rc-launcher-selector accepte un sélecteur CSS :
<script src="https://cdn.reactive.chat/loader.js"
data-rc-site-key="SITE_KEY"
data-rc-hide-launcher="true"
data-rc-launcher-selector="#hilfe-knopf"
async></script>
Position et espacement
Le côté, l’espacement et le niveau d’empilement se définissent dans le code d’intégration. Le compte ne comporte aucun champ pour ces réglages.
data-rc-position–right(par défaut) ouleft.data-rc-offset– distance du bord en pixels, au format JSON, par défaut{"x":20,"y":20}. Le widget ajoute les zones de sécurité comme l’encoche de l’iPhone.data-rc-z-index– niveau d’empilement,2147483000par défaut. Diminuez-le si un de vos éléments doit apparaître au-dessus du chat.
<script src="https://cdn.reactive.chat/loader.js"
data-rc-site-key="SITE_KEY"
data-rc-position="left"
data-rc-offset='{"x":24,"y":96}'
async></script>
Ces mêmes champs fonctionnent aussi comme position, offset et zIndex via window.ReactiveChatSettings ou ReactiveChat('boot', …). Voir Intégration technique.
Éviter les barres
Si votre page comporte une barre fixe en bas, comme un bandeau de cookies, une barre de panier ou une navigation sur téléphone, le bouton du chat se déplace automatiquement au-dessus avec 12 px d’espace. Il mesure de nouveau lors des changements de page. Les éléments qui occupent plus de 40 % de la hauteur de fenêtre sont considérés comme des superpositions et ne sont pas évités.
Vous pouvez désactiver ce comportement dans le code :
data-rc-avoid-overlap="false"
Bouton du chat avec votre propre icône
Une icône entièrement personnalisée se définit dans le code via l’identité visuelle : launcher.icon accepte un SVG en ligne ou une adresse data: et prime sur l’icône choisie.
ReactiveChat('setBrand', {
launcher: { shape: 'bubble', label: 'Ask us', icon: 'data:image/svg+xml,…' }
});
Remarque : une identité visuelle avec ces champs dans le code d’intégration (data-rc-brand) prime sur les réglages du compte pour cette page. Voir Couleurs, police et thème.
Sur téléphone
En dessous de 481 px de largeur (et sur téléphone en orientation paysage jusqu’à 480 px de hauteur), la taille pour téléphone s’applique. Avec l’affichage sur grands écrans uniquement, le bouton n’y montre que l’icône. Lorsque le visiteur ouvre le chat, la fenêtre occupe tout l’écran et le bouton s’efface.
Si le bouton du chat ne correspond pas à vos attentes
- Aucun bouton visible : l’affichage est-il réglé sur Uniquement via vos propres liens, ou
data-rc-hide-launcher="true"est-il défini dans le code ? Le projet est-il en pause ? - Le bouton apparaît malgré « Uniquement via vos propres liens » : le widget n’a pas encore reçu le réglage du serveur (repli). Ajoutez aussi
data-rc-hide-launcher="true". - La bulle apparaît même sans icône : sans icône, il faut un libellé et l’affichage toujours.
- Les modifications n’arrivent pas : le code contient-il un
data-rc-brandavec un libellé, une icône ou d’autres champs supplémentaires ? Dans ce cas, le code d’intégration l’emporte.
آخری بار تازہ کاری: