> 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éder à l'éditeur de widgets

1. Dans le menu de navigation de gauche, sélectionnez ![](https://57104473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-230534471fef5f40808e921e41ee44e4a06ded03%2Fe6cb9548999afdc1ed3ce4942e4cb5b45b5cecbd323267aac2a7cd1915fccc09.svg?alt=media) **\[Engage] → Contenu**.
2. Sur la *Widgets* carte, 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="https://57104473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2F0I1JAhlX9u017vOG1oiM%2FScreenshot%202026-05-18%20at%2009.39.01.png?alt=media&amp;token=9315e124-9a39-4aa7-9a74-15c1d76cef00" alt="" width="347"><figcaption></figcaption></figure></div>

#### Personnalisez vos widgets

{% stepper %}
{% step %}
**Étape 1 : Choisissez 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="https://57104473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2FUprZtBVbqNwCSdeRzWgh%2FScreenshot%202026-05-18%20at%2009.22.47.png?alt=media&amp;token=ffb2f798-297e-4f6c-a154-30146230482c" 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 ![](https://57104473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-190c6a03e6a68d67509d00452b10fd803bee5c87%2F57c7cba09bd1b97dd75b7c245e517c8d1ca0469d7c57bdc13ee6e427b75a860a.svg?alt=media) **\[Aperçu]** avant d’enregistrer. Sélectionnez 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 pour modifier le contenu que voient les ambassadeurs clients dans le widget.

{% hint style="success" %}
**Remarque :** Pour une explication des différents éléments de l’éditeur de widgets, consultez [Vue d’ensemble de l’éditeur de widgets](/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 le *Composant* du menu **Ajouter** onglet, 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 la manière dont ils sont regroupés.
2. Sélectionnez le composant approprié.
3. Sélectionnez le bouton bleu **Ajouter à** bouton à l’endroit où vous souhaitez que le composant apparaisse sur le canevas.

   <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-faf3362b50a4598aeacff4ca831e5dcef8c7ef6e%2F346370cdced07562b504cd2b9bf6bf08b51539060e9551f784f029d4899ffa12.jpg?alt=media" 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* composant, vous pourrez sélectionner une nouvelle image et modifier la couleur d’arrière-plan. Si vous sélectionnez un élément contenant uniquement du 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’ *Composant* du menu **Modifier** onglet pour modifier ses propriétés.

   * Si vous souhaitez insérer un lien dans un composant textuel, 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="https://57104473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-3e26ab9dbdff4f8e5d3d3e078d965672ade44d45%2F026f0ef0af7421ecfab6535433ea587862ec12c5223e8b393ef1db1228676e1f.jpg?alt=media" 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 ![](https://57104473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-9e2a26b918e7394cf67e8a26e3713e081b203ac9%2F15d049b0c04d1c54c39dbbb5a7cd2ba64d86f1f99220111674e768744ea7ceb9.svg?alt=media) **\[Déplacer]**.
   * Certains composants ne peuvent pas être déplacés. L’ ![](https://57104473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-9e2a26b918e7394cf67e8a26e3713e081b203ac9%2F15d049b0c04d1c54c39dbbb5a7cd2ba64d86f1f99220111674e768744ea7ceb9.svg?alt=media) **\[Déplacer]** option n’apparaîtra que s’il existe un autre emplacement valide sur le canevas vers lequel déplacer le composant.
3. Sélectionnez le bouton bleu **Déplacer vers** bouton à l’endroit où vous souhaitez placer le composant.

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

   <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-7bd9887e9f359c787f834a8344a181d7bb186dd3%2Faadaf737882c59604dcaa6bbed1857c867a32cad8c3dd8ea7975c047c04e6a3f.jpg?alt=media" 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 ![](https://57104473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-c5ab8423372b2c345ded634b7aa4cab16c87fe3a%2Fd17a259fe817ff10ea9fd87140a89bd62ece6fa9940e05902574dcf95bed5960.svg?alt=media) **\[Supprimer]**.

   <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-030ab8fb2f678027aa57af859245968daee6f736%2F987319390fa75c5fb85f94d2d6e0a951fbf4511a72dbd91af4e55c8f39317301.jpg?alt=media" alt="" width="507"><figcaption></figcaption></figure></div>

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

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

**Ajoutez des images ou des logos**

1. À droite, dans le *Composant* du menu **Ajouter** onglet, sélectionnez la **Composants courants** catégorie.
2. Sélectionnez l’un des éléments suivants :
   * **Image principale superposée** (une image avec du texte superposé modifiable)
   * **Image** (une image simple sans texte par-dessus)
3. Ajoutez l’image au canevas.
4. À partir du *Du menu des composants* **Modifier** onglet, sélectionnez la **Choisir un fichier** bouton sous le *Image* titre.

   <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%2FlgpOwJZHPh4UAnrEyoZ2%2FScreenshot%202026-05-18%20at%2009.26.52.png?alt=media&amp;token=6430a500-8532-4fda-9789-1c879854cb67" alt="" width="295"><figcaption></figcaption></figure></div>

**Remplacez des images ou des logos**

1. Dans le canevas, sélectionnez la photo que vous souhaitez modifier.
2. Dans le **Modifier** menu, sélectionnez ![](https://57104473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-d05e21635c52fff94d35ca4c6b05c1deecc699ef%2F768d04f4d7e1b5b745577812f7d67db99d988bfc34749b6e575a04438d6cee36.svg?alt=media) **\[Supprimer]** puis sélectionnez **Choisir un fichier** pour téléverser à nouveau une nouvelle image.

   <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%2FnLgD9kbzviI0PLgHBwi2%2FScreenshot%202026-05-18%20at%2009.27.57.png?alt=media&amp;token=f6eddd68-8246-4d60-8470-ab4cf3a66c9a" alt="" width="299"><figcaption></figcaption></figure></div>
3. Téléversez l’image à l’aide de l’une de ces méthodes :
   * Faites glisser et déposez l’image
   * Parcourez les fichiers de votre ordinateur pour trouver un fichier
   * 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 **Modifier** menu.

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 *support de partage* titre.

   <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%2FNvgjnWp81PZSbXRInnFF%2FScreenshot%202026-05-18%20at%2009.30.34.png?alt=media&amp;token=a9e03a88-d25c-4f80-a304-a922741ca5d2" alt="" width="296"><figcaption></figcaption></figure></div>

Ajoutez un nouveau bouton de partage en utilisant le **Ajouter** menu.

1. À partir du **Ajouter** onglet, sélectionnez **Partage**.

   <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%2FAjOJfvj8X7nfL0AAJTJK%2FScreenshot%202026-05-18%20at%2009.31.51.png?alt=media&amp;token=5abcab17-8b61-4df8-892b-41db83253eb3" 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 ![](https://57104473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-190c6a03e6a68d67509d00452b10fd803bee5c87%2F57c7cba09bd1b97dd75b7c245e517c8d1ca0469d7c57bdc13ee6e427b75a860a.svg?alt=media) **\[Aperçu]** dans la barre de menu supérieure.
   * Vous pouvez basculer entre un aperçu de l’expérience pour ![](https://57104473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-ae8027a26340e35a4d47f2a067cfadc9fc78113f%2F286f2a6c1251052ae82b73cd1c52b622b18f5203ba9cc10fde4d74292ac28d34.png?alt=media) **\[Ordinateur]**, ![](https://57104473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-deeb14b0e398d5dbb2dfb280d3fd7d8e9411b26e%2F74c7be4be7f1d77a3793767c29c5bd878acceacf1d2533055231d5110b12dd61.png?alt=media) **\[Tablette]**, ou ![](https://57104473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-6156958cf5fc18498276161791a0514d9005d7cf%2F906c40a4da5b9c02a51450974f61a71761acc07baff3052b53f708d5b768a9be.png?alt=media) **\[Mobile]** utilisateurs en sélectionnant l’icône d’appareil correspondante.
2. Pour revenir à l’interface de modification, sélectionnez ![](https://57104473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-60e9ace573178da411cb3be9c6f3b0f4b7e5b524%2F4094fadf599e544cfc618c18eb22087defdb9be38a580cd0041a242a88294e1e.svg?alt=media) **\[Modifier]** dans la barre de menu supérieure.

   <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%2FLtrKm25PXlhbzNvd63Kd%2FScreenshot%202026-05-18%20at%2009.32.48.png?alt=media&amp;token=6e306358-0acf-4592-bcdd-5122c7fee062" 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 widgets n’enregistre pas automatiquement vos modifications. Cliquez sur <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 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 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 de section conditionnelle sur le segment** vous permettra de le faire.

Vous pouvez ajouter des composants avancés depuis l’ **Ajouter** onglet. Leur configuration demande un peu plus de travail, car vous devrez saisir une [expression JSONata](http://docs.jsonata.org/overview.html) dans le *Condition* qui définit la logique d’activation 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 paquets 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, 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/customize-program-widgets.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.