> For the complete documentation index, see [llms.txt](https://docs.yelda.fr/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.yelda.fr/parametrage/plateformes/personnalisation-webchat.md).

# Personnalisation visuelle du webchat

Votre agent IA Yelda s'intègre sur votre site web et s'adapte à votre charte graphique. Deux composantes sont personnalisables : la **bulle d'appel à l'action** (le bouton visible en permanence sur votre site) et le **widget de conversation** (la fenêtre de chat une fois ouverte).

## La bulle d'appel à l'action

Par défaut, un bouton circulaire s'affiche **en bas à droite** de votre site. L'utilisateur clique dessus pour démarrer une conversation avec votre agent IA.

### Personnalisation via le back-office Yelda

Dans **Paramètres agent > Webchat > Bulle de chat**, vous pouvez :

* Choisir le **style de bulle par défaut** ou une **bulle personnalisée**
* Fournir une **image custom** (desktop/tablette et mobile) — format **400×100 px** maximum
* Ajouter un **texte d'accompagnement** affiché à côté de la bulle

> 📷 *Illustration à venir — configuration de la bulle dans le back-office Yelda.*

### Personnalisation avancée via votre site web

Au-delà du back-office, vous pouvez agir directement depuis le **code de votre site** (CSS/HTML de la page parent) pour :

* **Modifier le positionnement** de la bulle (bas à gauche, centrée, etc.)
* **Ajuster les marges et l'espacement** par rapport aux bords de la page
* **Contrôler la visibilité** de la bulle selon les pages ou les conditions

> 💡 Ces modifications CSS sont gérées par votre équipe technique ou votre webmaster. Le tag JavaScript Yelda reste inchangé.

## Le widget de conversation

La fenêtre de chat s'ouvre lorsque l'utilisateur clique sur la bulle. L'apparence intérieure du widget est entièrement paramétrable.

### Personnalisation standard via le back-office

Dans **Paramètres agent > Webchat > Options d'affichage**, vous pouvez modifier :

| Paramètre                           | Description                                                                          |
| ----------------------------------- | ------------------------------------------------------------------------------------ |
| **Titre de la fenêtre**             | Texte affiché dans l'en-tête du widget (par défaut : nom de l'agent)                 |
| **Couleur du dégradé de l'en-tête** | Deux codes hexadécimaux pour créer un dégradé aux couleurs de votre marque           |
| **Couleur du texte de l'en-tête**   | Couleur du titre dans la barre supérieure                                            |
| **Couleur de fond du message**      | Couleur d'arrière-plan des bulles de réponse de l'agent                              |
| **Couleur du texte du message**     | Couleur du texte dans les bulles de réponse                                          |
| **Streaming du texte**              | Active ou désactive l'affichage progressif des réponses (effet « machine à écrire ») |

> 📷 *Illustration à venir — options d'affichage dans le back-office Yelda.*

### Personnalisation avancée sur mesure

Pour aller plus loin, Yelda peut intégrer du **CSS personnalisé directement dans le widget**. Cela permet de modifier finement :

* La **police de caractères** et la typographie
* L'**agencement et la disposition** des blocs de conversation
* Les **styles des boutons**, des liens et des éléments interactifs
* Tout autre **élément visuel spécifique** à votre charte

> ✉️ Pour toute personnalisation avancée, transmettez-nous votre charte graphique (couleurs, polices, éléments de marque) et l'équipe Yelda réalisera l'intégration CSS sur mesure.

## Récapitulatif

| Composante            | Ce que vous pouvez faire          | Où                | Qui             |
| --------------------- | --------------------------------- | ----------------- | --------------- |
| **Bulle — image**     | Remplacer par une image custom    | Back-office Yelda | Vous            |
| **Bulle — position**  | Modifier le placement sur la page | CSS du site web   | Votre webmaster |
| **Widget — couleurs** | Adapter couleurs et titre         | Back-office Yelda | Vous            |
| **Widget — avancé**   | Police, agencement, styles fins   | CSS intégré       | Équipe Yelda    |

> **Des questions ? Besoin d'une personnalisation spécifique ?** Contactez votre Customer Success Manager Yelda ou écrivez-nous à <support@yelda.ai>.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.yelda.fr/parametrage/plateformes/personnalisation-webchat.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.