> 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/it/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/edit-your-widget-or-microsite-html-and-css-for-advocate.md).

# Modifica l'HTML e il CSS del tuo widget o microsito per Advocate

Puoi personalizzare i tuoi widget Advocate e il microsito con HTML e CSS aggiuntivi per allinearli meglio all’aspetto e allo stile del tuo brand. Utilizzando l’editor HTML integrato di Advocate, puoi aggiungere struttura, stile e persino sovrascrivere alcuni componenti predefiniti per una personalizzazione più avanzata.

{% hint style="info" %}
**Nota**: La modifica HTML/CSS personalizzata è disponibile solo per specifiche edizioni di Advocate. Contatta [supporto](mailto:saasquatch-support@impact.com) per aggiornare il tuo account e accedere a questa funzionalità.
{% endhint %}

#### Perché usare HTML o CSS personalizzati?

L'HTML personalizzato e il CSS inline ti consentono di:

* Allinearti più da vicino alle linee guida del brand della tua azienda
* Riformattare layout e spaziatura
* Applicare stili oltre quelli disponibili nell'editor predefinito
* Sovrascrivere lo stile di alcuni componenti del widget o del microsito

{% hint style="warning" %}
**Importante**: Il nostro team di supporto fornisce assistenza limitata per i problemi introdotti da codice personalizzato. Se non sei sicuro, ti consigliamo di collaborare con il tuo team di implementazione Advocate o con il team post-lancio.
{% endhint %}

#### Modifica l'HTML o il CSS

{% tabs %}
{% tab title="Modifica il tuo microsito" %}
Puoi modificare l'HTML o il CSS per apportare ulteriori personalizzazioni al tuo microsito utilizzando l'editor HTML integrato. Sebbene l'editor HTML consenta una maggiore flessibilità nella progettazione del microsito, tieni presente che non siamo in grado di risolvere eventuali problemi relativi alle modifiche apportate con HTML o CSS personalizzati.

1. Nel menu di navigazione a sinistra, seleziona ![\[Engage\] v2](https://paligoapp-cdn-eu1.s3.eu-west-1.amazonaws.com/impact/attachments/f01cdffa431a4d75ff09c130b66974d4-aa671735ec2b65af79961eaf59ab60af.svg) **\[Engage] → Contenuto**.
2. Sulla scheda del microsito, seleziona **Modifica contenuto**.
3. Nella scheda Microsito, seleziona il layout o la pagina di cui desideri modificare il codice.
4. Seleziona ![](/files/9f0573fe27ca0dc9249cfc2f6665c842d49d3f49)![](/files/f7df11f506bd26ac3818258200450986baf10c05) **\[Visualizzazione codice]** nella barra dei menu in alto.
5. Aggiungi o modifica HTML e CSS secondo necessità.
6. Il CSS può essere aggiunto in tre modi:

   * Importando un foglio di stile CSS esterno
   * Nella parte superiore della pagina in un `<style>` tag:

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

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

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

   * In linea, per applicare uno stile a uno specifico elemento HTML:

   ```programlisting
   <h3 style="font-size:30px;color:blue;">Ricevi una ricompensa quando il tuo amico utilizza il nostro prodotto</h3> 
   ```
7. Seleziona ![](/files/5ca68d9d924da2136bfda6249bc5cd50cb6a117f) **\[Pennello]** per visualizzare in anteprima gli aggiornamenti.
8. Seleziona **Salva bozza** per salvare, oppure **Pubblica** per rendere effettive le modifiche.
   {% endtab %}

{% tab title="Modifica il tuo widget" %}
Puoi modificare l'HTML o il CSS per apportare ulteriori personalizzazioni al tuo widget utilizzando l'editor HTML integrato. Sebbene l'editor HTML consenta una maggiore flessibilità nella progettazione del widget, tieni presente che non siamo in grado di risolvere eventuali problemi relativi alle modifiche apportate con HTML o CSS personalizzati.

1. Nel menu di navigazione a sinistra, seleziona ![\[Engage\] v2](https://paligoapp-cdn-eu1.s3.eu-west-1.amazonaws.com/impact/attachments/f01cdffa431a4d75ff09c130b66974d4-aa671735ec2b65af79961eaf59ab60af.svg) **\[Engage] → Contenuto**.
2. Nella *Widget* scheda, seleziona **Modifica widget**.
3. Sotto *Widget del programma*, seleziona il widget che desideri modificare.

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

1. Nella barra dei menu in alto, seleziona ![](/files/9f0573fe27ca0dc9249cfc2f6665c842d49d3f49)![](/files/f7df11f506bd26ac3818258200450986baf10c05) **\[Parentesi quadre]**.
2. Aggiungi o modifica il tuo HTML nel corpo della pagina.
3. Il CSS può essere aggiunto in tre modi:

   * Importando un foglio di stile CSS esterno
   * Nella parte superiore della pagina in un `<style>` tag:

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

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

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

   * In linea, per applicare uno stile a uno specifico elemento HTML:

   ```programlisting
   <h3 style="font-size:30px;color:blue;">Ricevi una ricompensa quando il tuo amico utilizza il nostro prodotto</h3> 
   ```
4. Seleziona ![](/files/5ca68d9d924da2136bfda6249bc5cd50cb6a117f) **\[Pennello]** per visualizzare in anteprima gli aggiornamenti.
5. Seleziona **Salva bozza** per salvare, oppure **Pubblica** per rendere effettive le modifiche.
   {% endtab %}
   {% endtabs %}

#### **Modifica i componenti usando le parti CSS**

Alcuni componenti integrati nel tuo widget o microsito non possono essere completamente stilizzati tramite l'editor visuale. In alcuni casi, puoi sovrascriverne l'aspetto usando le parti CSS, che consentono un controllo più granulare.

Se desideri apportare aggiornamenti di stile avanzati, il team di impact.com può consigliarti su ciò che è possibile e condividere eventuali selettori di parti CSS pertinenti. Se sei interessato a modificare i componenti con le parti CSS, contatta il tuo team di implementazione Advocate o il team di supporto post-lancio.


---

# 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/it/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>&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.