> For the complete documentation index, see [llms.txt](https://docs.didomi.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.didomi.io/fr/widgets/editeur-de-widget/composants-du-widget.md).

# Composants du widget

{% hint style="success" %}
**Type d’accès**: Widgets - Éditeur
{% endhint %}

En utilisant la bibliothèque de composants, votre organisation peut personnaliser complètement la mise en page d’un [couche de widget](/fr/widgets/editeur-de-widget/gerer-les-couches-du-widget.md) en ajoutant et en réorganisant les composants dans une interface utilisateur finale spécifique. Dans cet article, nous couvrirons les éléments suivants :

* [Glossaire des composants](#component-glossary)
* [Ajouter un composant de widget](#add-widget-component)
* [Supprimer un composant de widget](#remove-widget-component)
* [Déplacer un composant de widget](#move-widget-component)
* [Paramètres du composant](#component-settings)
* [Style du composant ](#component-style)

Pour commencer, cliquez sur **Widgets** dans le panneau de gauche et sélectionnez l’ **Modifier** icône alignée avec le nom d’un widget.

<figure><img src="https://1244787492-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNDxbAdc00ce6bH5u1urh%2Fuploads%2FVl9fnpSzpTNYbK0LRSRW%2FScreenshot%202026-02-18%20at%2010.08.07%E2%80%AFAM.png?alt=media&amp;token=29ebf0d6-3354-46e7-a1d8-057d9db45da0" alt="" width="563"><figcaption></figcaption></figure>

{% hint style="info" %}
Pour chaque nouveau widget créé, Didomi fournira plusieurs couches préremplies de composants.&#x20;
{% endhint %}

***

### Glossaire des composants

Le panneau de gauche de la page suivante est la bibliothèque de composants et les composants suivants peuvent être ajoutés et configurés à une couche de widget :

<figure><img src="https://1244787492-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNDxbAdc00ce6bH5u1urh%2Fuploads%2Fm9uGdHTO7aEM0RXMVhYR%2FScreenshot%202026-02-19%20at%203.58.15%E2%80%AFPM.png?alt=media&amp;token=9c2b795e-892a-442f-a938-d78b278d7405" alt="" width="563"><figcaption></figcaption></figure>

<table><thead><tr><th width="196">Composant</th><th>Description</th></tr></thead><tbody><tr><td>Colonne</td><td>Ajoute un conteneur de ligne flexible qui dispose ses éléments enfants verticalement.</td></tr><tr><td>Ligne</td><td>Ajoute un conteneur de ligne flexible qui dispose ses éléments enfants horizontalement.</td></tr><tr><td>Conteneur</td><td>Ajoute un conteneur flexible qui prend en charge un style responsive</td></tr><tr><td>Titre</td><td>Insère un en-tête qui affiche l’élément HTML de titre approprié (h1-h6) </td></tr><tr><td>Texte</td><td>Insère un bloc de texte</td></tr><tr><td>Tout accepter</td><td>Insère un bouton qui donne son consentement à tous les fournisseurs et finalités inclus dans le flux de consentement</td></tr><tr><td>Tout refuser</td><td>Insère un bouton qui rejette tous les fournisseurs et finalités inclus dans le flux de consentement</td></tr><tr><td>enregistrez</td><td>Insère un bouton qui enregistre les choix de l’utilisateur final</td></tr><tr><td>Redirection</td><td>Insère un bouton qui redirige vers une URL désignée</td></tr><tr><td>Action personnalisée</td><td>Insère un bouton qui exécute une action définie dans le code de votre site Web ou de votre application mobile. L’action est identifiée via le <strong>Nom de l’action</strong>.</td></tr><tr><td>Changer de couche</td><td>Insère un bouton de navigation qui permet à l’utilisateur final de naviguer vers une couche spécifique du widget</td></tr><tr><td>Bouton Retour</td><td>Insère un bouton de navigation qui permet à l’utilisateur final de revenir à la couche précédente du widget</td></tr><tr><td>Image</td><td>Affiche une image hébergée </td></tr><tr><td>Logo</td><td>Affiche le logo de marque configuré pour la marque utilisée dans le flux de consentement</td></tr><tr><td>Liste empilée</td><td>Affiche les finalités TCF groupées configurées pour le Transparency and Consent Framework (TCF). Les informations renseignées dans l’aperçu du widget sont fournies à titre d’exemple uniquement.<br><br><mark style="background-color:$warning;"><strong>Remarque</strong>: Ce composant ne s’applique qu’aux flux de consentement utilisant le Transparency and Consent Framework (TCF) pour la prise en charge du RGPD. Il sera vide s’il est appliqué à d’autres réglementations ou cadres (par ex. CPRA)</mark></td></tr><tr><td>Liste des finalités</td><td>Affiche les finalités avec des descriptions déroulantes incluses dans le flux de consentement<br><br><mark style="background-color:$warning;"><strong>Remarque</strong>: Les informations renseignées dans l’aperçu du widget sont fournies à titre d’exemple uniquement.</mark></td></tr><tr><td>Liste des fournisseurs</td><td>Affiche les fournisseurs et leurs informations respectives inclus dans le flux de consentement<br><br><mark style="background-color:$warning;"><strong>Remarque</strong>: Les informations renseignées dans l’aperçu du widget sont fournies à titre d’exemple uniquement.</mark></td></tr><tr><td>Informations utilisateur</td><td><p>Un accordéon repliable qui affiche les informations suivantes sur l’utilisateur final :</p><ul><li>ID utilisateur</li><li><a href="/fr/prise-en-main/general/chaine-de-consentement-didomi-dcs-et-signature.md">Chaîne de consentement Didomi</a></li></ul></td></tr></tbody></table>

### Ajouter un composant de widget

Pour ajouter un composant à un widget, accédez à la bibliothèque de composants et localisez le composant que vous souhaitez ajouter. Faites glisser et déposez le composant à l’emplacement souhaité dans la fenêtre d’aperçu du widget.

{% hint style="info" %}
Des lignes guides dans la fenêtre d’aperçu du widget vous aideront à comprendre l’emplacement exact du composant dans la hiérarchie des composants et par rapport aux autres composants.&#x20;
{% endhint %}

<figure><img src="https://1244787492-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNDxbAdc00ce6bH5u1urh%2Fuploads%2F8pSlkIVKLEhJUUssspbl%2FwidgetAdd.gif?alt=media&amp;token=cd57108e-75a0-4f44-8237-03cb45fd76fe" alt="" width="563"><figcaption></figcaption></figure>

### Supprimer un composant de widget

Pour supprimer un composant d’un widget, accédez à l’aperçu du widget et sélectionnez le composant. Le composant étant surligné, cliquez sur le **Supprimer** icône dans le coin supérieur droit du composant.

<figure><img src="https://1244787492-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNDxbAdc00ce6bH5u1urh%2Fuploads%2FaBlA36HYbywkaMMKZYkJ%2FScreenshot%202026-02-20%20at%207.09.24%E2%80%AFAM.png?alt=media&amp;token=b4d9f945-954d-48ec-9bea-e0d401c2e97b" alt="" width="563"><figcaption></figcaption></figure>

### Déplacer un composant de widget

Pour déplacer un composant vers une autre position dans le widget, accédez à l’aperçu du widget et sélectionnez le composant. Le composant étant surligné, cliquez et maintenez le **Faire glisser pour déplacer** icône.

Faites glisser et déposez le composant à sa nouvelle position dans la fenêtre d’aperçu du widget.&#x20;

{% hint style="info" %}
Des lignes guides dans la fenêtre d’aperçu du widget vous aideront à comprendre l’emplacement exact du composant dans la hiérarchie des composants et par rapport aux autres composants.&#x20;
{% endhint %}

<figure><img src="https://1244787492-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNDxbAdc00ce6bH5u1urh%2Fuploads%2FdilGgjFwUHvl5XwpnjS0%2FwidgetMove.gif?alt=media&amp;token=10cc8135-a0c5-44b7-b930-ec0d3e1050ae" alt="" width="563"><figcaption></figcaption></figure>

### Paramètres du composant

L’onglet des paramètres d’un composant permet à votre organisation de personnaliser des aspects tels que le contenu, les icônes, les variantes de bouton, etc., du composant.&#x20;

{% hint style="info" %}
Les paramètres disponibles pour chaque composant varient et certains composants n’ont aucun paramètre configurable.
{% endhint %}

Configurez les paramètres de n’importe quel composant en accédant à l’aperçu du widget et en sélectionnant un composant.&#x20;

Le composant étant surligné, accédez au panneau de droite et assurez-vous que l’onglet **Paramètres** est sélectionné.

<figure><img src="https://1244787492-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNDxbAdc00ce6bH5u1urh%2Fuploads%2FnOTUk7qdxBCUY1Q6Uqkd%2FScreenshot%202026-02-20%20at%208.53.57%E2%80%AFAM.png?alt=media&amp;token=d0c3a1e8-8817-4a4d-8f1f-e9c726f5e484" alt="" width="563"><figcaption></figcaption></figure>

Développez n’importe quel accordéon dans le menu des paramètres et utilisez les options fournies pour configurer les détails de ce paramètre spécifique. La fenêtre d’aperçu du widget reflétera automatiquement les modifications apportées au paramètre.

<figure><img src="https://1244787492-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNDxbAdc00ce6bH5u1urh%2Fuploads%2FHWGnbA6jsLqShSG19NPB%2FScreenshot%202026-02-20%20at%208.59.36%E2%80%AFAM.png?alt=media&amp;token=9119962d-ff3c-470d-bc56-bc5379a64f68" alt="" width="563"><figcaption></figcaption></figure>

### Style du composant&#x20;

L’onglet style d’un composant permet à votre organisation de remplacer tout élément de style/conception configuré pour la marque. Lorsqu’une marque et un widget sont utilisés dans un flux de consentement, le style configuré pour le widget sera prioritaire et le style de la marque sera utilisé par défaut si aucun style de remplacement n’est disponible.

{% hint style="info" %}
Utilisez l’onglet style pour remplacer le style de la marque lors de la configuration des points de rupture/des changements de mise en page. [Cliquez ici](/fr/widgets/editeur-de-widget/configurer-les-points-de-rupture-du-widget.md) pour plus d'informations.
{% endhint %}

Configurez le style de n’importe quel composant en accédant à l’aperçu du widget et en sélectionnant un composant. Le composant étant surligné, accédez au panneau de droite et cliquez sur le **Style** .&#x20;

<figure><img src="https://1244787492-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNDxbAdc00ce6bH5u1urh%2Fuploads%2F3yfekG2CBRUfA65rQYpC%2FScreenshot%202026-02-24%20at%2010.18.05%E2%80%AFAM.png?alt=media&amp;token=d2ddf797-ee48-4168-847f-75e6cd14a2e1" alt="" width="563"><figcaption></figcaption></figure>

Utilisez les champs et accordéons fournis pour ajuster le style du composant. Toute modification affectera le point de rupture sélectionné.

<figure><img src="https://1244787492-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNDxbAdc00ce6bH5u1urh%2Fuploads%2FdzFdAJrMazh5YRh2kP3Q%2FScreenshot%202026-02-24%20at%2010.18.51%E2%80%AFAM.png?alt=media&amp;token=d1f5c52a-e953-480c-9361-dc09fba488dc" alt="" width="563"><figcaption></figcaption></figure>


---

# 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.didomi.io/fr/widgets/editeur-de-widget/composants-du-widget.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.