# Personalizza i widget del programma

#### Accedi all'editor dei widget

1. Dal menu di navigazione a sinistra, seleziona ![](/files/56eb48c7f3195590132b62ea75c0575abe0113e5) **\[Engage] → Contenuti**.
2. Nella *Scheda* , seleziona **Modifica 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 confermare la modifica, seleziona ![](/files/3ee3f0da3b2952420e8b10ba356d7d046b0e3c6d) **\[Anteprima]** prima di salvare. Seleziona il pulsante **Salva** solo quando sei pronto a confermare le modifiche apportate.
{% endhint %}
{% endstep %}

{% step %}
**Passaggio 2: Regola 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 dei widget, consulta [Panoramica dell'editor dei widget](/brand/it/che-cosa-vorresti-imparare/advocate-program/manage-advocate-participant-experiences/widget-experiences/widget-editor-overview.md).
{% endhint %}

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

1. Sul lato destro della pagina, nella scheda *Componente* del menu, **Aggiungi** seleziona un gruppo di componenti.
   * Scopri di più sui [componenti disponibili](/brand/it/che-cosa-vorresti-imparare/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 canvas.

   <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 componente *Immagine hero* , potrai selezionare una nuova immagine e cambiare il colore di sfondo. Se selezioni un elemento composto solo da testo, 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 scheda *Componente* del menu, **Modifica** per cambiarne le proprietà.

   * Se vuoi inserire un link in un componente di testo, puoi [farlo modificando l'HTML del widget](/brand/it/che-cosa-vorresti-imparare/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. All'interno della canvas, seleziona il componente che vuoi spostare.
2. Seleziona ![](/files/0ec4b779bf7c706c84c8f4746ba4bbfebfe4c25b) **\[Sposta]**.
   * Alcuni componenti non possono essere spostati. L'opzione ![](/files/0ec4b779bf7c706c84c8f4746ba4bbfebfe4c25b) **\[Sposta]** apparirà solo se sulla canvas esiste un'altra posizione valida in cui spostare il componente.
3. Seleziona il pulsante blu **Sposta in** il pulsante nel punto in cui 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 canvas.
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 scheda *Componente* del menu, **Aggiungi** , seleziona la categoria **Componenti comuni** .
2. Seleziona una delle seguenti opzioni:
   * **Immagine hero con sovrapposizione** (un'immagine con testo sovrapposto e modificabile)
   * **Immagine** (una semplice immagine senza testo sopra)
3. Aggiungi l'immagine alla canvas.
4. Dalla *barra dei componenti del menu* **Modifica** , seleziona la categoria **pulsante Scegli file** sotto *Immagine* l'intestazione.

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

**Sostituisci immagini o loghi**

1. All'interno della canvas, seleziona la foto che vuoi cambiare.
2. Nel **Modifica** menu, seleziona ![](/files/c96de39af87633db9566a8e17bb691a36a3e18f5) **\[Rimuovi]** e poi seleziona **pulsante Scegli file** per ricaricare 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**.

**Regola quali pulsanti di condivisione vengono mostrati**

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

1. Seleziona il pulsante di condivisione che vuoi modificare sulla canvas.
2. Nel **Modifica** scheda, seleziona il nome del sito o del servizio sotto *Medium di condivisione* l'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 scheda **Aggiungi** .

1. Dalla **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 canvas.
   {% endstep %}

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

1. Visualizza in anteprima come apparirà il widget ai tuoi partecipanti selezionando ![](/files/3ee3f0da3b2952420e8b10ba356d7d046b0e3c6d) **\[Anteprima]** dalla barra dei menu in alto.
   * Puoi passare da un'anteprima dell'esperienza per ![](/files/e0a4ac2c2c913afd1dd49c035f010989f7a8e311) **\[Desktop]**, ![](/files/a48638ad3b861d1ad294a4ff590752981fa84321) **\[Tablet]**, o ![](/files/94f0217f5ead20363eacaba8297c9cc32ba28594) **\[Mobile]** utenti selezionando la rispettiva icona del dispositivo.
2. Per tornare all'interfaccia di modifica, seleziona ![](/files/af0f9e62dbbfb5171f0c13344127b9fb8d0c363d) **\[Modifica]** dalla barra dei 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 tue 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 alla tua [bozza del programma](/brand/it/che-cosa-vorresti-imparare/advocate-program/getting-started-with-advocate/create-and-publish-a-program-draft-for-advocate.md).
{% endstep %}
{% endstepper %}

#### Opzioni di personalizzazione avanzate

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

Puoi aggiungere componenti avanzati dalla scheda **Aggiungi** . La configurazione richiede un po' di lavoro in più, poiché dovrai inserire una [espressione JSONata](http://docs.jsonata.org/overview.html) nel riquadro *Condizione* che definisce la logica per cui la condizione è soddisfatta. Rivolgiti al 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/che-cosa-vorresti-imparare/advocate-program/manage-advocate-participant-experiences/install-custom-npm-packages-for-advocate.md)


---

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