# Présentation 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 clients défenseurs.

#### Interface de l'éditeur de widget

L'éditeur de widget en libre-service comporte quatre zones principales :

<div data-with-frame="true"><figure><img src="https://57104473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-f343272a45c0ebe8a90036c489173dbdc96cb155%2F692288b3de9942b25196de77402f176c0b491974bcb06f24239e69499e3dca88.jpg?alt=media" alt=""><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 fini. Utilisez les icônes bureau, tablette ou mobile pour voir comment votre widget apparaîtra sur des appareils aux tailles d'écran différentes.
{% endtab %}

{% tab title="Zone de travail (canvas)" %}
La zone de travail 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 d'un coup d'œil comment ils s'afficheront pour vos participants.
{% endtab %}

{% tab title="Panneau latéral gauche" %}
Le menu de paramètres coulissant à gauche est un panneau rétractable à gauche de la zone de travail. Ici, vous pouvez sélectionner **Couches** 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éconçus. Le **Paramètres** bouton vous conduit au sous-menu d'installation du package.

Pour un niveau de stylisation encore plus poussé au niveau de la marque, sélectionnez l'option Style du Widget. Consultez [Personnaliser les widgets et les microsites avec l'éditeur de contenu](https://help.impact.com/brand/fr/que-souhaitez-vous-apprendre/advocate-program/manage-advocate-participant-experiences/customize-widgets-and-microsites-with-the-content-editor) pour plus d'informations sur les options de style disponibles.
{% endtab %}

{% tab title="Composant" %}
Le menu des composants est un panneau à droite de la zone de travail. Utilisez l'onglet **Ajouter** pour insérer de nouveaux composants dans la zone de travail, et utilisez l'onglet **Modifier** pour effectuer des ajustements sur ce qui est déjà présent.
{% endtab %}
{% endtabs %}

#### Dépannage

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

* Champ requis manquant
* Choix d'une couleur invalide
* Saisie d'une URL invalide

Lorsque vous avez des erreurs non résolues, un message d'avertissement s'affiche en haut à droite de la zone de travail et vous informe du nombre d'erreurs trouvées.

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

En savoir plus sur [Personnalisation des widgets du programme](https://help.impact.com/brand/fr/que-souhaitez-vous-apprendre/advocate-program/manage-advocate-participant-experiences/widget-experiences/customize-program-widgets).

**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 avec 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 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.