> For the complete documentation index, see [llms.txt](https://help.impact.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.impact.com/brand/fr/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/widget-experiences/widget-editor-overview.md).

# Vue d'ensemble de l'éditeur de widget

Votre programme Advocate propose un éditeur par glisser-déposer qui vous permet de personnaliser l’apparence et le contenu des widgets présentés à vos ambassadeurs clients.

## Interface de l’éditeur de widgets

L’éditeur de widgets en libre-service comporte quatre zones principales :

<div data-with-frame="true"><figure><img src="https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2F5lBstm39QZFddtyAHWzK%2FCanvas%20(2).png?alt=media&#x26;token=b8ae9b78-8cea-425e-8cd8-e35a0b97535a" alt="" width="563"><figcaption></figcaption></figure></div>

{% tabs %}
{% tab title="Barre de menu supérieure" %}
La barre de menu en haut de la page est l’endroit où vous pouvez annuler des actions, afficher le code HTML et prévisualiser le widget finalisé. Utilisez les icônes ordinateur de bureau, tablette ou mobile pour voir comment votre widget apparaîtra sur des appareils de différentes tailles d’écran.
{% endtab %}

{% tab title="Zone de travail" %}
La zone de travail affiche tous les composants qui composent votre widget. Vous pouvez sélectionner des composants individuels pour les modifier, ou en ajouter de nouveaux et voir d’un coup d’œil comment ils apparaîtront à vos participants. Faites glisser un composant vers une nouvelle position sur la zone de travail pour le réorganiser.
{% endtab %}

{% tab title="Panneau latéral gauche" %}
Le menu de paramètres du panneau latéral gauche est un panneau repliable à gauche de la zone de travail. Ici, vous pouvez sélectionner **Calques** pour voir une vue détaillée de tous les composants de votre widget, ou sélectionner **Modèles** pour utiliser l’un de nos widgets prédéfinis. Le **Paramètres** bouton vous mène au sous-menu d’installation du package.

Pour aller encore plus loin dans le style au niveau de l’image de marque, sélectionnez l’option Style du widget. Consultez Personnaliser les widgets et les microsites avec l’Éditeur de contenu pour plus d’informations sur les options de style à votre disposition.
{% endtab %}

{% tab title="Composant" %}
Le menu des composants est un panneau situé à droite de la zone de travail. Utilisez le **Ajouter** onglet pour insérer de nouveaux composants dans la zone de travail, et utilisez l’ **Modifier** onglet pour apporter des modifications à ce qui s’y trouve déjà.
{% endtab %}
{% endtabs %}

## Dépannage

Le widget comporte deux niveaux de validation pour vérifier les erreurs dans le placement des composants et dans les propriétés des composants. Les raisons courantes d’un message d’erreur incluent :

* Champ obligatoire manquant
* Choisir une couleur non valide
* Saisir une URL non valide

Lorsque des erreurs restent à résoudre, un message d’avertissement s’affiche en haut à droite de la zone de travail et vous indique le nombre d’erreurs trouvées.

<div data-with-frame="true"><figure><img src="https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-511216419b1ffaa7cf19cda9c94f06eedbbdaabc%2Fb0790ca38faffb4d36e8ed5d551995d0231df77a9958ffb98e857740cd207626.jpg?alt=media" alt="" width="333"><figcaption></figcaption></figure></div>

En savoir plus sur la personnalisation des widgets du programme.

## **Afficher les détails des erreurs non résolues**

1. Sélectionnez **Détails** dans le message d’avertissement pour obtenir une brève explication de ce qui s’est mal passé.
2. Accédez au composant présentant l’erreur en :
   * Sélectionnant **Ouvrir les calques**
   * Sélectionnant le message d’explication de l’erreur
3. Trouvez le composant en erreur. Il sera signalé par une icône d’exclamation rouge.
4. Sélectionnez le composant pour ouvrir les propriétés dans la **Modifier** barre.
5. Apportez les modifications requises.


---

# 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 by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://help.impact.com/brand/fr/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/widget-experiences/widget-editor-overview.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.