# AX - Pulsante ## Panoramica **AX - Pulsante** è un componente di Experience Cloud che crea pulsanti cliccabili sulle pagine dei siti Experience per attivare azioni come la navigazione, l'invio di moduli, la creazione di record o l'apertura di modali. Usalo per aggiungere call-to-action personalizzate, inviare moduli, navigare verso pagine specifiche, creare record o attivare flow. Configura l'etichetta del pulsante, lo stile, l'icona e l'azione in Experience Builder senza codice. Perfetto per CTA del portale, navigazione personalizzata, azioni "Contattaci", flussi di creazione record o qualsiasi interazione utente che richieda un pulsante chiaro e brandizzato. *** ## **Configurare il tuo pulsante** Dopo aver trascinato AX - Pulsante sulla tua pagina in Experience Builder, dovrai configurare due cose principali: l'aspetto del pulsante e cosa succede quando gli utenti ci cliccano. ### **Aspetto del pulsante** Queste impostazioni controllano l'aspetto del pulsante sulla pagina. **Etichetta** – Il testo visualizzato sul pulsante. Mantienilo breve e orientato all'azione (es. "Invia richiesta", "Visualizza dettagli", "Contattaci"). **Nome Icona** – Aggiungi un'icona accanto all'etichetta per aiutare gli utenti a capire rapidamente l'azione. Scegli dalla libreria di icone di Salesforce—scelte comuni includono "utility:download" per i download o "utility:email" per le azioni di contatto. **Posizione Icona** – Posiziona l'icona a sinistra o a destra dell'etichetta. Il posizionamento a sinistra funziona bene nella maggior parte dei casi, mentre quello a destra può indicare una navigazione in avanti. **Variante** – Lo stile visivo del pulsante. Le opzioni tipiche includono primario (audace, che attira l'attenzione), secondario (più sobrio) o distruttivo (rosso, per azioni di eliminazione). Scegli in base all'importanza dell'azione. **: Visualizza il testo in uno stile corsivo, inclinando i caratteri verso destra.** – Posiziona il pulsante all'interno del suo contenitore—sinistra, centro o destra. L'allineamento centrale funziona bene per CTA isolate, mentre l'allineamento a sinistra si adatta ai pulsanti dei moduli. **Allunga** – Quando abilitato, il pulsante si espande per riempire l'intera larghezza del suo contenitore. Usalo per CTA prominenti o quando vuoi che il pulsante corrisponda alla larghezza dei campi del modulo sovrastanti. **Disabilitato** – Impedisce agli utenti di cliccare il pulsante. Usalo quando un'azione non è ancora disponibile—ad esempio disabilitare un pulsante "Invia" finché i campi obbligatori non sono stati completati ### **Azioni del pulsante (Collega a)** La **Collega a** impostazione determina cosa succede quando gli utenti cliccano il pulsante. Scegli il tipo di azione che corrisponde a ciò che vuoi ottenere.
[**Mostra Toast**](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-it/pannello-delle-proprieta/interazioni/mostra-toast) Visualizza un breve messaggio di notifica che appare nella parte superiore della pagina e scompare dopo alcuni secondi. Quando usarlo: messaggi di conferma come "Modifiche salvate" o "Richiesta inviata" che non richiedono l'intervento dell'utente. I toast forniscono feedback senza interrompere il flusso di lavoro dell'utente. [**Naviga**](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-it/pannello-delle-proprieta/interazioni/naviga) Reindirizza gli utenti a un'altra pagina—sia all'interno del tuo sito Experience sia a un URL esterno. Quando usarlo: pulsanti "Scopri di più" che vanno a pagine di dettaglio, navigazione "Torna alla home" o link a risorse esterne. Puoi navigare verso pagine standard, pagine di record o URL personalizzati. [**Apri finestra di avviso**](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-it/pannello-delle-proprieta/interazioni/apri-finestra-modale-di-avviso) Apre una finestra popup con un messaggio che gli utenti devono riconoscere prima di continuare. Quando usarlo: avvisi importanti che gli utenti devono leggere, come termini e condizioni, informative sulla privacy o avvertenze prima di procedere con un'azione. [**Avvia un flusso di Salesforce in una finestra di dialogo, consentendo interazioni complesse. Aiuta a guidare processi passo dopo passo.**](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-it/pannello-delle-proprieta/interazioni/apri-conferma) Mostra una finestra di conferma che chiede agli utenti di confermare o annullare la loro azione. Quando usarlo: azioni con conseguenze irreversibili, come eliminare un record, annullare una sottomissione o rimuovere l'accesso. Il dialogo offre agli utenti la possibilità di ripensarci prima di procedere. [**Apri Dialogo Flow**](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-it/pannello-delle-proprieta/interazioni/apri-finestra-di-dialogo-del-flusso) Avvia un Flow di Salesforce in una finestra modale popup. Quando usarlo: processi multisessione come l'invio di un caso di supporto, la compilazione di un sondaggio, l'aggiornamento delle informazioni dell'account o qualsiasi flusso guidato. Crea il flow in Flow Builder, quindi collegalo al pulsante—il flow viene eseguito all'interno del modale senza navigare lontano dalla pagina corrente *** ## Attiva una finestra di conferma dopo l'interazione. Essenziale per azioni che richiedono la conferma o l'accettazione dell'utente. {% tabs %} {% tab title="Proprietà" %} | Nome | Descrizione | Utilizzo | | ------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Etichetta** | Definisci il testo visualizzato sul pulsante. | Inserisci un'etichetta concisa e chiara che indichi all'utente l'azione del pulsante. | | **Nome Icona** | Scegli un'icona da visualizzare sul pulsante. | Seleziona un'icona appropriata che rappresenti visivamente l'azione del pulsante, migliorando la comprensione dell'utente. | | **Posizione Icona** | Determina la posizione dell'icona all'interno del pulsante. | Scegli una posizione che bilanci visivamente il pulsante e si allinei con la direzione di design della tua pagina web. | | **Variante** | Seleziona una variante di stile predefinita per il pulsante. | Scegli una variante che si adatti al contesto dell'azione del pulsante e al linguaggio di design complessivo della pagina web. | | **: Visualizza il testo in uno stile corsivo, inclinando i caratteri verso destra.** | Definisci l'allineamento orizzontale del pulsante all'interno del suo contenitore. | Allinea il pulsante per ottenere armonia visiva e soddisfare i requisiti di layout della pagina web. | | **Allunga** | Determina se il pulsante deve estendersi per riempire il suo contenitore. | Abilita questa opzione per far sì che il pulsante si espanda orizzontalmente, riempiendo lo spazio disponibile all'interno del suo contenitore. | | **Disabilitato** | Controlla lo stato attivo o disabilitato del pulsante. | Disabilita il pulsante per impedire l'interazione dell'utente, utile in condizioni in cui una determinata azione non è applicabile o dovrebbe essere temporaneamente prevenuta. | | {% endtab %} | | | {% tab title="Aspetto" %} ### **Spaziatura (Sopra, Sotto, Sinistra, Destra)** * **Margine-superiore, Margine-inferiore, Margine-sinistro, Margine-destro:** Questi controllano lo spazio attorno al pulsante in ogni direzione. Usali per posizionare con precisione i tuoi pulsanti, evitando sovrapposizioni con altri elementi e creando spazio di respiro. ### **Etichetta/Icona** * **Colore:** Il colore predefinito del testo o dell'icona del pulsante. * **Colore attivo:** Il colore in cui il testo/l'icona cambia quando il pulsante viene cliccato o toccato. * **Colore al passaggio del mouse:** Il colore in cui il testo/l'icona cambia quando l'utente passa il mouse sopra il pulsante. * **Famiglia di font:** Specifica il carattere utilizzato per l'etichetta testuale del pulsante. Assicurati che sia coerente con il design complessivo del tuo sito e facile da leggere. * **Dimensione del font:** Controlla la dimensione del testo dell'etichetta. Regola per leggibilità ed enfasi secondo necessità. * **Stile del font:** Imposta lo stile del testo, come normale, corsivo o obliquo. Usalo con parsimonia per enfasi speciale. * **Peso del font:** Determina lo spessore del testo. Valuta l'uso di pesi diversi per differenziare pulsanti primari e secondari. ### **Sfondo** * **Colore di sfondo:** Il colore predefinito dello sfondo del pulsante. * **Colore di sfondo attivo:** Il colore di sfondo del pulsante quando viene cliccato o toccato. * **Colore di sfondo al passaggio del mouse:** Il colore di sfondo quando l'utente passa il mouse sopra il pulsante. ### **Bordo** * **Colore del bordo:** Il colore del bordo del pulsante. * **Colore del bordo attivo:** Il colore del bordo quando il pulsante è attivo. * **Colore del bordo al passaggio del mouse:** Il colore del bordo quando l'utente passa il mouse sopra il pulsante. * **Dimensione del bordo:** Lo spessore del bordo (in pixel). * **Stile del bordo:** Il tipo di bordo: solido, puntinato, tratteggiato, ecc. * **Raggio del bordo:** Controlla quanto sono arrotondati gli angoli del pulsante. Valori più alti portano a pulsanti più morbidi e arrotondati {% endtab %} {% endtabs %}