Personnaliser l'apparence du widget de chat
Réglez thème, police, couleurs, coins, avatar, bulle, messages d'accueil et pied de page du widget, son ouverture automatique, ou importez votre logo.
L'onglet Appearance (Apparence) détermine l'aspect du widget de chat et ce qu'il affiche avant que le visiteur écrive. Votre site charge ces réglages depuis intoCHAT à chaque affichage de page : vous n'avez donc jamais à modifier le code d'intégration pour les changer.
Où le trouver
Ouvrez votre agent et sélectionnez l'onglet Appearance. La Live preview (aperçu en direct) à côté des réglages montre le widget tel qu'il s'affichera, avec la bulle du côté choisi. Sur les petits écrans, touchez plutôt le bouton Preview.
Les modifications ne sont publiées qu'une fois que vous cliquez sur Save changes en haut de la page. Rechargez ensuite votre site pour les voir.
Reprendre l'identité de votre site
Sous Match your website, saisissez votre domaine et cliquez sur Detect branding. intoCHAT lit votre page d'accueil et propose un logo et quatre couleurs. Rien ne change tant que vous n'appliquez pas la proposition :
- Apply colours & logo applique les quatre couleurs et utilise le logo comme avatar de l'agent.
- Colours only applique uniquement les couleurs et conserve votre avatar.
Si la couleur de votre marque est trop claire pour un texte blanc, l'import la fonce. Le logo est découpé en cercle : un symbole carré passe donc mieux qu'un logotype large. L'icône de la bulle n'est jamais modifiée. Une détection ne consomme pas de crédit de crawl.
Textes
| Champ | Rôle |
|---|---|
| Welcome message (message d'accueil) | Le premier message de l'agent dans chaque nouvelle conversation, jusqu'à 500 caractères. S'il est vide : Hello! How can I help you today? Cliquez sur Add another message pour en ajouter jusqu'à 3 autres de même longueur. Chacun s'affiche dans sa propre bulle après le premier. |
| Suggested questions (questions suggérées) | Jusqu'à 6 questions de 120 caractères maximum, affichées comme boutons au-dessus du champ de saisie jusqu'au premier message du visiteur. Un clic envoie la question. |
| Launcher tooltip (infobulle) | Le libellé à côté de la bulle. Il apparaît une seconde après le chargement, disparaît au bout de trois secondes et revient au survol. S'il est vide : « Chat with » suivi du nom de votre agent, par exemple « Chat with Example Bikes ». |
| Input placeholder (texte indicatif) | Le texte grisé du champ de saisie. S'il est vide : Type your message... |
| Footer text (pied de page) | Une petite mention sous le champ de saisie, comme un avis de confidentialité, jusqu'à 300 caractères. Les adresses web commençant par http:// ou https:// deviennent des liens qui s'ouvrent dans un nouvel onglet. Elle s'affiche au-dessus de la mention « Powered by intoCHAT ». |
Les textes par défaut sont en anglais. Si votre site est en français, saisissez vos propres textes. L'agent répond dans la langue du visiteur, mais ces textes s'affichent exactement comme vous les écrivez. Sur un site multilingue, gardez-les courts et dans votre langue principale.
Images
- Agent avatar s'affiche à côté de chaque message de l'agent, pas dans l'en-tête. Sans avatar, les messages affichent « AI ». Utilisez une image carrée d'au moins 64 × 64 pixels.
- Launcher icon remplace l'icône par défaut en forme d'étincelles. Une icône personnalisée remplit toute la bulle de 56 pixels, si bien que la couleur de la bulle n'est plus visible.
Les deux acceptent les fichiers PNG, JPG, GIF ou WebP jusqu'à 5 Mo.
Style
Sous Style, vous réglez le thème, la police et les coins de la fenêtre de chat.
| Thème | Ce que voient les visiteurs |
|---|---|
| Light (clair) | Une fenêtre blanche, l'aspect habituel du widget. C'est le réglage par défaut. |
| Dark (sombre) | Une fenêtre sombre. |
| Auto | Clair ou sombre, selon le réglage de l'appareil de chaque visiteur. La fenêtre bascule si le visiteur change ce réglage pendant que le chat est ouvert. |
Avec le thème sombre, les couleurs de l'en-tête, des messages du visiteur et de la bulle restent telles que vous les avez définies. Les messages de l'agent passent au gris foncé uniquement s'ils utilisent encore le gris clair par défaut ; une couleur que vous avez choisie est conservée. Avec Auto, la Live preview propose les boutons Light et Dark pour vérifier les deux.
Font (police) s'applique à tout le contenu de la fenêtre de chat : System default, Inter, Roboto, Open Sans, Lato, Poppins ou Serif (Georgia). System default et Serif utilisent des polices déjà présentes sur l'appareil du visiteur. Les polices web sont servies par intoCHAT, et les visiteurs ne téléchargent que celle que vous choisissez. L'infobulle et les messages d'accueil affichés au-dessus de la bulle, sur votre page, gardent la police du système.
Corners (coins) détermine l'arrondi des bulles de message, du champ de saisie, du bouton d'envoi, des questions suggérées et des boutons personnalisés : Sharp (anguleux), Soft (léger) ou Rounded (arrondi). Soft est le réglage par défaut et correspond à l'aspect du widget avant l'arrivée de ce réglage.
Couleurs
Partez d'un des thèmes proposés sous Colours (Ink, Ocean, Forest, Plum, Ember), puis ajustez chaque champ avec le sélecteur ou une valeur hexadécimale.
| Couleur | Utilisée pour |
|---|---|
| Header | La barre en haut du chat, avec le nom de l'agent |
| Launcher bubble | La bulle ronde et le bouton d'envoi |
| Visitor messages | Le fond des messages du visiteur |
| Agent messages | Le fond des messages de l'agent |
Position
Sous Placement, réglez Side of the screen sur gauche (left) ou droite (right). La bulle se place à 20 pixels de ce coin inférieur. Sur ordinateur, le chat s'ouvre au-dessus dans une fenêtre de 380 × 600 pixels. Sur les écrans de 768 pixels de large ou moins, il occupe tout l'écran. La fenêtre de chat a un bouton de fermeture dans son en-tête, et un nouveau clic sur la bulle la ferme aussi.
Retirer « Powered by intoCHAT »
L'interrupteur Show "Powered by intoCHAT" contrôle la petite mention sous le champ de saisie. Avec l'offre Free, l'interrupteur est bloqué sur activé, et le lien Remove the intoCHAT credit on any paid plan (retirer la mention avec une offre payante) en dessous ouvre vos réglages de facturation. Avec n'importe quelle offre payante, vous pouvez le désactiver. Consultez les tarifs.
Comportement de la bulle
Sous Launcher behaviour (comportement de la bulle), deux invitations facultatives attirent les visiteurs dans le chat sans attendre un clic. Chacune a un interrupteur et un délai de 0 à 300 secondes sur la page.
- Show the welcome message above the launcher affiche vos messages d'accueil en petites bulles à côté de la bulle de chat, au bout de 5 secondes si vous ne changez pas le délai. Votre avatar apparaît à côté du premier, et les messages longs sont coupés après quatre lignes. Un clic sur une bulle ouvre le chat. Le bouton × les masque.
- Open the chat automatically ouvre la fenêtre de chat toute seule, au bout de 10 secondes si vous ne changez pas le délai. Elle n'est pas utilisée sur les écrans de 768 pixels de large ou moins, où le chat couvrirait tout l'écran.
Une visite dure jusqu'à ce que le visiteur ferme l'onglet du navigateur. L'ouverture automatique a lieu au plus une fois par visite. Les messages d'accueil réapparaissent à chaque nouvelle page tant que le visiteur ne les a pas masqués. Aucune des deux invitations ne revient pendant le reste de la visite dès que le visiteur a ouvert ou fermé le chat, masqué les messages d'accueil, ou que le chat s'est ouvert automatiquement. Si les deux sont activées, le délai le plus court passe en premier, et l'ouverture du chat retire les messages d'accueil affichés.
Problèmes fréquents
- Les modifications n'apparaissent pas sur votre site. Cliquez sur Save changes, puis rechargez la page. Le widget récupère ses réglages à chaque chargement de page.
- La couleur de la bulle ne change pas. Une icône de bulle est définie et masque la couleur. Supprimez l'icône pour retrouver la couleur.
- « Logo could not be imported ». Les couleurs ont tout de même été appliquées. Importez vous-même un logo sous Agent avatar.
- Les messages d'accueil ou l'ouverture automatique n'apparaissent pas. Les deux s'arrêtent pour le reste de la visite dès que le chat a été ouvert, fermé ou masqué, et l'ouverture automatique aussi après avoir eu lieu une fois. Pour tester à nouveau, ouvrez votre site dans un nouvel onglet. L'ouverture automatique n'a jamais lieu sur les écrans de 768 pixels de large ou moins.
Ensuite, installez le widget avec une balise script ou consultez les autres plateformes.