> 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 e il microsito di Advocate 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 sostituire alcuni componenti predefiniti per una personalizzazione più approfondita.
{% hint style="info" %}
**Nota**: La modifica personalizzata di HTML/CSS è disponibile solo in alcune edizioni di Advocate. Contatta [l'assistenza](mailto:saasquatch-support@impact.com) per aggiornare il tuo account e accedere a questa funzione.
{% 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 il layout e gli spazi
* 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 problemi introdotti da codice personalizzato. Se non sei sicuro, ti consigliamo di collaborare con il tuo team Advocate Implementation o 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 offra una maggiore flessibilità nella progettazione del microsito, tieni presente che non siamo in grado di risolvere eventuali problemi relativi a 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 scheda del microsito, seleziona **Modifica contenuto**.
3. Nella scheda Microsito, seleziona il layout o la pagina di cui desideri modificare il codice.
4. Seleziona  **\[Visualizzazione codice]** nella barra dei menu superiore.
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
* All'inizio della pagina in un `
```
* In linea, per applicare uno stile a uno specifico elemento HTML:
```programlisting
Ricevi una ricompensa quando il tuo amico usa il nostro prodotto
```
7. Seleziona  **\[Pennello]** per visualizzare l'anteprima degli aggiornamenti.
8. Seleziona **Salva bozza** per salvare, oppure **Pubblica** per pubblicare 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 offra una maggiore flessibilità nella progettazione del widget, tieni presente che non siamo in grado di risolvere eventuali problemi relativi a 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.
1. Nella barra del menu in alto, seleziona  **\[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
* All'inizio della pagina in un `
```
* In linea, per applicare uno stile a uno specifico elemento HTML:
```programlisting
Ricevi una ricompensa quando il tuo amico usa il nostro prodotto
```
4. Seleziona  **\[Pennello]** per visualizzare l'anteprima degli aggiornamenti.
5. Seleziona **Salva bozza** per salvare, oppure **Pubblica** per pubblicare 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 sostituirne 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 fare e condividere eventuali selettori di parti CSS pertinenti. Se sei interessato a modificare i componenti con le parti CSS, contatta il tuo team Advocate Implementation o il 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=&goal=
```
`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.
