> 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/customize-widgets-and-microsites-with-the-content-editor.md).

# Personnalisez les widgets et microsites avec l'éditeur de contenu

L’éditeur de contenu vous permet de créer des widgets et des microsites qui s’alignent parfaitement sur l’identité de votre marque, garantissant une expérience cohérente et digne de confiance pour vos clients. Un point de contact bien brandé est essentiel pour stimuler un fort engagement et l’adoption du programme.

#### Contrôles de branding centralisés

Vous pouvez trouver et mettre à jour facilement les éléments de conception essentiels de votre marque à l’aide de l’option de style du widget ou du microsite. Tous les paramètres de branding se trouvent dans une section de branding dédiée.

Les widgets ou microsites ont un aspect différent selon le contexte de l’utilisateur, par exemple s’il est connecté, s’il rencontre une erreur ou s’il consulte sur un appareil mobile. Les aperçus de notre éditeur vous permettent de basculer facilement entre tous les états possibles de votre widget ou microsite.

{% hint style="info" %}
**Remarque**: L’aperçu est davantage applicable aux widgets (par ex. widgets d’accès instantané) et aux composants (par ex. retrait d’argent, échange de récompenses). Pour prévisualiser les microsites, vous devrez naviguer vers les différentes pages des microsites pour voir les états.
{% endhint %}

Cela élimine la nécessité d’effectuer manuellement des actions pour voir à quoi ressemblera un composant. Vous pouvez désormais modifier en toute confiance le texte et le design de chaque étape du parcours utilisateur, y compris :

* Vues connecté vs. déconnecté
* Messages d’erreur et de réussite
* Différentes étapes d’un flux en plusieurs parties (comme la vérification du paiement en espèces)

Pour personnaliser le style de votre branding :

1. Dans le menu de navigation de gauche, sélectionnez ![](/files/15f4c8f88cb75624c1f6a18cb768e8f494128ac4) **\[Engage] → Contenu**.
   * Pour les widgets, sélectionnez **Modifier les widgets** et pour les microsites, sélectionnez **Modifier le contenu**.
