Una comunicazione efficace sul sito web richiede un attento equilibrio tra esperienza utente e obiettivi di business. Se da un lato i modali con tempistiche sbagliate possono interrompere la navigazione, dall'altro i Pop-up progettati in modo strategico restano uno strumento fondamentale per acquisire lead, promuovere offerte e coinvolgere i visitatori. Raccogliere indirizzi email e condividere notizie importanti non deve essere complicato. Configurando un Pop-up in Positive User, il tuo team può mostrare facilmente il messaggio giusto alle persone giuste mentre navigano sul tuo sito web.
In Positive User trovi due possibili opzioni per creare un Pop-up: Pop-up Builder vs Pop-up Code Editor.
Questa opzione ti permette di creare Pop-up di base a partire da template predefiniti. Puoi personalizzare il contenuto e caricare immagini proprie.
Vai su "Website Experience" → "Pop-up" → "Nuovo Pop-up".
Scegli tra "Pop-up form" e "Redirect Pop-up" nell'angolo in alto a sinistra della sezione.
Scegli uno dei template, passaci sopra con il mouse e seleziona "Simple Builder".
Digita il nome del Pop-up e aggiungi una descrizione per i tuoi colleghi.
Clicca su "Crea". Ora sei nel pannello in cui puoi modificare il contenuto del Pop-up.
La sezione principale mostra l'anteprima del template scelto, dove tutte le modifiche vengono riflesse in tempo reale. Puoi sempre cambiare il template cliccando sul pulsante "Apri template" nell'angolo in alto a destra dell'editor.
Nell'angolo in alto a sinistra puoi passare dalla modalità mobile a quella desktop: in questo modo puoi regolare al meglio l'aspetto del Pop-up.
Sul lato destro trovi le sezioni per modificare le singole parti relative al contenuto e alla visualizzazione del Pop-up.
Contenuto
In questa sezione stabilisci la comunicazione principale del tuo Pop-up.
Header: è il tuo titolo principale. Usa questo spazio per la tua offerta o il tuo annuncio più importante (es. "Iscriviti alla nostra newsletter" o "Scopri la nuova collezione").
Contenuto: questo campo è dedicato al testo di supporto. È un ottimo spazio per aggiungere qualche dettaglio in più o fornire il "perché" della tua call to action.
Stile dei pulsanti
Il pulsante è il principale punto di interazione del tuo Pop-up. È importante che sia chiaro e visivamente distinto.
Pulsante: digita il testo che apparirà sul pulsante stesso. Etichette brevi e orientate all'azione come "Iscriviti ora" o "Ottieni lo sconto" di solito funzionano meglio.
Colore del testo: scegli un colore per l'etichetta all'interno del pulsante. Assicurati che ci sia sufficiente contrasto con lo sfondo, così da renderlo facile da leggere.
Colore di sfondo: seleziona il colore principale del pulsante. Ti consigliamo di scegliere un colore coerente con il brand per mantenere un aspetto uniforme in tutto il sito.
Stile dei link
A seconda del template, puoi offrire ai tuoi visitatori più opzioni, come un link a una pagina "Aiuto" o alle informazioni di "Contatto" come link secondari.
Testo: inserisci il nome del link (es. "Chi siamo" o "Informativa sulla privacy").
Apri in: decidi se il link deve aprirsi in una nuova scheda o in quella corrente.
Colore del testo: puoi definire lo stile di questi link in modo separato. Spesso un colore discreto funziona bene, così da non distogliere l'attenzione dal pulsante principale.
Immagini
Gli elementi visivi legano insieme l'intero Pop-up e fanno in modo che appaia come parte integrante del tuo sito web.
Immagine di sfondo: l'immagine principale del tuo Pop-up.
Colore del backdrop: controlla l'"overlay" che oscura il tuo sito web quando appare il Pop-up. Puoi regolare i valori RGBA per rendere lo sfondo più o meno trasparente, mantenendo l'attenzione interamente sul tuo messaggio.
Colore di sfondo: imposta il colore di base del Pop-up nella zona in cui si trovano il testo e i campi del form.
I template di solito includono raccomandazioni sulla dimensione ottimale dell'immagine di sfondo.
Input
Se stai creando un Pop-up form, questa sezione ti permette di definire le informazioni che vuoi raccogliere dai tuoi visitatori. Ogni campo che aggiungi qui verrà mappato direttamente ai dati nel Profilo del contatto.
Etichetta: il testo che appare direttamente sopra il campo di input, che indica alla persona cosa inserire.
Placeholder: il testo "fantasma" all'interno del campo (es. "[email protected]") che scompare non appena l'utente inizia a digitare.
Campo: è un passaggio cruciale. Indica al sistema in quale campo del tuo database Positive User devono essere salvate le informazioni (es. "Email" o "Nome").
Obbligatorio?: seleziona questa casella se il campo deve essere compilato prima che l'utente possa inviare il form.
A seconda del template, potrebbe esserci un limite al numero di input di testo che puoi aggiungere. Se hai raggiunto il limite, puoi comunque aggiungere caselle di controllo per elementi come il consenso alla newsletter.
Quando il tuo Pop-up è pronto, clicca su "Salva ed esci". Verrai poi reindirizzato alla lista dei tuoi Pop-up.
Ricorda che ora, per attivare un Pop-up, devi creare un'automazione dedicata.
Puoi sicuramente creare Pop-up personalizzati direttamente nel codice HTML. Il nostro code editor è il posto giusto per farlo. Puoi creare il Pop-up da zero oppure modificare i template esistenti.
Questa opzione richiede conoscenze di HTML.
Vai su "Website Experience" → "Pop-up" → "Nuovo Pop-up".
Qui puoi scegliere se partire da zero cliccando sul pulsante "Code Editor" nell'angolo in alto a destra della sezione, oppure modificare uno dei template esistenti. Per farlo, devi decidere il tipo ("Pop-up form" vs "Redirect Pop-up") nell'angolo in alto a sinistra della sezione, scegliere uno dei template, passarci sopra con il mouse e selezionare "Code Builder".
Ora sei nel pannello in cui puoi modificare il Pop-up. (Oppure crearlo da zero se hai scelto direttamente "Code editor" nel passaggio precedente).
Controllo completo su HTML e CSS
Il pannello di sinistra è un editor completamente funzionale in cui puoi definire la struttura e l'aspetto del tuo Pop-up. Puoi personalizzare la struttura del form, aggiungere wrapper personalizzati o includere elementi extra come icone o blocchi di testo specifici non disponibili nei template standard.
Non modificare l'id del pulsante nei Redirect Pop-up! L'id deve rimanere id=submitButton o qualunque altro id abbia il pulsante. Se lo modifichi, non genererà più le statistiche per i clic e il CTR%.
Inserisci campo
Una delle funzionalità più potenti del code editor è il menu a tendina "Inserisci campo". Ti consente di colmare la distanza tra il tuo design personalizzato e il tuo database Positive User.
Placeholder dinamici: invece di codificare manualmente gli input del form, usa questo menu per inserire placeholder per campi specifici (es. "Email", "Nome" o "Numero di telefono").
Campi personalizzati: se hai creato campi personalizzati (come "Livello Loyalty" o "Categoria preferita"), puoi trovarli qui e includerli nel tuo form. Quando un contatto li compila, i dati vengono salvati automaticamente nel suo profilo.
Attiva anteprima
Usa questo pulsante per passare dal codice a una visualizzazione dal vivo del Pop-up. Ti aiuta a individuare al volo errori di stile o problemi di allineamento.
Quando il tuo Pop-up è pronto, clicca su "Salva ed esci". Verrai poi reindirizzato alla lista dei tuoi Pop-up.
Ora devi creare uno scenario di automazione per attivare il tuo Pop-up.
Ora hai un Pop-up pronto. Per mostrarlo sul sito web devi creare un'automazione nella sezione "Automation".
Il modulo "Mostra un Pop-up" fa riferimento a tutti i Pop-up creati in "Website Experience" → "Pop-up".
Un esempio di automazione è il seguente:
Consulta gli articoli sulle automazioni per costruire un workflow efficace per i visitatori del tuo sito web.
Tipologie di Pop-up [LINK]
