Cerchi un modo per creare un popup lightbox per il tuo sito?
Un popup lightbox può essere incredibilmente efficace per acquisire lead. Sono progettati per convincere e convertire.
Ma doverne codificare uno da zero è un vero problema. Per prima cosa, dovresti conoscere abbastanza HTML, CSS e Javascript per creare il popup insieme alle regole di attivazione per quando mostrarlo. Quindi, dovresti creare un'integrazione manuale con il tuo provider di servizi email. E infine, dovresti gestire eventuali problemi di privacy e sicurezza.
Buone notizie: c'è un modo molto più semplice.
In questo articolo, ti mostreremo come lanciare un popup lightbox senza codifica in meno di 10 minuti.
Iniziamo.
Cos'è un Popup Lightbox?
Un popup lightbox è un modulo di iscrizione che appare con un effetto cinematografico. Quando appare un lightbox, sfoca il resto del sito in background. In questo modo, tutta la tua attenzione è sul popup.
Originariamente, il concetto di lightbox deriva dalla pubblicità esterna:
E poi, alcuni sviluppatori hanno pensato che fosse un effetto davvero interessante e hanno creato una libreria Javascript per ricreare lo stesso effetto sugli asset web. Successivamente, è entrata in gioco l'idea di utilizzare i popup lightbox.
Perché i Popup Lightbox Funzionano
I popup lightbox acquisiscono più email rispetto a un modulo di iscrizione tradizionale.
Ma perché funzionano?
Diamo una rapida occhiata ai motivi principali per cui i popup lightbox funzionano così bene.
#1. I Popup Lightbox Presentano una Chiara Call to Action
La maggior parte delle persone crede che sia una grande cosa dare ai propri clienti molte opzioni.
Ma non è proprio vero.
Se stai cercando conversioni dirette, vuoi una singola e chiara call to action su cui il tuo pubblico possa concentrarsi. In questo modo, rimuovi tutte le distrazioni dalla mente dell'utente. E i popup lightbox fanno un ottimo lavoro nell'evidenziare la tua offerta principale e nel far concentrare le persone sulla tua call to action.
Quindi, naturalmente, i tassi di conversione sono piuttosto eccezionali.
#2. I Popup Lightbox Sono Impossibili da Ignorare
I popup lightbox occupano l'intero schermo e sfocano tutto il resto. Quindi, è praticamente impossibile ignorarli.
Ciò è particolarmente vero se sono animati:
Naturalmente, devi assicurarti che i tuoi popup non siano invadenti. E puoi farlo personalizzando quando attivare diversi popup sul tuo sito. Finché il tuo pubblico non è infastidito dall'interruzione, puoi convincerlo e convertirlo molto facilmente.
#3. I Popup Lightbox Hanno Trigger Personalizzati
Non dovresti mostrare la stessa offerta a tutti i tuoi visitatori web. Se gestisci un negozio di e-commerce, avrai bisogno di offerte molto diverse per i clienti nuovi e di ritorno.
Per un nuovo cliente, puoi attivare una campagna di benvenuto:
Ma per un cliente di ritorno, potresti voler inviare loro un'offerta diversa:
Nota come gli importi dello sconto per entrambe le offerte sono esattamente gli stessi. Ma il modo in cui l'offerta è presentata è drasticamente diverso. E questo è super importante perché i popup lightbox sono costruiti per effetti teatrali. Quindi, un approccio più personalizzato ti darà sicuramente risultati molto migliori.
Potresti persino personalizzare l'offerta in base alle preferenze di contenuto del tuo utente. Se stanno leggendo un articolo sulle ricette per la cena, ha più senso mostrare loro un'offerta relativa alle ricette per la cena piuttosto che mostrare loro un'offerta per le auto.
#4. I Popup Lightbox Possono Catturare i Visitatori che Abbandonano
I lightbox sono solo un metodo per visualizzare il tuo popup. Quindi, non c'è davvero nulla che ti impedisca di personalizzare il trigger a qualsiasi estensione desideri. Raccomandiamo di creare popup lightbox con intento di uscita.
I popup con intento di uscita vengono attivati quando i tuoi visitatori tentano di uscire dal tuo sito web. Di conseguenza, mantieni un gran numero di visitatori che altrimenti avrebbero abbandonato il tuo sito. Quindi, se soffri di abbandono del sito, dovresti assolutamente creare un popup lightbox con intento di uscita.
Come Creare un Popup Lightbox
Ora che capisci cos'è un popup lightbox e perché vorresti crearne uno, come si crea un popup lightbox? Ti consigliamo di utilizzare OptinMonster per creare i tuoi popup.
OptinMonster è il toolkit di conversione numero 1 al mondo e lo abbiamo utilizzato noi stessi. OptinMonster rende semplicissimo creare potenti popup che convertono. E non dovrai mai usare alcun codice.
Abbiamo persino scritto una recensione completa di OptinMonster.
Puoi consultarla, o iniziare subito con la tua campagna. Tutto quello che devi fare è iscriverti a OptinMonster e seguire il resto di questo articolo.
Passaggio #1: Crea una Campagna
Vai alla tua dashboard di OptinMonster e premi il pulsante Crea:
Seleziona il tipo di campagna Popup Lightbox:
Quindi, scegli un modello di campagna. Puoi scegliere qualsiasi modello desideri, ma noi useremo il tipo di campagna Semplice per questo tutorial.
Ora, dai un nome alla tua campagna. Ricorda, questo nome di campagna è per te e probabilmente creerai un sacco di questi popup con diverse opzioni di targeting. Quindi, dai alla campagna un nome significativo o finirai per essere davvero confuso in seguito.
Inoltre, a seconda del tuo piano, puoi anche utilizzare OptinMonster su più siti. Quindi, seleziona anche il sito web in cui desideri visualizzare la tua campagna.
Premi Inizia a Costruire quando hai finito.
Passaggio #2: Modifica il Tuo Popup Lightbox
Con OptinMonster, otterrai un costruttore di popup visivo drag and drop. Una volta terminata la creazione della tua campagna, sarai in grado di modificare anche i minimi dettagli del tuo popup. Inizia modificando il titolo del tuo popup:
La parte più sorprendente è che basta fare clic su qualsiasi testo si desideri modificare e cambiarlo inline. Non è necessario compilare un modulo o modificare alcun codice HTML nel popup.
E poi, regola il testo e l'aspetto del tuo pulsante per creare una chiara call to action:
Quando sei soddisfatto dell'aspetto del tuo popup, puoi passare a impostazioni più avanzate.
Passaggio #3: Imposta le Regole di Visualizzazione
Le regole di visualizzazione servono a definire quando la tua campagna appare sul tuo sito e chi la vede.
La nostra raccomandazione è di cambiare la condizione di trigger in intento di uscita:
Fare clic su Passaggio successivo per scegliere l'Azione. Qui, si consiglia di impostare Mostra la visualizzazione della campagna su Visualizzazione Optin, impostare mostra con MonsterEffect su qualsiasi animazione di ingresso desiderata e riproduci effetto sonoro su qualsiasi effetto sonoro per il tuo popup.
Quindi, fare clic sul pulsante Passaggio successivo. È possibile visualizzare l'intera estensione delle impostazioni nella scheda Riepilogo.
Passaggio n. 4: Configura la tua integrazione e-mail
Il passaggio successivo consiste nel configurare l'integrazione e-mail. Fare clic su Aggiungi nuova integrazione dalla scheda Integrazioni e selezionare il proprio provider di servizi e-mail:
Si consiglia di utilizzare Drip per il proprio marketing via e-mail se non si dispone già di un provider di servizi e-mail.
Passaggio n. 5: Pubblica il tuo popup Lightbox
Quando crei una nuova campagna, è in pausa per impostazione predefinita.
Vai alla scheda Pubblica dal menu in alto per vedere le Opzioni di pubblicazione. Quindi, imposta lo stato su Pubblica e seleziona la piattaforma del sito web:
Se gestisci un sito WordPress, il plugin OptinMonster gestisce automaticamente il resto della configurazione. Lo stesso vale per Shopify e BigCommerce. Per qualsiasi altro sito, fai clic su Qualsiasi sito e incolla il codice di incorporamento nell'intestazione del tuo sito web:
E hai finito!
BONUS: Raccogli iscritti alle notifiche push dal tuo popup
Le notifiche push ti aiutano a far crescere il traffico del tuo sito web e il coinvolgimento in modo automatico. Le notifiche push web sono un modo efficace per riportare gli utenti che potrebbero aver abbandonato la loro sessione o lasciato il sito web. Aiuta a coinvolgere nuovamente gli utenti notificando loro nuovi contenuti, offerte o eventi.
Le notifiche push includono anche messaggi chiari e attuabili e pulsanti di invito all'azione, incoraggiando gli utenti a intraprendere azioni specifiche, come leggere un articolo, completare un acquisto o partecipare a un evento.
Puoi personalizzare le notifiche push in base alle preferenze, al comportamento e agli interessi degli utenti, per assicurarti che i messaggi siano pertinenti e di valore per ciascun utente. Gli utenti devono accettare di ricevere notifiche push web. Ciò garantisce che i messaggi non vengano visti come spam e che vengano inviati con il permesso degli utenti.
La parte più interessante è che puoi raccogliere iscritti alle notifiche push dal tuo popup e-mail. Quindi, nel caso in cui i visitatori del tuo sito non vogliano cedere il loro ID e-mail, puoi comunque farli iscrivere utilizzando le notifiche push web.
Ed è su questo che andremo a lavorare.
Passaggio n. 1: Seleziona un servizio di notifiche push
Si consiglia di utilizzare PushEngage per inviare notifiche push web.
Ecco una rapida panoramica di ciò che ottieni con PushEngage:
- Campagne automatizzate ad alta conversione
- Opzioni di targeting multiple e pianificazione delle campagne
- Monitoraggio obiettivi e analisi avanzate
- Test A/B intelligenti
- Un responsabile del successo dedicato
Puoi iniziare gratuitamente, ma se fai sul serio nel far crescere la tua attività, dovresti acquistare un piano a pagamento. Inoltre, prima di acquistare qualsiasi servizio di notifiche push, dovresti consultare questa guida ai costi delle notifiche push.
E se gestisci un negozio online, PushEngage ti aiuta anche a far crescere le tue vendite aiutandoti a creare notifiche push e-commerce automatizzate.
Vedrai che PushEngage è senza dubbio la scelta migliore se vuoi aumentare traffico, engagement e vendite per la tua attività. E se hai un budget limitato, puoi sempre essere un po' creativo con le tue notifiche push.
Passaggio n. 2: Aggiungi un blocco HTML al tuo popup
Innanzitutto, aggiungi un blocco HTML al tuo popup dalla barra laterale in OptinMonster.
Qui è dove aggiungeremo il codice per raccogliere gli iscritti alle notifiche push. Per prima cosa, incolla il seguente codice per creare un pulsante cliccabile:
<button onclick="subscribeOnClickButton()" style="border: none; width: 100%; padding-left: 15%; padding-right:15%; text-align: center; display: inline-block; color: white;">Get Updates via Push Notifications Instead</button>Incolla il codice dove dice che puoi aggiungere HTML:
A questo punto, dovresti vedere un nuovo pulsante nel tuo popup che dice "Ricevi aggiornamenti tramite notifiche push invece" proprio sotto il pulsante di iscrizione e-mail:
Naturalmente, puoi giocare con gli stili per renderlo più accattivante. Successivamente, faremo in modo che il pulsante raccolga gli iscritti alle notifiche push quando viene cliccato.
Passaggio n. 3: Ottieni il codice di iscrizione da PushEngage
Vai alla pagina principale di PushEngage e fai clic sul pulsante Inizia:
Quindi, vorrai selezionare il piano gratuito per provare PushEngage o scegliere un piano a pagamento se fai sul serio nel far crescere la tua attività. I piani a pagamento offrono più opzioni di campagna e la possibilità di creare elenchi di iscritti ancora più grandi.
Nella tua dashboard PushEngage, vai su Impostazioni sito » Dettagli sito e fai clic sul pulsante Fai clic qui per le istruzioni di configurazione. Sotto Qualsiasi sito, otterrai il tuo codice di installazione:
ATTENZIONE: Devi copiare il codice che ottieni dalla tua dashboard. Il codice è unico per ogni utente di PushEngage. Non sarai in grado di copiare il codice nell'immagine e raccogliere gli iscritti alle notifiche push.
Una volta che hai il codice nella tua dashboard PushEngage, prendi il secondo script e aggiungi del codice extra. Il tuo codice finale dovrebbe assomigliare a questo:
<script src="https://clientcdn.pushengage.com/core/02a6e92667ae2279fcba8932356c1d93.js" async></script>
<script> window._peq = window._peq || [];
function subscribeOnClickButton(){
window._peq.push(['subscribe',{}.pe,function(res){
console.log(res);
}]);
}
</script>Passaggio n. 4: Aggiungi il tuo codice di iscrizione al blocco HTML nel tuo popup
Aggiungi questo codice al blocco HTML in OptinMonster e hai finito!
Al termine, premi i pulsanti Salva e Pubblica.
Se controlli il tuo sito web, ora dovresti vedere il popup lightbox raccogliere iscritti sia e-mail che notifiche push:
E proprio così, stai raccogliendo iscritti push dal tuo popup. Le notifiche push sono dotate dei propri modali popup. Ma sono un po' difficili da personalizzare. Quindi, puoi creare bellissimi popup usando OptinMonster e poi usarli come tuoi popup di notifica push.
Cosa fare dopo aver creato un popup Lightbox
Questo è tutto per questo, gente!
Facci sapere se questo articolo ti è stato utile. La creazione di popup sul tuo sito può aiutarti a convertire il tuo traffico in iscritti alla newsletter e in lead commerciali reali. E ti consigliamo vivamente di iniziare subito a creare popup lightbox.
E se stai cercando un modo conveniente per aumentare il tuo traffico, ti consigliamo di utilizzare le notifiche push. Le notifiche push possono aiutarti ad aumentare il traffico di ritorno e l'engagement del sito. Puoi anche creare campagne di notifiche push automatizzate che generano vendite.
Non sei convinto? Dai un'occhiata a queste risorse:
- 7 Strategie Intelligenti per Aumentare l'Engagement dei Clienti
- Le notifiche push sono efficaci? 7 statistiche + 3 consigli degli esperti
- Come impostare le notifiche push per carrelli abbandonati (tutorial facile)
Ti consigliamo di utilizzare PushEngage per creare le tue campagne di notifiche push. PushEngage è il software di notifiche push numero 1 al mondo. Quindi, se non l'hai già fatto, inizia oggi stesso con PushEngage!
