# Éditeur Css

Pour les profils avancés, il est possible de personnaliser le style CSS du chatbot directement à partir de cette section. Grâce à l'édition CSS, il est possible de revoir plus en détail l'aspect visuel du chatbot.

### Personnaliser les icônes

En tant qu'utilisateur de Dydubox, vous pouvez personnaliser les icônes par défaut utilisées dans la chatbox web en surchargeant du code CSS dans l'éditeur CSS.

Vous avez 2 options :

* changer la couleur d'une icône par défaut.
* utiliser une icône personnalisée (en format d'image hébergée sur un site Web).

**1. Changer la couleur d'une icône par défaut**

**Etapes à suivre :**

1. Ouvrez une configuration de chatbox web ("Multiplateforme") existante dans Dydubox ou créez en une nouvelle.
2. Allez dans l'éditeur CSS de votre chatbox web.
3. Collez les lignes de code suivantes dans votre éditeur :

```
    .NomIcone {
    color: CodeHexOuNomDeCouleurEnAnglais;
}
```

* **"NomIcône"**: ici, spécifiez le nom de l'icône que vous souhaitez personnaliser. Pour obtenir le nom, utilisez l'outil d'inspection de votre navigateur Web. Les noms d'icônes commencent toujours par "icon-chatbox\_".
* **"color"**: vous pouvez soit spécifier le code HEX de la couleur souhaitée soit le nom de la couleur en anglais (rouge, bleu…).

Exemple : 

<figure><img src="/files/MveQfb6wVbIlkSj5t9E6" alt=""><figcaption></figcaption></figure>

5. Cliquez sur « Appliquer » pour confirmer les modifications. Vous devriez pouvoir visualiser immédiatement les changements dans le bot de prévisualisation à droit de l'écran.
6. Publiez vos modifications et voilà.

**2. Utiliser une icône personnalisée**

**Etapes à suivre :**

1. Ouvrez une configuration de chatbox web ("Multiplateforme") existante dans Dydubox ou créez en une nouvelle.
2. Allez dans l'éditeur CSS de votre chatbox web.
3. Collez les lignes de code suivantes dans votre éditeur :

```
.NomIcône {
 background-position: center center;
 background-size: contain;
 content: url(UrlDeLaNouvelleIcône);
 width: 24px;
}
.NomIcône::before{
 display:none;
}
```

* **"NomIcône"** : spécifiez le nom de l'icône que vous souhaitez personnaliser. Pour obtenir le nom, utilisez l'outil d'inspection de votre navigateur Web. Les noms des icônes commencent toujours par "icon-chatbox\_"
* **"content : url(UrlDeLaNouvelleIcône)"**: collez entre parenthèses le lien de votre icône personnalisée en format d'image. (Nous recommandons le format png pour les sites Web.)

4. Cliquez sur « Appliquer » pour confirmer les modifications. Vous devriez pouvoir visualiser immédiatement les changements dans le bot de prévisualisation à droit de l'écran.
5. Publiez vos modifications et voilà.

**Afficher un onglet contact**

Si vous avez besoin d'afficher moins que les trois sections de l'onglet contact :&#x20;

<figure><img src="/files/x39ffO0bKwOnfQoWAQTX" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: 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:

```
GET https://docs.dydu.ai/integrations/canaux/customisation-avancee/editeur-css.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.