> 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  **\[Engage] → Content**.
2. Nella *Widget* scheda, seleziona **Modifica i widget.**
3. Dal menu laterale a scomparsa a sinistra, seleziona il nome del widget che desideri modificare.
## Personalizza i tuoi widget
{% stepper %}
{% step %}
### **Passaggio 1: scegli un modello**
1. Dal menu laterale a scomparsa a sinistra, sotto *Widget corrente*, seleziona **Modelli**.
2. Seleziona **Applica modello** accanto al modello da cui desideri iniziare.
{% hint style="success" %}
**Nota:** Se desideri visualizzare in anteprima l'aspetto del modello senza confermare la modifica, seleziona  **\[Preview]** prima di salvare. Seleziona solo il **Salva** pulsante quando sei pronto a confermare 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 dei widget, consulta Panoramica dell'editor dei widget.
{% endhint %}
{% tabs %}
{% tab title="Aggiungi" %}
1. Sul lato destro della pagina, nel *menu* di **Aggiungi** scheda, seleziona un gruppo di componenti.
* Scopri di più sui componenti disponibili e su come sono raggruppati.
2. Seleziona il componente appropriato.
3. Seleziona il pulsante blu **Aggiungi a** nel punto in cui desideri che il componente appaia sulla tela.
{% endtab %}
{% tab title="Modifica" %}
Le proprietà che puoi modificare dipendono dal tipo di componente selezionato. Ad esempio, se selezioni *Immagine hero* componente, potrai selezionare una nuova immagine e cambiare il colore di sfondo. Se selezioni un elemento solo testuale come un'intestazione, potrai modificare il font, il colore del testo e il contenuto del testo.
1. Seleziona il componente che desideri modificare.
2. Usa le opzioni nella *menu* di **Modifica** scheda per modificarne le proprietà.
* Se desideri inserire un link in un componente di testo, puoi farlo modificando l'HTML del widget.
{% endtab %}
{% tab title="Sposta" %}
1. All'interno della tela, seleziona e tieni premuto il componente che desideri spostare.
2. Trascina il componente nella sua nuova posizione sulla tela, quindi rilascia per posizionarlo.
* Alcuni componenti non possono essere spostati. Se un componente non è trascinabile, non si muoverà quando proverai a riposizionarlo.
{% endtab %}
{% tab title="Rimuovi" %}
1. Seleziona il componente che desideri rimuovere sulla tela.
2. Seleziona  **\[Remove]**.
{% endtab %}
{% endtabs %}
{% endstep %}
{% step %}
### **Passaggio 3: personalizza l'aspetto e il tema del widget**
#### **Aggiungi immagini o loghi**
1. A destra, dalla *menu* di **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 sopra)
3. Aggiungi l'immagine alla tela.
4. Dal *menu Componenti* **Modifica** scheda, seleziona la **Scegli file** pulsante sotto il *Immagine* titolo.
#### **Sostituisci immagini o loghi**
1. All'interno della tela, seleziona la foto che desideri cambiare.
2. Nel **Modifica** menu, seleziona  **\[Remove]** e poi seleziona **Scegli file** per caricare nuovamente una nuova immagine.
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 **Fine**.
#### **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 desideri modificare sulla tela.
2. Nel **Modifica** scheda, seleziona il nome del sito o del servizio sotto il *mezzo di condivisione* titolo.
Aggiungi un nuovo pulsante di condivisione usando il **Aggiungi** menu.
1. Dal **Aggiungi** scheda, seleziona **Condivisione**.
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 l'aspetto del widget per i partecipanti selezionando  **\[Preview]** dalla barra dei menu in alto.
* Puoi passare da un'anteprima dell'esperienza per  **\[Desktop]**,  **\[Tablet]**, oppure  **\[Mobile]** gli utenti selezionando l'icona del dispositivo corrispondente.
2. Per tornare all'interfaccia di modifica, seleziona  **\[Edit]** dalla barra dei menu in alto.
3. **Salva** le tue modifiche.
{% hint style="warning" %}
**Avviso:** L'editor dei widget non salva automaticamente le tue modifiche. Fai clic su **Salva** frequentemente per assicurarti di non perdere il lavoro.
{% endhint %}
Quando selezioni **Salva**, le modifiche verranno aggiunte alla bozza del tuo programma.
{% endstep %}
{% endstepper %}
## Opzioni di personalizzazione avanzate
I componenti avanzati ti consentono di includere contenuti condizionali basati su *email*, *segmento*, oppure *campo personalizzato*. Ad esempio, se desideri mostrare una classifica solo ai partecipanti che sono abbonati di livello gold, il **sezione condizionale sul segmento** componente te lo consentirà.
Puoi aggiungere componenti avanzati dalla **Aggiungi** scheda. Configurarli richiede un po' di lavoro extra, poiché dovrai inserire una [espressione JSONata](http://docs.jsonata.org/overview.html) nel *campo Condizione* che definisce la logica per quando 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 by asking a question.
Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:
```
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=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.
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.
