# Personnaliser les widgets du programme

#### Accédez à l’éditeur de widget

1. Dans le menu de navigation de gauche, sélectionnez ![](/files/15f4c8f88cb75624c1f6a18cb768e8f494128ac4) **\[Engage] → Contenu**.
2. Dans la *carte Widgets* , sélectionnez **Modifier les widgets.**
3. Dans le menu latéral gauche, sélectionnez le nom du widget que vous souhaitez modifier.

   <div data-with-frame="true"><figure><img src="/files/5aef89a68b6987d3ae57101127bb3f2df1345f53" alt="" width="513"><figcaption></figcaption></figure></div>

#### Personnalisez vos widgets

{% stepper %}
{% step %}
**Étape 1 : Choisir un modèle**

1. Dans le menu latéral gauche, sous *Widget actuel*, sélectionnez **Modèles**.
2. Sélectionnez **Appliquer le modèle** à côté du modèle avec lequel vous souhaitez commencer.

   <div data-with-frame="true"><figure><img src="/files/b5cbae3b44d6c94be1eecea78d23ac996b4204d7" alt="" width="563"><figcaption></figcaption></figure></div>

{% hint style="success" %}
**Remarque :** Si vous souhaitez prévisualiser l’apparence du modèle sans valider la modification, sélectionnez ![](/files/9c70289e5347ccdebfcdaf9fe9398512621d1332) **\[Aperçu]** avant d’enregistrer. Ne sélectionnez le **Enregistrer** bouton que lorsque vous êtes prêt à valider les modifications apportées.
{% endhint %}
{% endstep %}

{% step %}
**Étape 2 : Ajuster le contenu du widget**

Vous pouvez ajouter, modifier, déplacer ou supprimer des composants pour modifier le contenu que vos ambassadeurs clients voient dans le widget.

{% hint style="success" %}
**Remarque :** Pour une explication des différents éléments de l’éditeur de widget, consultez [Aperçu de l’éditeur de widget](/brand/fr/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/widget-experiences/widget-editor-overview.md).
{% endhint %}

{% tabs %}
{% tab title="Ajouter" %}

1. Sur la droite de la page, dans l’onglet du menu *Composant* , **Ajouter** sélectionnez un groupe de composants.
   * En savoir plus sur les [composants disponibles](/brand/fr/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/widget-and-microsite-components-explained.md) et sur la manière dont ils sont regroupés.
2. Sélectionnez le composant approprié.
3. Sélectionnez le bouton bleu **Ajouter à** à l’endroit où vous souhaitez que le composant apparaisse sur le canevas.

   <div data-with-frame="true"><figure><img src="/files/f77f07976d24e47fd2cd180ae1bdd9499b97d029" alt="" width="563"><figcaption></figcaption></figure></div>

{% endtab %}

{% tab title="Modifier" %}
Les propriétés que vous pouvez modifier dépendront du type de composant que vous avez sélectionné. Par exemple, si vous sélectionnez le *Image principale* , vous pourrez choisir une nouvelle image et modifier la couleur d’arrière-plan. Si vous sélectionnez un élément sans texte comme un en-tête, vous pourrez alors modifier la police, la couleur du texte et le contenu du texte.

1. Sélectionnez le composant que vous souhaitez modifier.
2. Utilisez les options de l’onglet *Composant* , **Modifier** pour modifier ses propriétés.

   * Si vous souhaitez insérer un lien dans un composant texte, vous pouvez [le faire en modifiant le HTML du widget](/brand/fr/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/edit-your-widget-or-microsite-html-and-css-for-advocate.md).

   <div data-with-frame="true"><figure><img src="/files/b49967519452b59922a8b45cbc2f44000077e28f" alt="" width="563"><figcaption></figcaption></figure></div>

{% endtab %}

{% tab title="Déplacer" %}

1. Dans le canevas, sélectionnez le composant que vous souhaitez déplacer.
2. Sélectionnez ![](/files/ce63870ac4ae83bfd63d778a6f0e6a83d61c1f3d) **\[Déplacer]**.
   * Certains composants ne peuvent pas être déplacés. L’option ![](/files/ce63870ac4ae83bfd63d778a6f0e6a83d61c1f3d) **\[Déplacer]** n’apparaîtra que s’il existe un autre emplacement valide sur le canevas vers lequel le composant peut être déplacé.
3. Sélectionnez le bouton bleu **Déplacer vers** le bouton où vous voulez que le composant aille.

   * Au lieu d’un glisser-déposer, vous devrez sélectionner le bouton puis choisir la destination.

   <div data-with-frame="true"><figure><img src="/files/5c063baa60de6a7818aae4077fd82f008110c95e" alt="" width="563"><figcaption></figcaption></figure></div>

{% endtab %}

{% tab title="Supprimer" %}

1. Sélectionnez sur le canevas le composant que vous souhaitez supprimer.
2. Sélectionnez ![](/files/f09fcf11e09fae1cea484bc941dff985df4bbab4) **\[Supprimer]**.

   <div data-with-frame="true"><figure><img src="/files/a3135e6da20e28d0a1d87e4b2dca986d1bac2908" alt="" width="507"><figcaption></figcaption></figure></div>

{% endtab %}
{% endtabs %}
{% endstep %}

{% step %}
**Étape 3 : Personnaliser l’apparence et le thème du widget**

**Ajouter des images ou des logos**

