> 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/edit-your-widget-or-microsite-html-and-css-for-advocate.md).

# Modifier le HTML et le CSS de votre widget ou microsite pour Advocate

Vous pouvez personnaliser vos widgets Advocate et votre microsite avec du HTML et du CSS supplémentaires afin de mieux correspondre à l’apparence de votre marque. Grâce à l’éditeur HTML intégré d’Advocate, vous pouvez ajouter de la structure, du style et même remplacer certains composants par défaut pour une personnalisation plus poussée.

{% hint style="info" %}
**Remarque**: La modification personnalisée du HTML/CSS n’est disponible que pour certaines éditions d’Advocate. Contactez [le support](mailto:saasquatch-support@impact.com) pour mettre à niveau votre compte et accéder à cette fonctionnalité.
{% endhint %}

#### Pourquoi utiliser du HTML ou du CSS personnalisés ?

Le HTML personnalisé et le CSS en ligne vous permettent de :

* Respecter plus étroitement les directives de votre marque d’entreprise
* Modifier la mise en page et l’espacement
* Appliquer des styles au-delà de ce qui est disponible dans l’éditeur par défaut
* Remplacer le style de certains widgets ou composants du microsite

{% hint style="warning" %}
**Important**: Notre équipe d’assistance fournit une aide limitée pour les problèmes introduits par du code personnalisé. Si vous avez un doute, nous vous recommandons de travailler avec votre équipe d’implémentation Advocate ou votre équipe post-lancement.
{% endhint %}

#### Modifier le HTML ou le CSS

{% tabs %}
{% tab title="Modifier votre microsite" %}
Vous pouvez modifier le HTML ou le CSS pour apporter d’autres personnalisations à votre microsite à l’aide de l’éditeur HTML intégré. Bien que l’éditeur HTML offre une plus grande flexibilité dans la conception du microsite, gardez à l’esprit que nous ne sommes pas en mesure de dépanner les ajustements effectués avec du HTML ou du CSS personnalisés.

1. Dans le menu de navigation de gauche, sélectionnez ![\[Engage\] v2](https://paligoapp-cdn-eu1.s3.eu-west-1.amazonaws.com/impact/attachments/f01cdffa431a4d75ff09c130b66974d4-aa671735ec2b65af79961eaf59ab60af.svg) **\[Engage] → Contenu**.
2. Sur la carte du microsite, sélectionnez **Modifier le contenu**.
3. Dans l’onglet Microsite, sélectionnez la mise en page ou la page dont vous souhaitez modifier le code.
4. Sélectionnez ![](/files/382ed79ee3471f63963eeadf3b0416546b28bde5)![](/files/7eed524730d3d0e4f56958552a9b4c38b9b321f4) **\[Vue du code]** dans la barre de menu supérieure.
5. Ajoutez ou modifiez le HTML et le CSS selon vos besoins.
6. Le CSS peut être ajouté de trois façons :

   * En important une feuille de style CSS externe
   * En haut de la page dans une `<style>` balise :

   ```programlisting
   <style>
     p {
       color: blue;
     }

     .exampleClass {
       color: green;
       font-size: 25px;
       text-align: center;
     }

     #exampleId {
       color: red;
       font-size: 30px;
     }
   </style> 
   ```

   * En ligne, pour appliquer un style à un élément HTML spécifique :

   ```programlisting
   <h3 style="font-size:30px;color:blue;">Recevez une récompense lorsque votre ami utilise notre produit</h3> 
   ```
7. Sélectionnez ![](/files/7fe1886e288f91658643dded577a21eb6fcf68fc) **\[Pinceau]** pour prévisualiser vos mises à jour.
8. Sélectionnez **Enregistrer le brouillon** pour enregistrer, ou **Publier** pour mettre les modifications en ligne.
   {% endtab %}

{% tab title="Modifier votre widget" %}
Vous pouvez modifier le HTML ou le CSS pour apporter d’autres personnalisations à votre widget à l’aide de l’éditeur HTML intégré. Bien que l’éditeur HTML offre une plus grande flexibilité dans la conception du widget, gardez à l’esprit que nous ne sommes pas en mesure de dépanner les ajustements effectués avec du HTML ou du CSS personnalisés.

1. Dans le menu de navigation de gauche, sélectionnez ![\[Engage\] v2](https://paligoapp-cdn-eu1.s3.eu-west-1.amazonaws.com/impact/attachments/f01cdffa431a4d75ff09c130b66974d4-aa671735ec2b65af79961eaf59ab60af.svg) **\[Engage] → Contenu**.
2. Sur la *Widgets* carte, sélectionnez **Modifier le widget**.
3. Sous *Widgets du programme*, sélectionnez le widget que vous souhaitez modifier.

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

1. Dans la barre de menu supérieure, sélectionnez ![](/files/382ed79ee3471f63963eeadf3b0416546b28bde5)![](/files/7eed524730d3d0e4f56958552a9b4c38b9b321f4) **\[Crochets]**.
2. Ajoutez ou modifiez votre HTML dans le corps de la page.
3. Le CSS peut être ajouté de trois façons :

   * En important une feuille de style CSS externe
   * En haut de la page dans une `<style>` balise :

   ```programlisting
   <style>
     p {
       color: blue;
     }

     .exampleClass {
       color: green;
       font-size: 25px;
       text-align: center;
     }

     #exampleId {
       color: red;
       font-size: 30px;
     }
   </style> 
   ```

   * En ligne, pour appliquer un style à un élément HTML spécifique :

   ```programlisting
   <h3 style="font-size:30px;color:blue;">Recevez une récompense lorsque votre ami utilise notre produit</h3> 
   ```
4. Sélectionnez ![](/files/7fe1886e288f91658643dded577a21eb6fcf68fc) **\[Pinceau]** pour prévisualiser vos mises à jour.
5. Sélectionnez **Enregistrer le brouillon** pour enregistrer, ou **Publier** pour mettre les modifications en ligne.
   {% endtab %}
   {% endtabs %}

#### **Modifier les composants à l’aide des parties CSS**

Certains composants intégrés de votre widget ou microsite ne peuvent pas être entièrement stylisés via l’éditeur visuel. Dans certains cas, vous pouvez remplacer leur apparence à l’aide des parties CSS, qui offrent un contrôle plus granulaire.

Si vous souhaitez effectuer des mises à jour avancées du style, l’équipe d’impact.com peut vous conseiller sur ce qui est possible et partager les sélecteurs de parties CSS pertinents. Si vous souhaitez modifier des composants avec des parties CSS, contactez votre équipe d’implémentation Advocate ou votre équipe d’assistance post-lancement.


---

# 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/edit-your-widget-or-microsite-html-and-css-for-advocate.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.