> 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).

# Aperçu de l'éditeur de widgets

Votre programme Advocate propose un éditeur de type 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="/files/208c7c96e868feeb74e4f39101b15cd389f2c641" 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 terminé. Utilisez les icônes ordinateur, tablette ou mobile pour voir comment votre widget apparaîtra sur des appareils de différentes tailles d’écran.
{% endtab %}

{% tab title="Toile" %}
La toile affiche tous les composants qui constituent votre widget. Vous pouvez sélectionner des composants individuels pour les modifier, ou en ajouter de nouveaux et voir en un coup d’œil comment ils apparaîtront pour vos participants.
{% endtab %}

{% tab title="Panneau coulissant de gauche" %}
Le menu des paramètres du panneau coulissant de gauche est un panneau repliable à gauche de la toile. Ici, vous pouvez sélectionner **Calques** pour voir un affichage détaillé 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 conduit au sous-menu d’installation du package.

Pour aller encore plus loin dans le style au niveau de l’identité visuelle, sélectionnez l’option Style du widget. Consultez [Personnalisez les widgets et les microsites avec l’éditeur de contenu](/brand/fr/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/customize-widgets-and-microsites-with-the-content-editor.md) 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 toile. Utilisez l’onglet **Ajouter** pour insérer de nouveaux composants dans la toile, et utilisez l’onglet **Modifier** pour apporter des ajustements à ce qui s’y trouve déjà.
{% endtab %}
{% endtabs %}

#### Dépannage

Le widget dispose de 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 de l’affichage d’un message d’erreur incluent :

* Omission d’un champ obligatoire
* Choix d’une couleur invalide
* Saisie d’une URL invalide

Lorsque des erreurs non résolues subsistent, un message d’avertissement s’affiche en haut à droite de la toile pour vous indiquer combien d’erreurs ont été trouvées.

<div data-with-frame="true"><figure><img src="/files/35839980a5fe690e2cf78b3aa4231ea8c03e5dab" alt="" width="333"><figcaption></figcaption></figure></div>

En savoir plus sur [Personnalisation des widgets du programme](/brand/fr/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/widget-experiences/customize-program-widgets.md).

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

1. Sélectionnez **Détails** sur le message d’avertissement pour une brève explication de ce qui a mal tourné.
2. Accédez au composant contenant l’erreur en :
   * La sélection de **Ouvrir les calques**
   * Sélectionner le message d’explication de l’erreur
3. Recherchez le composant contenant l’erreur. Il sera marqué d’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 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://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=<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.