> 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] → Contenuto**.
2. Nella *Widget* scheda, seleziona **Modifica i widget.**
3. Dal menu laterale a comparsa, 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 comparsa, 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 vedere in anteprima l'aspetto del modello senza applicare la modifica, seleziona ![](/files/3ee3f0da3b2952420e8b10ba356d7d046b0e3c6d) **\[Anteprima]** prima di salvare. Seleziona solo il **Salva** pulsante 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 customer advocate vedono nel widget.

{% hint style="success" %}
**Nota:** Per una spiegazione dei diversi elementi dell'editor del widget, fai riferimento a [Panoramica dell'editor del 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 pulsante blu **Aggiungi a** 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 dipendono 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 testo come un'intestazione, potrai modificare il carattere, 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 modificare le sue 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 esiste un'altra posizione valida sulla tela in cui spostare il componente.
3. Seleziona il pulsante blu **Sposta in** il punto in cui vuoi che vada il componente.

   * Invece di usare il trascinamento, 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 dalla 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 una delle seguenti opzioni:
   * **Immagine hero sovrapposta** (un'immagine con testo sovrapposto e modificabile)
   * **Immagine** (un'immagine semplice senza testo sovrapposto)
3. Aggiungi l'immagine alla tela.
4. Dal *menu 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 modificare.
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 utilizzando 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**.

**Regola 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 sulla tela.
2. Nel **Modifica** scheda, seleziona il nome del sito o del 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 utilizzando 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 pulsante blu **Aggiungi a** pulsante per posizionare il componente sulla tela.
   {% endstep %}

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

1. Visualizza in anteprima come apparirà il widget ai tuoi 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]** gli 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 del widget non salva automaticamente le modifiche. Fai clic su <strong>Salva</strong> frequentemente per assicurarti di non perdere il tuo 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 che sono abbonati di livello gold, il **sezione condizionale sul segmento** del componente ti consentirà di farlo.

Puoi aggiungere componenti avanzati dalla **Aggiungi** scheda. La loro configurazione richiede un po' di lavoro extra, poiché dovrai inserire un' [espressione JSONata](http://docs.jsonata.org/overview.html) nel *Condizione* casella che definisce la logica per cui la condizione viene 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.