> 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/customize-widgets-and-microsites-with-the-content-editor.md). # Personalizza widget e micrositi con l'editor dei contenuti L'editor dei contenuti ti consente di creare widget e micrositi che rispecchiano perfettamente l'identità del tuo brand, garantendo un'esperienza coerente e affidabile per i tuoi clienti. Un punto di contatto con un branding ben definito è fondamentale per aumentare il coinvolgimento e l'adozione del programma. {% embed url="" %} ## Controlli centralizzati del branding Puoi trovare e aggiornare facilmente gli elementi di design fondamentali del tuo brand usando l'opzione di stile del widget o del microsito. Tutte le impostazioni di branding si trovano in una sezione dedicata al branding. Widget o micrositi appaiono diversi a seconda del contesto dell'utente, ad esempio se ha effettuato l'accesso, se si verifica un errore o se visualizza da un dispositivo mobile. Le anteprime del nostro editor ti consentono di passare facilmente tra tutti gli stati possibili del tuo widget o microsito. {% hint style="success" %} **Nota**: L'anteprima è più adatta ai widget (ad es. widget di accesso istantaneo) e ai componenti (ad es. contanti, scambio di premi). Per visualizzare l'anteprima dei micrositi, dovrai navigare nelle diverse pagine dei micrositi per vedere gli stati. {% endhint %} Questo elimina la necessità di completare manualmente le azioni per vedere come apparirà un componente. Ora puoi modificare con sicurezza il testo e il design per ogni fase del percorso dell'utente, tra cui: * Visualizzazioni con accesso effettuato vs. non effettuato * Messaggi di errore e di successo * Diverse fasi in un flusso in più parti (come la verifica del pagamento in contanti) Per personalizzare lo stile del tuo branding: 1. Nel 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] → Contenuti**. * Per i widget, seleziona **Modifica widget** e per i micrositi, seleziona **Modifica contenuto**. 2. Nel menu a sinistra, seleziona se vuoi modificare il Microsito o il Widget. 3. Seleziona il modello di pagina su cui desideri apportare modifiche, quindi seleziona **Stile del widget**/**Stile del microsito**. 4. Seleziona il colore del tuo brand per modificare il colore principale presente nel tuo widget o microsito. 5. Quindi, seleziona lo stile del carattere che desideri utilizzare. 6. **\[Opzionale]** Prosegui con le restanti opzioni di stile per personalizzare completamente l'identità del tuo brand all'interno del widget o microsito.

Riferimento agli elementi dell'editor di stile

| Elemento di stile | Descrizione | | --------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Colore principale del brand |

Questo colore verrà utilizzato in diversi elementi del tuo widget o microsito, quindi è importante completare questo passaggio. Seleziona il colore principale del tuo brand.

Questo colore viene utilizzato anche nelle sezioni Pulsante primario e Pulsante secondario più in basso nelle opzioni di modifica.

| | Carattere |

Seleziona lo stile del carattere che desideri visualizzare nel tuo widget o microsito.

| | Colore |

Seleziona i vari colori e accenti che desideri visualizzare nel tuo widget o microsito:

• Sfondo

Seleziona il colore che desideri utilizzare come sfondo del tuo widget o microsito.

• Testo

Puoi modificare il colore del carattere sia per il testo principale sia per il testo attenuato all'interno del widget o microsito.

• Colore di accento

Modifica i colori dei tuoi accenti. Questi includono elementi come schede o icone all'interno del widget o microsito.

• Colori aggiuntivi

Puoi regolare ulteriormente i colori e gli accenti per ciascun elemento in base al tipo di widget o microsito.

| | Pulsante primario |

Seleziona la combinazione di colori che desideri per il tuo pulsante primario o principale. Puoi anche regolare il numero di pixel per il raggio del bordo attorno al pulsante.

Espandi la Stato al passaggio del mouse sezione per selezionare o modificare ulteriormente il colore in cui cambia il pulsante quando un utente vi passa sopra con il mouse o interagisce con esso.

| | Pulsante secondario |

Seleziona la combinazione di colori che desideri per il tuo pulsante secondario. Puoi anche regolare il numero di pixel per il raggio del bordo attorno al pulsante.

Espandi la Stato al passaggio del mouse sezione per selezionare o modificare ulteriormente il colore in cui cambia il pulsante quando un utente vi passa sopra con il mouse o interagisce con esso.

| | Bordo |

Modifica il colore e il contorno del bordo dei tuoi componenti, come tabelle o schede, all'interno del tuo widget o microsito.

• Colore

Seleziona il colore del bordo.

• Spessore

Inserisci un'unità in pixel per determinare lo spessore del bordo.

• Raggio del bordo

Inserisci un'unità in pixel per determinare il raggio del bordo.

| | Campi modulo |

Seleziona il colore che desideri per i vari campi modulo all'interno del tuo widget o microsito. Questi includono tutti i campi di input compilati dall'utente. Puoi anche inserire un'unità in pixel per modificare la dimensione del raggio del bordo.

Espandi la Opzioni avanzate sezione per personalizzare ulteriormente i colori dello stato selezionato o dello stato al passaggio del mouse dei tuoi campi modulo.

| | Dimensione del widget |

Modifica la dimensione dei tuoi widget all'interno del modello. Puoi regolare le dimensioni sia dei widget incorporati sia di quelli popup. Seleziona una dimensione minima e massima e, dalle opzioni a discesa, seleziona l'unità di misura. Scegli se impostare le misure in pixel o in percentuale.

--- # 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/customize-widgets-and-microsites-with-the-content-editor.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.