2. Dans le menu de gauche, sélectionnez si vous souhaitez modifier le Microsite ou le Widget.
3. Sélectionnez le modèle de page sur lequel vous souhaitez effectuer des modifications, puis sélectionnez **Style du widget**/**Style du microsite**.
4. Sélectionnez la couleur de votre marque pour modifier la couleur principale présente dans votre widget ou microsite.
5. Ensuite, sélectionnez le style de police que vous souhaitez utiliser.
6. **\[Facultatif]** Poursuivez avec les autres options de style pour personnaliser entièrement l’identité de votre marque dans le widget ou le microsite.

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

<details>

<summary>Référence des éléments de l’éditeur de style</summary>

| Élément de style                | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
| ------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Couleur principale de la marque | <p>Cette couleur sera utilisée dans différents éléments de votre widget ou microsite, il est donc important de compléter cette étape. Sélectionnez la couleur principale de votre marque.</p><p>Cette couleur est également utilisée dans les sections Bouton principal et Bouton secondaire plus bas dans les options de modification.</p><p><img src="/files/8d58fd3d8f1052e84bfeb6c8a5d0b9e7597bacb4" alt="" data-size="original"></p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
| Police                          | <p>Sélectionnez le style de police que vous souhaitez voir apparaître dans votre widget ou microsite.</p><p><img src="/files/44a8640ac884442640bbf102bf2a3d7ac8486699" alt="" data-size="original"></p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
| Couleur                         | <p>Sélectionnez les différentes couleurs et accents que vous souhaitez voir apparaître dans votre widget ou microsite :</p><p>• <strong>Arrière-plan</strong></p><p>Sélectionnez la couleur que vous souhaitez définir pour l’arrière-plan de votre widget ou microsite.</p><p>• <strong>Texte</strong></p><p>Vous pouvez modifier la couleur de la police pour le texte principal ainsi que pour le texte atténué dans le widget ou le microsite.</p><p>• <strong>Couleur d’accent</strong></p><p>Modifiez les couleurs de vos accents. Cela inclut des éléments comme les onglets ou les icônes dans le widget ou le microsite.</p><p><img src="/files/66d76c41287c2152bd78916e7039a96c51317517" alt="" data-size="original"></p><p>• <strong>Couleurs supplémentaires</strong> <img src="/files/b04f0278cecdb6d4cd1acab522796f8fbdcb0fa1" alt=""></p><p>Vous pouvez ajuster davantage les couleurs et les accents de chaque élément en fonction du type de widget ou de microsite.</p><p><img src="/files/5899ce2a603c6f4074003fb3ada4614737994211" alt="" data-size="original"></p> |
| Bouton principal                | <p>Sélectionnez le schéma de couleurs que vous souhaitez attribuer à votre bouton principal. Vous pouvez également ajuster la valeur en pixels du rayon de bordure autour du bouton.</p><p><img src="/files/b680fe397aa86bf43a13060b30bc311833e73946" alt="" data-size="original"></p><p>Développez la <img src="/files/b04f0278cecdb6d4cd1acab522796f8fbdcb0fa1" alt=""> <strong>État au survol</strong> section pour sélectionner ou modifier davantage la couleur vers laquelle votre bouton change lorsqu’un utilisateur le survole ou interagit avec lui.</p><p><img src="/files/ddc5a33cd325dcc0aecfe93da8ca0da87a78e9d0" alt="" data-size="original"></p>                                                                                                                                                                                                                                                                                                                                                                                                                        |
| Bouton secondaire               | <p>Sélectionnez le schéma de couleurs que vous souhaitez attribuer à votre bouton secondaire. Vous pouvez également ajuster la valeur en pixels du rayon de bordure autour du bouton.</p><p><img src="/files/9653162d2468db053b974f99f78f7c93dea9bd23" alt="" data-size="original"></p><p>Développez la <img src="/files/b04f0278cecdb6d4cd1acab522796f8fbdcb0fa1" alt=""> <strong>État au survol</strong> section pour sélectionner ou modifier davantage la couleur vers laquelle votre bouton change lorsqu’un utilisateur le survole ou interagit avec lui.</p><p><img src="/files/da77d77ca89d0d25dbb815562049f1d20d565ed4" alt="" data-size="original"></p>                                                                                                                                                                                                                                                                                                                                                                                                                       |
| Bordure                         | <p>Modifiez la couleur et le contour de bordure de vos composants, comme les tableaux ou les cartes, dans votre widget ou microsite.</p><p>• <strong>Couleur</strong></p><p>Sélectionnez la couleur de votre bordure.</p><p>• <strong>Épaisseur</strong></p><p>Saisissez une unité en pixels pour déterminer l’épaisseur de votre bordure.</p><p>• <strong>Rayon de bordure</strong></p><p>Saisissez une unité en pixels pour déterminer le rayon de votre bordure.</p><p><img src="/files/e173d374d8ad71ca6540ff0428e58ea2e9ed1317" alt="" data-size="original"></p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
| Champs de formulaire            | <p>Sélectionnez la couleur que vous souhaitez pour les différents champs de formulaire dans votre widget ou microsite. Cela inclut tous les champs de saisie que l’utilisateur complète. Vous pouvez également saisir une unité en pixels pour modifier la taille du rayon de bordure.</p><p><img src="/files/7cb3deb89d2d886a21be9bcde2c53240fdc00125" alt="" data-size="original"></p><p>Développez la <img src="/files/b04f0278cecdb6d4cd1acab522796f8fbdcb0fa1" alt=""> <strong>Options avancées</strong> section pour personnaliser davantage les couleurs de l’état sélectionné ou de l’état au survol de vos champs de formulaire.</p><p><img src="/files/d09e46c468e2e4080fdb7a2eedd6371509c0cfc7" alt="" data-size="original"></p>                                                                                                                                                                                                                                                                                                                                             |
| Taille du widget                | <p>Modifiez la taille de vos widgets dans le modèle. Vous pouvez ajuster les dimensions des widgets intégrés et des widgets contextuels. Sélectionnez une taille minimale et maximale, puis choisissez l’unité dans les options déroulantes. Choisissez de définir les mesures en pixels ou en pourcentage.</p><p><img src="/files/dbd82463c8adf6c22ebacbc992055b4fb43285bc" alt="" data-size="original"></p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |

</details>


---

# 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/customize-widgets-and-microsites-with-the-content-editor.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.