> 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/widget-experiences/customize-program-widgets.md).

# Personalizza i widget del programma

#### Accedi all'editor dei widget

1. Dal menu di navigazione a sinistra, seleziona ![](/files/56eb48c7f3195590132b62ea75c0575abe0113e5) **\[Engage] → Contenuti**.
2. Nel *Widget* scheda, seleziona **Modifica i widget.**
3. Dal menu laterale a sinistra, seleziona il nome del widget che vuoi modificare.

   <div data-with-frame="true"><figure><img src="/files/db3b65d324483b64afcca4e787e437216b08bc74" alt="" width="347"><figcaption></figcaption></figure></div>

#### Personalizza i tuoi widget

{% stepper %}
{% step %}
**Passaggio 1: Scegli un modello**

1. Dal menu laterale a sinistra, sotto *Widget attuale*, seleziona **Modelli**.
2. Seleziona **Applica modello** accanto al modello da cui vuoi iniziare.

   <div data-with-frame="true"><figure><img src="/files/d7e748eec070d6858fe6a752bf61087d59cb8637" alt="" width="375"><figcaption></figcaption></figure></div>

{% hint style="success" %}
**Nota:** Se vuoi visualizzare in anteprima l'aspetto del modello senza applicare la modifica, seleziona ![](/files/3ee3f0da3b2952420e8b10ba356d7d046b0e3c6d) **\[Anteprima]** prima di salvare. Seleziona il **Salva** pulsante solo quando sei pronto ad applicare le modifiche apportate.
{% endhint %}
{% endstep %}

{% step %}
**Passaggio 2: Modifica il contenuto del widget**

Puoi aggiungere, modificare, spostare o rimuovere componenti per modificare il contenuto che i tuoi sostenitori vedono nel widget.

{% hint style="success" %}
**Nota:** Per una spiegazione dei diversi elementi dell'editor dei widget, fai riferimento a [Panoramica dell'editor dei widget](/brand/it/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/widget-experiences/widget-editor-overview.md).
{% endhint %}

{% tabs %}
{% tab title="Aggiungi" %}

1. Sul lato destro della pagina, nel *Componente* del menu **Aggiungi** scheda, seleziona un gruppo di componenti.
   * Scopri di più sui [componenti disponibili](/brand/it/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/widget-and-microsite-components-explained.md) e su come sono raggruppati.
2. Seleziona il componente appropriato.
3. Seleziona il blu **Aggiungi a** pulsante nel punto in cui vuoi che il componente appaia sulla tela.

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

{% endtab %}

{% tab title="Modifica" %}
Le proprietà che puoi modificare dipenderanno dal tipo di componente selezionato. Ad esempio, se selezioni il *Immagine principale* componente, potrai selezionare una nuova immagine e cambiare il colore di sfondo. Se selezioni un elemento solo testuale come un'intestazione, allora potrai modificare il font, il colore del testo e il contenuto del testo.