1. À droite, dans l’onglet *Composant* , **Ajouter** , sélectionnez la catégorie **Composants courants** .
2. Sélectionnez soit :
   * **Image principale superposée** (une image avec du texte superposé modifiable)
   * **Image** (une image simple sans texte superposé)
3. Ajoutez l’image au canevas.
4. Depuis le *Bouton du menu des* **Modifier** , sélectionnez la catégorie **Choisir un fichier** composants sous l’ *Image* en-tête.

   <div data-with-frame="true"><figure><img src="/files/8514968027b99d15615311f469d9af566538d386" alt="" width="353"><figcaption></figcaption></figure></div>

**Remplacer des images ou des logos**

1. Dans le canevas, sélectionnez la photo que vous souhaitez modifier.
2. Dans le **Modifier** menu, sélectionnez ![](/files/a45369d350884036488795c951d5ed574ca5ea39) **\[Supprimer]** puis sélectionnez **Choisir un fichier** pour téléverser de nouveau une image.

   <div data-with-frame="true"><figure><img src="/files/202eef9e3459267ee23128ad24c4e157320c4856" alt="" width="351"><figcaption></figcaption></figure></div>
3. Téléversez l’image à l’aide de l’une de ces méthodes :
   * Faites glisser l’image et déposez-la
   * Parcourez les fichiers de votre ordinateur
   * Dans le *Adresse web* onglet, collez l’URL publique du fichier
4. Sélectionnez **Terminé**.

**Ajuster les boutons de partage affichés**

Vous pouvez modifier les boutons de partage existants à l’aide du menu **Modifier** .

1. Sélectionnez le bouton de partage que vous souhaitez modifier sur le canevas.
2. Dans le **Modifier** onglet, sélectionnez le nom du site ou du service sous le *Média de partage* en-tête.

   <div data-with-frame="true"><figure><img src="/files/f398d118cbb871e19cb4ac1615be74b28b510821" alt="" width="356"><figcaption></figcaption></figure></div>

Ajoutez un nouveau bouton de partage en utilisant l’onglet **Ajouter** .

1. Depuis le **Ajouter** sélectionnez **Partage**.

   <div data-with-frame="true"><figure><img src="/files/dd003df05b9e1f55a12e6ba9d08eada2578b6e56" alt="" width="339"><figcaption></figcaption></figure></div>
2. Sélectionnez la carte appropriée.
3. Sélectionnez le bouton bleu **Ajouter à** bouton pour placer le composant sur le canevas.
   {% endstep %}

{% step %}
**Étape 4 : Prévisualiser et enregistrer**

1. Prévisualisez l’apparence du widget pour vos participants en sélectionnant ![](/files/9c70289e5347ccdebfcdaf9fe9398512621d1332) **\[Aperçu]** dans la barre de menu supérieure.
   * Vous pouvez basculer entre un aperçu de l’expérience pour les utilisateurs ![](/files/1ffcd86e91d6fc7024f6e89ebe352cb4ac758f8a) **\[Ordinateur]**, ![](/files/0d60bcce5c8efb6384b7af28347659848d122966) **\[Tablette]**, ou ![](/files/e617f3c39904082f666d436446c4e3a4d31629ec) **\[Mobile]** en sélectionnant l’icône de l’appareil correspondant.
2. Pour revenir à l’interface de modification, sélectionnez ![](/files/e70ce6a218a2be2bc95d8afb3648b57f063c6955) **\[Modifier]** dans la barre de menu supérieure.

   <div data-with-frame="true"><figure><img src="/files/d5b5ddfc9df1aa93de281482e164c484e4ee94f1" alt=""><figcaption></figcaption></figure></div>
3. **Enregistrer** vos modifications.

   <div data-gb-custom-block data-tag="hint" data-style="warning" class="hint hint-warning"><p><strong>Avertissement :</strong> L’éditeur de widget n’enregistre pas automatiquement vos modifications. Cliquez <strong>Enregistrer</strong> fréquemment pour vous assurer de ne pas perdre votre travail.</p></div>

Lorsque vous sélectionnez **Enregistrer**, les modifications seront ajoutées à votre [brouillon de programme](/brand/fr/what-would-you-like-to-learn-about/advocate-program/getting-started-with-advocate/create-and-publish-a-program-draft-for-advocate.md).
{% endstep %}
{% endstepper %}

#### Options de personnalisation avancées

Les composants avancés vous permettent d’inclure du contenu conditionnel basé sur l’ *e-mail*, *segment*, ou *champ personnalisé*. Par exemple, si vous souhaitez afficher un classement uniquement pour les participants abonnés au niveau or, le composant **section conditionnelle sur le segment** vous permettra de le faire.

Vous pouvez ajouter des composants avancés depuis l’onglet **Ajouter** . Leur configuration demande un peu plus de travail, car vous devrez saisir une [expression JSONata](http://docs.jsonata.org/overview.html) dans le *boîte de condition* qui définit la logique de vérification de la condition. Contactez notre [équipe d’assistance](mailto:saasquatch-support@impact.com) si vous avez besoin d’aide.

#### En savoir plus

* [Modifiez le HTML de votre widget ou microsite pour Advocate](#access-the-widget-editor-0-0)
* [Installez des packages NPM personnalisés pour Advocate](/brand/fr/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/install-custom-npm-packages-for-advocate.md)


---

# Agent Instructions: 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:

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

The question should be specific, self-contained, and written in natural language.
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.