Un modulo a comparsa scivola senza soluzione di continuità dal bordo dello schermo invece di apparire al centro come un pop-up tradizionale. Fornisce alta visibilità senza bloccare i contenuti, perfetto per campagne ottimizzate per dispositivi mobili.
Questa guida mostra come creare, personalizzare e ottimizzare un modulo a comparsa per il tuo Negozio.
Prima di iniziare
I moduli a comparsa utilizzano le stesse impostazioni di comportamento e tema dei moduli pop-up. Per ulteriori dettagli su Elementi, Layout, Comportamento e personalizzazione del Tema, vedere la Guida al Modulo di iscrizione Pop-up.
Lo snippet JavaScript di Omnisend deve essere installato sul tuo sito web. Per Shopify, BigCommerce o WooCommerce, questo viene aggiunto automaticamente quando colleghi il tuo negozio. Per piattaforme personalizzate, installa manualmente lo snippet.
Perché usare un modulo flyout?
I flyout offrono tre vantaggi chiave rispetto ai pop-up centrali:
Ingresso non intrusivo: Scivola dal bordo dello schermo invece di bloccare bruscamente i contenuti. I visitatori possono navigare mentre il modulo rimane visibile.
Ottimizzato per dispositivi mobili: Si adatta perfettamente ai bordi dello schermo senza margini orizzontali o ritagli scomodi.
Visibilità persistente: Rimane visibile durante lo scorrimento; lo sfondo rimane completamente interattivo e cliccabile.
💡 Ideale per: Negozi mobile-first, offerte di uscita e campagne di raccolta contatti sottili.
Come creare un modulo flyout
Passaggio 1. Crea un nuovo modulo flyout
Vai a Moduli → Crea Modulo → Tipo → Flyout → Scegli un template email.
💡 Puoi anche cambiare lo stile di un modulo esistente (ad esempio, da Pop-up a modulo a comparsa) nelle impostazioni del tema → Layout del modulo.
Passo 2. Personalizza il tuo modulo
Usa il costruttore di moduli drag-and-drop per regolare:
Elementi: Aggiungi o rimuovi campi (email, telefono, nome), pulsanti, immagini, blocchi di testo o caselle di controllo per il consenso legale.
Layout: Scegli un passo singolo o multi-passo (raccogli prima l'email, poi il telefono nel Passo 2). Scopri di più sui moduli multi-step
Copia: Scrivi titoli orientati all'azione (ad es., "Ottieni il 15% di sconto sul tuo primo ordine" invece di "Iscriviti alla nostra newsletter").
Messaggio di successo: Personalizza ciò che i visitatori vedono dopo aver inviato (testo di ringraziamento o codice sconto).
💡 Consiglio: Mantieni i campi al minimo – i moduli solo per email convertono il 20–30% in più rispetto alle versioni con più campi.
Passaggio 3. Imposta le impostazioni di comportamento
Controlla quando, dove e a chi appare il tuo flyout:
Trigger di visualizzazione
Scegli uno o più:
Tempo sulla pagina: Mostra dopo 6–10 secondi (raccomandato per i visitatori per la prima volta).
Profondità di scorrimento: Trigger al 50% di scorrimento (buono per i post del blog).
Intenzione di uscita: Visualizza quando i visitatori si muovono per chiudere la scheda (desktop e mobile).
Trigger personalizzato: Usa eventi JavaScript per scenari avanzati. Vedi la guida ai trigger personalizzati
Nota: Tutti i trigger usano la logica "OR" – se imposti "10 secondi O 50% di scorrimento," il modulo appare quando una delle condizioni è soddisfatta.
Targeting
Decidi chi vede il modulo:
Tutti i visitatori: Mostra a tutti.
Non mostrare ai contatti esistenti: Targetizza solo i nuovi visitatori (raccomandato per evitare di infastidire gli abbonati).
Targeting della pagina: Visualizza su URL specifici (ad es.,
/collections/sale) o escludi pagine (ad es.,/checkout).Targeting per posizione: Mostra ai visitatori in paesi o regioni specifiche.
Frequenza
Imposta con quale frequenza il modulo riappare per lo stesso visitatore:
Una volta per sessione: Si chiude dopo la chiusura; riappare nella visita successiva.
Una volta ogni X giorni: Si nasconde per 7/14/30 giorni dopo la visualizzazione.
Reindirizza dopo l'invio
Usa Reindirizza dopo l'invio per inviare automaticamente i visitatori a un URL selezionato dopo che hanno inviato il modulo.
💬 Scopri di più: Impostazioni Comportamento Moduli di Iscrizione.
Passaggio 4. Personalizza le impostazioni del tema
Abbina il flyout al tuo marchio:
Layout del modulo: Conferma il tipo di visualizzazione = Flyout. Regola la larghezza (mobile vs. desktop).
Posizione: Scegli il bordo sinistro o destro (i flyout scivolano dai lati, non dal centro).
Colori: Imposta i colori di sfondo, pulsante e testo per abbinare il tema del tuo negozio.
Font: Usa i font del tuo marchio o i predefiniti di Omnisend.
Pulsante di chiusura: Mostra/nascondi il pulsante X; regola colore e stile.
5c8 Scopri di più: Impostazioni tema dei moduli di iscrizione.
Passo 5. Aggiungi un teaser (opzionale)
Un teaser è un piccolo pulsante che rimane visibile dopo la chiusura del flyout. Quando cliccato, riapre il modulo completo.
Per aggiungere: Scorri fino al menu in fondo nel Costruttore di moduli 9d53fb5a3 + icona 9d53fb5a3 Teaser.
4a1 Ideale per: Flyout con intento di uscita o offerte sconto – offre ai visitatori una seconda possibilità di iscriversi senza riattivare il completo scorrimento.
Passo 6. Abilita il tuo modulo
Clicca Abilita modulo nel menu in alto a sinistra. Il tuo flyout andrà online immediatamente sul tuo sito web.
Prima di abilitare, controlla due volte:
L'anteprima mobile sembra buona (testa su telefono o usa la vista mobile del Costruttore di moduli).
Le regole di targeting sono corrette (non vuoi flyout sulle pagine di checkout).
La casella di consenso legale è abilitata se necessario (conformità al GDPR). Vedi la guida GDPR.
Monitora le prestazioni
Dopo aver abilitato, monitora i risultati in Rapporti 9d53fb5a3 Moduli 9d53fb5a3 Apri il rapporto dedicato del tuo flyout.
Metriche chiave:
Visualizzazioni: Quanti visitatori hanno visto il flyout.
Invii: Quanti hanno inviato il modulo.
Percentuale di iscrizione: Quanti si sono iscritti come nuovi abbonati.
💡 Suggerimento: Esegui un Test A/B per confrontare i tassi di conversione di flyout vs. pop-up per il tuo pubblico.
Domande frequenti
Qual è la differenza tra un flyout e un pop-up?
I flyout scivolano dal bordo dello schermo; i popup appaiono al centro con uno sfondo oscurato. Entrambi utilizzano le stesse opzioni di targeting, attivazione delle visualizzazioni e personalizzazione. I flyout sono meno invadenti, specialmente su mobile.
Posso aggiungere un teaser a un flyout?
Sì. Aggiungi un teaser nel Costruttore di moduli (menu in fondo 9d53fb5a3 + icona 9d53fb5a3 Teaser).Dopo la chiusura del flyout, il pulsante del teaser rimane visibile. Cliccando si riapre il modulo completo.
Dovrei usare flyout o pop-up per i visitatori mobili?
I flyout sono migliori per mobile perché non bloccano l'intero schermo. I visitatori possono scorrere e navigare mentre il flyout rimane visibile di lato.
Posso raccogliere sia email che SMS in un solo flyout?
Sì. Add both Email Input and Phone Number fields. For higher completion rates, use a raccogliere email nel Passo 1, telefono nel Passo 2.
Funziona il flyout con l'intento di uscita su mobile?
Sì. L'intento di uscita su mobile si basa su uno scorrimento rapido verso l'alto (rilevato quando i visitatori scorrono per chiudere la scheda).
Posso cambiare da quale lato appare il flyout (sinistra vs. destra)?
Sì. Vai a Impostazioni tema → Layout del modulo → Posizione e seleziona Sinistra o Destra. Questo determina da quale bordo dello schermo il flyout scivola.
Posso reindirizzare i visitatori a una pagina di ringraziamento dopo l'iscrizione?
Sì. Imposta le tue impostazioni di reindirizzamento sottoImpostazioni comportamento → Reindirizza dopo l'invio.
Posso programmare il mio flyout per mostrare solo durante date specifiche (ad es., Black Friday)?
Sì. Vai a Comportamento → Programma e imposta le date di inizio/fine. Il tuo flyout apparirà solo durante quel periodo. Perfetto per campagne stagionali, vendite lampo o offerte a tempo limitato.
Hai bisogno di aiuto con qualcosa? Il nostro Team di Supporto è pronto ad assisterti tramite chat in-app o a [email protected].