> 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 widgets
1. Dans le menu de navigation de gauche, sélectionnez  **\[Engage] → Contenu**.
2. Sur la *Widgets* carte, sélectionnez **Modifier les widgets.**
3. Dans le menu latéral de gauche, sélectionnez le nom du widget que vous souhaitez modifier.
## Personnalisez vos widgets
{% stepper %}
{% step %}
### **Étape 1 : Choisissez un modèle**
1. Dans le menu latéral 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.
{% hint style="success" %}
**Remarque :** Si vous voulez prévisualiser l’apparence du modèle sans valider la modification, sélectionnez  **\[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 : Ajustez 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 widgets, consultez la Vue d’ensemble de l’éditeur de widgets.
{% 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 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.
{% 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 uniquement textuel comme un en-tête, vous pouvez alors modifier la police, la couleur du texte et le contenu du texte.
1. Sélectionnez le composant que vous voulez 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 de texte, vous pouvez le faire en modifiant le HTML du widget.
{% endtab %}
{% tab title="Déplacer" %}
1. Dans le canevas, sélectionnez et maintenez enfoncé le composant que vous souhaitez déplacer.
2. Faites glisser le composant vers son nouvel emplacement sur le canevas, puis relâchez-le pour le déposer à cet endroit.
* Certains composants ne peuvent pas être déplacés. Si un composant n’est pas glissable, il ne bougera pas lorsque vous tenterez de le repositionner.
{% endtab %}
{% tab title="Supprimer" %}
1. Sélectionnez le composant que vous voulez supprimer sur le canevas.
2. Sélectionnez  **\[Supprimer]**.
{% 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 superposé)
3. Ajoutez l’image au canevas.
4. À partir du *menu des composants* **Modifier** onglet, sélectionnez la **Choisir un fichier** bouton sous le *Image* titre.
#### **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  **\[Supprimer]** puis sélectionnez **Choisir un fichier** pour téléverser de nouveau une nouvelle image.
3. Téléversez l’image à l’aide de l’une de ces méthodes :
* Glissez-déposez l’image
* Parcourez les fichiers de 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 **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.
Ajoutez un nouveau bouton de partage en utilisant le **Ajouter** menu.
1. À partir du **Ajouter** onglet, sélectionnez **Partage**.
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  **\[Aperçu]** dans la barre de menu supérieure.
* Vous pouvez passer d’un aperçu de l’expérience pour  **\[Ordinateur]**,  **\[Tablette]**, ou  **\[Mobile]** les utilisateurs en sélectionnant l’icône d’appareil correspondante.
2. Pour revenir à l’interface de modification, sélectionnez  **\[Modifier]** dans la barre de menu supérieure.
3. **Enregistrer** vos modifications.
{% hint style="warning" %}
**Avertissement :** L’éditeur de widgets n’enregistre pas automatiquement vos modifications. Cliquez sur **Enregistrer** régulièrement pour être sûr de ne pas perdre votre travail.
{% endhint %}
Lorsque vous sélectionnez **Enregistrer**, les modifications seront ajoutées au brouillon de votre programme.
{% 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 **section conditionnelle sur le segment** composant vous permettra de le faire.
Vous pouvez ajouter des composants avancés à partir de 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 la *Condition* case qui définit la logique lorsque la condition est remplie. Contactez notre [équipe d’assistance](mailto:saasquatch-support@impact.com) si vous avez besoin d’aide.
## En savoir plus
* [Modifier le HTML de votre widget ou microsite pour Advocate](#access-the-widget-editor-0-0)
* [Installer 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 by asking a question.
Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:
```
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=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.
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.