1. Seleziona il componente che vuoi modificare.
2. Usa le opzioni nella *Componente* del menu **Modifica** scheda per modificarne le proprietà.

   * Se vuoi inserire un link in un componente di testo, puoi [farlo modificando l'HTML del widget](/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).

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

{% endtab %}

{% tab title="Sposta" %}

1. Nella tela, seleziona il componente che vuoi spostare.
2. Seleziona ![](/files/0ec4b779bf7c706c84c8f4746ba4bbfebfe4c25b) **\[Sposta]**.
   * Alcuni componenti non possono essere spostati. L' ![](/files/0ec4b779bf7c706c84c8f4746ba4bbfebfe4c25b) **\[Sposta]** opzione apparirà solo se sulla tela esiste un'altra posizione valida in cui spostare il componente.
3. Seleziona il blu **Sposta in** pulsante dove vuoi che vada il componente.

   * Invece di un approccio drag-and-drop, dovrai selezionare il pulsante e poi selezionare la destinazione.

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

{% endtab %}

{% tab title="Rimuovi" %}

1. Seleziona il componente che vuoi rimuovere nella tela.
2. Seleziona ![](/files/c566ab57a353fbfb508a219cbb0efd1918ace523) **\[Rimuovi]**.

   <div data-with-frame="true"><figure><img src="/files/e3809f0024cf18c215aa7a490636e4cd11473762" alt="" width="507"><figcaption></figcaption></figure></div>

{% endtab %}
{% endtabs %}
{% endstep %}

{% step %}
**Passaggio 3: Personalizza l'aspetto e il tema del widget**

**Aggiungi immagini o loghi**

1. A destra, dalla *Componente* del menu **Aggiungi** scheda, seleziona la **Componenti comuni** categoria.
2. Seleziona uno dei due:
   * **Immagine principale sovrapposta** (un'immagine con testo sovrapposto modificabile)
   * **Immagine** (un'immagine semplice senza testo sopra)
3. Aggiungi l'immagine alla tela.
4. Dal *Del menu dei componenti* **Modifica** scheda, seleziona la **Scegli file** pulsante sotto l' *Immagine* intestazione.

   <div data-with-frame="true"><figure><img src="/files/9227ee2f389da006154079ae247713eaa1e812f3" alt="" width="295"><figcaption></figcaption></figure></div>

**Sostituisci immagini o loghi**

1. Nella tela, seleziona la foto che vuoi cambiare.
2. Nel **Modifica** menu, seleziona ![](/files/c96de39af87633db9566a8e17bb691a36a3e18f5) **\[Rimuovi]** e poi seleziona **Scegli file** per caricare di nuovo una nuova immagine.

   <div data-with-frame="true"><figure><img src="/files/8a6b3123b01cb7d1c49edfdae5d7bebee2aa46f9" alt="" width="299"><figcaption></figcaption></figure></div>
3. Carica l'immagine usando uno di questi metodi:
   * Trascina e rilascia l'immagine
   * Cerca un file sul tuo computer
   * Nel *Indirizzo web* scheda, incolla l'URL pubblico del file
4. Seleziona **Fatto**.

**Modifica quali pulsanti di condivisione vengono mostrati**

Puoi modificare i pulsanti di condivisione esistenti usando il **Modifica** menu.

1. Seleziona il pulsante di condivisione che vuoi modificare nella tela.
2. Nel **Modifica** scheda, seleziona il nome del sito o servizio sotto il *mezzo di condivisione* intestazione.

   <div data-with-frame="true"><figure><img src="/files/d0bd7c1c94f3ce4dfff7626242f27dcd244cfb04" alt="" width="296"><figcaption></figcaption></figure></div>

Aggiungi un nuovo pulsante di condivisione usando la **Aggiungi** menu.

1. Dal **Aggiungi** scheda, seleziona **Condivisione**.

   <div data-with-frame="true"><figure><img src="/files/7106b40197645f43934b848608d593ea24c95644" alt="" width="283"><figcaption></figcaption></figure></div>
2. Seleziona la scheda appropriata.
3. Seleziona il blu **Aggiungi a** pulsante per inserire il componente nella tela.
   {% endstep %}

{% step %}
**Passaggio 4: Anteprima e salvataggio**

1. Visualizza in anteprima come apparirà il widget ai partecipanti selezionando ![](/files/3ee3f0da3b2952420e8b10ba356d7d046b0e3c6d) **\[Anteprima]** dalla barra del menu in alto.
   * Puoi passare da un'anteprima dell'esperienza per ![](/files/e0a4ac2c2c913afd1dd49c035f010989f7a8e311) **\[Desktop]**, ![](/files/a48638ad3b861d1ad294a4ff590752981fa84321) **\[Tablet]**, oppure ![](/files/94f0217f5ead20363eacaba8297c9cc32ba28594) **\[Mobile]** utenti selezionando la rispettiva icona del dispositivo.
2. Per tornare all'interfaccia di modifica, seleziona ![](/files/af0f9e62dbbfb5171f0c13344127b9fb8d0c363d) **\[Modifica]** dalla barra del menu in alto.

   <div data-with-frame="true"><figure><img src="/files/6c5c22f72648a8cc59cbdee85168e31da3b5a91b" alt="" width="563"><figcaption></figcaption></figure></div>
3. **Salva** le tue modifiche.

   <div data-gb-custom-block data-tag="hint" data-style="warning" class="hint hint-warning"><p><strong>Avviso:</strong> L'editor dei widget non salva automaticamente le modifiche. Fai clic su <strong>Salva</strong> frequentemente per assicurarti di non perdere il lavoro.</p></div>

Quando selezioni **Salva**, le modifiche verranno aggiunte al tuo [bozza del programma](/brand/it/what-would-you-like-to-learn-about/advocate-program/getting-started-with-advocate/create-and-publish-a-program-draft-for-advocate.md).
{% endstep %}
{% endstepper %}

#### Opzioni avanzate di personalizzazione

I componenti avanzati ti consentono di includere contenuti condizionali basati su *email*, *segmento*, oppure *campo personalizzato*. Ad esempio, se vuoi mostrare una classifica solo ai partecipanti abbonati al livello gold, il **componente sezione condizionale sul segmento** ti farà fare.

Puoi aggiungere componenti avanzati dalla **Aggiungi** scheda. La loro configurazione richiede un po' di lavoro in più poiché dovrai inserire una [espressione JSONata](http://docs.jsonata.org/overview.html) nel *Condizione* che definisce la logica per quando la condizione è soddisfatta. Contatta il nostro [team di supporto](mailto:saasquatch-support@impact.com) se hai bisogno di aiuto.

#### Scopri di più

* [Modifica l'HTML del tuo widget o microsito per Advocate](#access-the-widget-editor-0-0)
* [Installa pacchetti NPM personalizzati per Advocate](/brand/it/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/install-custom-npm-packages-for-advocate.md)


---

# 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/widget-experiences/customize-program-widgets.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.