> 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 ![](https://1043985218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-230534471fef5f40808e921e41ee44e4a06ded03%2Fe6cb9548999afdc1ed3ce4942e4cb5b45b5cecbd323267aac2a7cd1915fccc09.svg?alt=media) **\[Engage] → Contenuto**.
2. Nella *Widget* scheda, seleziona **Modifica i widget.**
3. Dal menu a comparsa laterale a sinistra, seleziona il nome del widget che desideri modificare.

   <div data-with-frame="true"><figure><img src="https://1043985218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2F0I1JAhlX9u017vOG1oiM%2FScreenshot%202026-05-18%20at%2009.39.01.png?alt=media&amp;token=9315e124-9a39-4aa7-9a74-15c1d76cef00" alt="" width="347"><figcaption></figcaption></figure></div>

#### Personalizza i tuoi widget

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

1. Dal menu a comparsa 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="https://1043985218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2FUprZtBVbqNwCSdeRzWgh%2FScreenshot%202026-05-18%20at%2009.22.47.png?alt=media&amp;token=ffb2f798-297e-4f6c-a154-30146230482c" alt="" width="375"><figcaption></figcaption></figure></div>

{% hint style="success" %}
**Nota:** Se vuoi vedere in anteprima l'aspetto del modello senza confermare la modifica, seleziona ![](https://1043985218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-190c6a03e6a68d67509d00452b10fd803bee5c87%2F57c7cba09bd1b97dd75b7c245e517c8d1ca0469d7c57bdc13ee6e427b75a860a.svg?alt=media) **\[Anteprima]** prima di salvare. Seleziona il **Salva** pulsante 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 sostenitori 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/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, nella *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 desideri che il componente appaia sulla tela.

   <div data-with-frame="true"><figure><img src="https://1043985218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-faf3362b50a4598aeacff4ca831e5dcef8c7ef6e%2F346370cdced07562b504cd2b9bf6bf08b51539060e9551f784f029d4899ffa12.jpg?alt=media" 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 hero* componente, potrai selezionare una nuova immagine e modificare 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 desideri 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="https://1043985218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-3e26ab9dbdff4f8e5d3d3e078d965672ade44d45%2F026f0ef0af7421ecfab6535433ea587862ec12c5223e8b393ef1db1228676e1f.jpg?alt=media" alt="" width="563"><figcaption></figcaption></figure></div>

{% endtab %}

{% tab title="Sposta" %}

1. All'interno della tela, seleziona il componente che desideri spostare.
2. Seleziona ![](https://1043985218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-9e2a26b918e7394cf67e8a26e3713e081b203ac9%2F15d049b0c04d1c54c39dbbb5a7cd2ba64d86f1f99220111674e768744ea7ceb9.svg?alt=media) **\[Sposta]**.
   * Alcuni componenti non possono essere spostati. L' ![](https://1043985218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-9e2a26b918e7394cf67e8a26e3713e081b203ac9%2F15d049b0c04d1c54c39dbbb5a7cd2ba64d86f1f99220111674e768744ea7ceb9.svg?alt=media) **\[Sposta]** opzione apparirà solo se c'è un'altra posizione valida sulla tela in cui il componente può essere spostato.
3. Seleziona il blu **Sposta in** pulsante nel punto in cui desideri spostare il componente.

   * Anziché trascinare e rilasciare, dovrai selezionare il pulsante e poi selezionare la destinazione.

   <div data-with-frame="true"><figure><img src="https://1043985218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-7bd9887e9f359c787f834a8344a181d7bb186dd3%2Faadaf737882c59604dcaa6bbed1857c867a32cad8c3dd8ea7975c047c04e6a3f.jpg?alt=media" alt="" width="563"><figcaption></figcaption></figure></div>

{% endtab %}

{% tab title="Rimuovi" %}

1. Seleziona il componente che desideri rimuovere sulla tela.
2. Seleziona ![](https://1043985218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-c5ab8423372b2c345ded634b7aa4cab16c87fe3a%2Fd17a259fe817ff10ea9fd87140a89bd62ece6fa9940e05902574dcf95bed5960.svg?alt=media) **\[Rimuovi]**.

   <div data-with-frame="true"><figure><img src="https://1043985218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-030ab8fb2f678027aa57af859245968daee6f736%2F987319390fa75c5fb85f94d2d6e0a951fbf4511a72dbd91af4e55c8f39317301.jpg?alt=media" 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 categoria **Componenti comuni** .
2. Seleziona uno dei seguenti:
   * **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 *Pulsante del menu dei componenti* **Modifica** scheda, seleziona la categoria **Scegli file** pulsante sotto l' *Immagine* intestazione.

   <div data-with-frame="true"><figure><img src="https://1043985218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2FlgpOwJZHPh4UAnrEyoZ2%2FScreenshot%202026-05-18%20at%2009.26.52.png?alt=media&amp;token=6430a500-8532-4fda-9789-1c879854cb67" alt="" width="295"><figcaption></figcaption></figure></div>

**Sostituisci immagini o loghi**

1. All'interno della tela, seleziona la foto che desideri cambiare.
2. Nel **Modifica** menu, seleziona ![](https://1043985218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-d05e21635c52fff94d35ca4c6b05c1deecc699ef%2F768d04f4d7e1b5b745577812f7d67db99d988bfc34749b6e575a04438d6cee36.svg?alt=media) **\[Rimuovi]** e poi seleziona **Scegli file** per ricaricare una nuova immagine.

   <div data-with-frame="true"><figure><img src="https://1043985218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2FnLgD9kbzviI0PLgHBwi2%2FScreenshot%202026-05-18%20at%2009.27.57.png?alt=media&amp;token=f6eddd68-8246-4d60-8470-ab4cf3a66c9a" 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 **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* intestazione.

   <div data-with-frame="true"><figure><img src="https://1043985218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2FNvgjnWp81PZSbXRInnFF%2FScreenshot%202026-05-18%20at%2009.30.34.png?alt=media&amp;token=a9e03a88-d25c-4f80-a304-a922741ca5d2" 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="https://1043985218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2FAjOJfvj8X7nfL0AAJTJK%2FScreenshot%202026-05-18%20at%2009.31.51.png?alt=media&amp;token=5abcab17-8b61-4df8-892b-41db83253eb3" alt="" width="283"><figcaption></figcaption></figure></div>
2. Seleziona la scheda appropriata.
3. Seleziona il 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 ![](https://1043985218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-190c6a03e6a68d67509d00452b10fd803bee5c87%2F57c7cba09bd1b97dd75b7c245e517c8d1ca0469d7c57bdc13ee6e427b75a860a.svg?alt=media) **\[Anteprima]** dalla barra dei menu in alto.
   * Puoi passare dall'anteprima dell'esperienza per ![](https://1043985218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-ae8027a26340e35a4d47f2a067cfadc9fc78113f%2F286f2a6c1251052ae82b73cd1c52b622b18f5203ba9cc10fde4d74292ac28d34.png?alt=media) **\[Desktop]**, ![](https://1043985218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-deeb14b0e398d5dbb2dfb280d3fd7d8e9411b26e%2F74c7be4be7f1d77a3793767c29c5bd878acceacf1d2533055231d5110b12dd61.png?alt=media) **\[Tablet]**, oppure ![](https://1043985218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-6156958cf5fc18498276161791a0514d9005d7cf%2F906c40a4da5b9c02a51450974f61a71761acc07baff3052b53f708d5b768a9be.png?alt=media) **\[Mobile]** utenti selezionando la rispettiva icona del dispositivo.
2. Per tornare all'interfaccia di modifica, seleziona ![](https://1043985218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-60e9ace573178da411cb3be9c6f3b0f4b7e5b524%2F4094fadf599e544cfc618c18eb22087defdb9be38a580cd0041a242a88294e1e.svg?alt=media) **\[Modifica]** dalla barra dei menu in alto.

   <div data-with-frame="true"><figure><img src="https://1043985218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2FLtrKm25PXlhbzNvd63Kd%2FScreenshot%202026-05-18%20at%2009.32.48.png?alt=media&amp;token=6e306358-0acf-4592-bcdd-5122c7fee062" 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 <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/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 di personalizzazione avanzate

I componenti avanzati ti consentono di includere contenuti condizionali basati sull' *email*, *segmento*, oppure *campo personalizzato*. Ad esempio, se vuoi visualizzare una classifica solo per i partecipanti che sono abbonati di livello gold, il **sezione condizionale sul segmento** componente ti consentirà di farlo.

Puoi aggiungere componenti avanzati dalla **Aggiungi** scheda. La loro configurazione richiede un po' di lavoro in più, poiché dovrai inserire un' [espressione JSONata](http://docs.jsonata.org/overview.html) nel *casella 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.