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

Puoi personalizzare i 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 sovrascrivere alcuni componenti predefiniti per una personalizzazione più approfondita.

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

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

HTML personalizzato e CSS inline ti consentono di:

* Allinearti più da vicino alle linee guida del brand della tua azienda
* Riformattare il layout e la spaziatura
* Applicare stili oltre quelli disponibili nell’editor predefinito
* Sovrascrivere lo stile di alcuni widget o componenti 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 lavorare con il tuo team di implementazione di 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 maggiore flessibilità nella progettazione del microsito, tieni presente che non siamo in grado di risolvere problemi relativi ad aggiustamenti effettuati 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] → Contenuti**.
2. Nella scheda del microsito, seleziona **Modifica contenuto**.
3. Nella scheda Microsito, seleziona il layout o la pagina il cui codice desideri modificare.
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 {
       colore: blue;
     }

     .exampleClass {
       colore: green;
       dimensione del carattere: 25px;
       allineamento del testo: center;
     }

     #exampleId {
       colore: red;
       dimensione del carattere: 30px;
     }
   </style> 
   ```

   * Inline, per applicare uno stile a un elemento HTML specifico:

   ```programlisting
   <h3 style="font-size:30px;color:blue;">Ricevi una ricompensa quando il tuo amico usa il nostro prodotto</h3> 
   ```
7. Seleziona ![](/files/5ca68d9d924da2136bfda6249bc5cd50cb6a117f) **\[Pennello]** per visualizzare l’anteprima degli 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 maggiore flessibilità nella progettazione del widget, tieni presente che non siamo in grado di risolvere problemi relativi ad aggiustamenti effettuati 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] → Contenuti**.
2. Nella *Widget* scheda, seleziona **Modifica widget**.
3. In *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]**.
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 {
       colore: blue;
     }

     .exampleClass {
       colore: green;
       dimensione del carattere: 25px;
       allineamento del testo: center;
     }

     #exampleId {
       colore: red;
       dimensione del carattere: 30px;
     }
   </style> 
   ```

   * Inline, per applicare uno stile a un elemento HTML specifico:

   ```programlisting
   <h3 style="font-size:30px;color:blue;">Ricevi una ricompensa quando il tuo amico usa il nostro prodotto</h3> 
   ```
4. Seleziona ![](/files/5ca68d9d924da2136bfda6249bc5cd50cb6a117f) **\[Pennello]** per visualizzare l’anteprima degli 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 avanzati allo stile, 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 parti CSS, contatta il tuo team di implementazione di Advocate o il team di supporto post-lancio.


---

# Agent Instructions: 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/it/che-cosa-vorresti-imparare/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.
