# 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. L'infobulle du lanceur et la fenêtre d'accueil suivent elles aussi le thème : fond blanc et texte foncé, ou fond gris foncé et texte clair.

**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 se trouvent sur votre page, hors de la fenêtre de chat : intoCHAT ne peut donc pas y charger de polices. Ils demandent la police choisie par son nom et l'utilisent si votre page ou l'appareil du visiteur la possède ; sinon, ils prennent la police système de l'appareil. Avec Serif, ils utilisent Georgia ou une autre police à empattements.

**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](/fr/docs/custom-buttons) : **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 |

> La couleur du texte s'adapte automatiquement. Sur l'en-tête, les messages du visiteur et de l'agent, l'icône de la bulle et le bouton d'envoi, intoCHAT utilise du blanc ou un quasi-noir (`#111827`), selon ce qui se lit le mieux sur la couleur choisie. Le texte des messages suit la même règle dans la **Live preview**.

## 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](/fr/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.

> Seule la bulle de chat le fait : la [balise script](/fr/docs/script-tag), le plugin WordPress et l'extrait Shopify. L'[iframe intégrée et le lien direct](/fr/docs/iframe-and-link) n'affichent aucune de ces invitations.

## 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](/fr/docs/script-tag) ou consultez les [autres plateformes](/fr/docs/other-platforms).