# 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 [calque de widget](https://docs.didomi.io/moIvfcA7NSpjmwGZ7dzv/fr/widgets/editeur-de-widget/gerer-les-couches-du-widget) en ajoutant et en réorganisant les composants dans une interface utilisateur finale spécifiée. 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 **Widgets** dans le panneau de gauche et sélectionnez l' **Modifier** icône en ligne 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&#x26;token=29ebf0d6-3354-46e7-a1d8-057d9db45da0" alt="" width="563"><figcaption></figcaption></figure>

{% hint style="info" %}
Pour chaque nouveau widget créé, Didomi fournira plusieurs calques préremplis avec des composants.&#x20;
{% endhint %}

***

### Glossaire des composants

Le panneau gauche de la page suivante est la bibliothèque de composants et les composants suivants peuvent être ajoutés et configurés sur un calque 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&#x26;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 organise ses éléments enfants verticalement.</td></tr><tr><td>Ligne</td><td>Ajoute un conteneur de ligne flexible qui organise ses éléments enfants horizontalement.</td></tr><tr><td>Conteneur</td><td>Ajoute un conteneur flexible qui prend en charge le style réactif</td></tr><tr><td>Titre</td><td>Insère un en-tête qui rend l'élément d'en-tête HTML approprié (h1-h6) </td></tr><tr><td>Texte</td><td>Insère un bloc de texte</td></tr><tr><td>Accepter tout</td><td>Insère un bouton qui accorde le consentement à tous les fournisseurs et finalités inclus dans le flux de consentement</td></tr><tr><td>Refuser tout</td><td>Insère un bouton qui rejette tous les fournisseurs et toutes les finalités inclus dans le flux de consentement</td></tr><tr><td>Enregistrer</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 calque</td><td>Insère un bouton de navigation qui permet à un utilisateur final de naviguer vers un calque spécifié dans le widget</td></tr><tr><td>Bouton Retour</td><td>Insère un bouton de navigation qui permet à un utilisateur final de revenir au calque précédent 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 la marque configuré pour la marque utilisée dans le flux de consentement</td></tr><tr><td>Liste empilée</td><td>Affiche des finalités TCF groupées configurées pour le Transparency and Consent Framework (TCF). Les informations affichées dans l'aperçu du widget sont des données d'exemple uniquement.<br><br><mark style="background-color:$warning;"><strong>Remarque</strong>: Ce composant n'est applicable que dans les flux de consentement qui utilisent le Transparency and Consent Framework (TCF) lorsqu'ils prennent en charge le 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 des finalités avec des descriptions extensibles qui sont incluses dans le flux de consentement<br><br><mark style="background-color:$warning;"><strong>Remarque</strong>: Les informations affichées dans l'aperçu du widget sont des données d'exemple uniquement.</mark></td></tr><tr><td>Liste des fournisseurs</td><td>Affiche les fournisseurs et leurs informations respectives qui sont inclus dans le flux de consentement<br><br><mark style="background-color:$warning;"><strong>Remarque</strong>: Les informations affichées dans l'aperçu du widget sont des données d'exemple uniquement.</mark></td></tr><tr><td>Informations utilisateur</td><td><p>Un accordéon rétractable qui affiche les informations suivantes de l'utilisateur final :</p><ul><li>ID utilisateur</li><li><a href="../../commencer/general/didomi-consent-string-dcs-et-signature">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 le placement 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&#x26;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. Une fois le composant surligné, cliquez sur l' **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&#x26;token=b4d9f945-954d-48ec-9bea-e0d401c2e97b" alt="" width="563"><figcaption></figcaption></figure>

### Déplacer un composant de widget

Pour déplacer un composant à une position différente dans le widget, accédez à l'aperçu du widget et sélectionnez le composant. Une fois le composant surligné, cliquez et maintenez enfoncé le **Faites 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 le placement 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&#x26;token=10cc8135-a0c5-44b7-b930-ec0d3e1050ae" alt="" width="563"><figcaption></figcaption></figure>

### Paramètres du composant

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

{% hint style="info" %}
Les paramètres disponibles pour chaque composant varient et certains composants n'ont aucun paramètre pouvant être configuré.
{% 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;

Une fois le composant surligné, accédez au panneau de droite et assurez-vous que l' **Paramètres** onglet 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&#x26;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&#x26;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 tous les éléments de style/conception configurés pour la marque. Lorsqu'une marque et un widget sont utilisés dans un flux de consentement, le style configuré pour le widget prévaudra et le style de la marque sera le défaut si aucun style de remplacement n'est disponible.

{% hint style="info" %}
Utilisez l'onglet style pour remplacer tout style de marque lors de la configuration des points de rupture/déplacements de mise en page. [Cliquez ici](https://docs.didomi.io/moIvfcA7NSpjmwGZ7dzv/fr/widgets/editeur-de-widget/configurer-les-points-de-rupture-du-widget) 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. Une fois le composant surligné, accédez au panneau de droite et cliquez sur le **Style** onglet.&#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&#x26;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&#x26;token=d1f5c52a-e953-480c-9361-dc09fba488dc" alt="" width="563"><figcaption></figcaption></figure>