# Personnalisation de l’embed

Après [avoir ajouté Docs Embed à votre site web ou à votre application](/docs/documentation/fr/docs-site/embedding/implementation.md), vous pouvez encore personnaliser l’expérience en ajoutant des boutons d’action dans la barre latérale, des suggestions pour inciter vos utilisateurs avec des questions contextuelles, des onglets, et bien plus encore.

### Personnalisation du bouton ([autonome](/docs/documentation/fr/docs-site/embedding/implementation/script.md) uniquement)

Lors de l’utilisation de [l’implémentation par balise de script autonome](/docs/documentation/fr/docs-site/embedding/implementation/script.md), vous pouvez personnaliser le libellé et l’icône du bouton qui lance le widget intégré.

{% hint style="info" %}
Cette option de personnalisation du bouton n’est disponible que lors de l’utilisation de [l’implémentation par balise de script autonome](/docs/documentation/fr/docs-site/embedding/implementation/script.md). Pour les implémentations [React](/docs/documentation/fr/docs-site/embedding/implementation/react.md) ou [du package Node.js/NPM](/docs/documentation/fr/docs-site/embedding/implementation/nodejs.md) , vous devrez créer votre propre bouton pour lancer l’intégration.
{% endhint %}

```javascript
window.GitBook("configure", {
  button: {
    label: "Poser une question",
    icon: "assistant", // 'assistant' | 'sparkle' | 'help' | 'book'
  },
});
```

**Options d’icône disponibles :**

* `assistant` - <i class="fa-gitbook-assistant">:gitbook-assistant:</i> Icône Assistant (par défaut)
* `sparkle` - <i class="fa-sparkle">:sparkle:</i> Icône étincelle
* `help` - <i class="fa-circle-question">:circle-question:</i> Icône aide/question
* `book` - <i class="fa-book-open">:book-open:</i> Icône livre

### Configuration du jeu de couleurs

Par défaut, l’intégration suit le `color-scheme`CSS de l’iframe. Cela lui permet de correspondre automatiquement au thème de votre application ou aux préférences du navigateur.

Si vous souhaitez forcer un mode, passez `colorScheme` lorsque vous initialisez l’intégration, construisez l’URL du frame ou rendez le composant React. Cela ne fait pas partie de `configure`.

{% tabs %}
{% tab title="Script autonome" %}

```javascript
window.GitBook(
  "init",
  { siteURL: "https://docs.company.com" },
  { colorScheme: "dark" }
);
```

{% endtab %}

{% tab title="Node.js/NPM" %}

```javascript
const iframeURL = gitbook.getFrameURL({
  colorScheme: "dark",
});
```

{% endtab %}

{% tab title="React" %}

```jsx
<GitBookFrame colorScheme="dark" />
```

{% endtab %}
{% endtabs %}

### Ajout d’actions

Ajouter des actions à l’intégration vous permet de proposer aux utilisateurs des actions supplémentaires dans l’interface. Chaque action se compose d’un libellé, d’une icône (de [Font Awesome](https://fontawesome.com/search?ip=brands%2Cclassic%2Cduotone)), et d’une action `onClick` qui s’exécute lorsque l’utilisateur clique sur l’action. Toutes les actions que vous ajoutez apparaîtront dans la barre latérale à côté des onglets. Les actions peuvent contrôler directement Docs Embed ou exécuter n’importe quel code de votre choix.

```javascript
window.GitBook("configure", {
  actions: [
    {
      label: "Contacter le support",
      icon: "circle-question",
      onClick: () => {
        window.open("https://support.example.com", "_blank");
      },
    },
    {
      label: "Documentation",
      icon: "book",
      onClick: () => {
        window.open("https://docs.example.com", "_blank");
      },
    },
  ],
});
```

### Ajout de suggestions

Vous pouvez ajouter des suggestions à l’onglet Assistant, qui apparaîtront sous forme d’invites cliquables que vos utilisateurs pourront utiliser lorsque l’Assistant se charge.

```javascript
window.GitBook("configure", {
  suggestions: [
    "Aidez-moi à démarrer avec mon nouveau compte",
    "Comment réinitialiser mon mot de passe ?",
    "Quels sont vos tarifs ?",
  ],
});
```

### Ajout d’un message d’accueil

Personnalisez le message de bienvenue affiché dans l’onglet Assistant :

```javascript
window.GitBook("configure", {
  greeting: {
    title: "Bienvenue !",
    subtitle: "Comment puis-je vous aider aujourd’hui ?",
  },
});
```

### Remplacement du nom de l’assistant

Utilisez `assistantName` pour remplacer le nom de l’assistant affiché dans l’interface.

La valeur peut contenir jusqu’à 32 caractères.

```javascript
window.GitBook("configure", {
  assistantName: "Support Copilot",
});
```

### Affichage d’un bouton de fermeture

Utilisez `closeButton` pour afficher un bouton de fermeture à l’intérieur de l’Assistant.

```javascript
window.GitBook("configure", {
  closeButton: true,
});
```

### Affichage ou masquage de la marque

Utilisez `trademark` pour afficher ou masquer la marque GitBook dans l’interface intégrée — y compris le pied de page Docs Embed et l’image de marque de l’Assistant.

```javascript
window.GitBook("configure", {
  trademark: false,
});
```

### Configuration des onglets

Remplacez les onglets affichés. Tous les onglets sont activés par défaut, à condition que votre site les prenne en charge. Par exemple, si l’Assistant n’est pas activé sur votre site, il ne sera pas affiché. Si vous définissez `tabs`, l’intégration n’affiche que les onglets que vous listez.

```javascript
window.GitBook("configure", {
  tabs: ["assistant", "search", "docs"], // Afficher tous les onglets
  // tabs: ["search", "docs"], // Afficher uniquement la recherche et la documentation
  // tabs: ['docs'], // Afficher uniquement l’onglet documentation
});
```


---

# 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://gitbook.com/docs/documentation/fr/docs-site/embedding/configuration/customizing-docs-embed.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.
