> 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/customize-program-widgets.md).

# 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 *Widgets* carte, sélectionnez **Modifier les widgets.**
3. Dans le menu coulissant de gauche, sélectionnez le nom du widget que vous souhaitez modifier.

   <div data-with-frame="true"><figure><img src="/files/5080e085ff22e918299237143fc853b2e1b805b7" alt="" width="347"><figcaption></figcaption></figure></div>

#### Personnalisez vos widgets

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

1. Dans le menu coulissant de 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/bf2c9f6cb0d3d653e784d2b6860caa863876591d" alt="" width="375"><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. Sélectionnez uniquement le **Enregistrer** bouton une fois que vous êtes prêt à valider les modifications apportées.
{% endhint %}
{% endstep %}

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

Vous pouvez ajouter, modifier, déplacer ou supprimer des composants afin de 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, reportez-vous à [Vue d’ensemble 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 le côté droit de la page, dans l’onglet du menu *Composant* du menu **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 composant *Image principale* , vous pourrez choisir une nouvelle image et modifier la couleur d’arrière-plan. Si vous sélectionnez un élément ne contenant que du texte, comme un en-tête, vous pourrez alors modifier la police, la couleur du texte et le contenu textuel.

1. Sélectionnez le composant que vous souhaitez modifier.
2. Utilisez les options de l’onglet *Composant* du menu **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** bouton à l’endroit où vous souhaitez placer le composant.

   * Au lieu d’une approche par 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 le composant que vous souhaitez supprimer dans le canevas.
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 : Personnalisez l’apparence et le thème du widget**

**Ajouter des images ou des logos**

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

   <div data-with-frame="true"><figure><img src="/files/7edcf8b0de5df7c530a131e9424000e642fff590" alt="" width="295"><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 **bouton Choisir un fichier sous l’en-tête** pour téléverser de nouveau une nouvelle image.

   <div data-with-frame="true"><figure><img src="/files/95f98c145f4f5d8ad04744f97b39e871f1ea166b" alt="" width="299"><figcaption></figcaption></figure></div>
3. Téléversez l’image à l’aide de l’une de ces méthodes :
   * Glissez et déposez l’image
   * Parcourir un fichier sur votre ordinateur
   * Dans le *Adresse Web* onglet, collez l’URL publique du fichier
4. Sélectionnez **Terminé**.

**Ajustez 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 dans le canevas.
2. Dans le **Modifier** onglet, sélectionnez le nom du site ou du service sous le *Média de partage* .

   <div data-with-frame="true"><figure><img src="/files/6f64a7667d35fcadb015fdb817c78bf07c73389e" alt="" width="296"><figcaption></figcaption></figure></div>

Ajoutez un nouveau bouton de partage à l’aide de l’onglet **Ajouter** .

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

   <div data-with-frame="true"><figure><img src="/files/72f67daf17f78b6089a141ec48305e5b5a8fbb82" alt="" width="283"><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évisualisez et enregistrez**

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 passer d’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/0b33e7a807a9581e2f0ed9f0938514242c5d36d2" alt="" width="563"><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 fréquemment sur <strong>Enregistrer</strong> afin de vous assurer de ne pas perdre votre travail.</p></div>

Lorsque vous sélectionnez **Enregistrer**, les modifications seront ajoutées à votre [brouillon du 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 le *e-mail*, *segment*, ou *champ personnalisé*. Par exemple, si vous souhaitez afficher un classement uniquement aux participants abonnés de niveau or, le composant **section conditionnelle sur 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 la zone *Condition* qui définit la logique de déclenchement 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)
* [Installer 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
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:

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