Come attivare la visualizzazione di un modulo di iscrizione quando viene cliccato un pulsante

Imparerai

Scopra come far apparire un modulo di iscrizione sul suo sito web quando un visitatore clicca su un determinato pulsante. Questa guida la guiderà attraverso la regolazione del suo modulo da visualizzare su un trigger personalizzato, la creazione e l'aggiunta di un nuovo pulsante al suo sito e l'inserimento di un breve frammento di codice nell'HTML del suo sito, in modo che cliccando sul pulsante si attivi il modulo di iscrizione. 

Se è uno sviluppatore e desidera codificare in modo personalizzato un trigger per il suo modulo di iscrizione, consulti la nostra risorsa per sviluppatori su come attivare in modo personalizzato un modulo popup o flyout. 

Creare un nuovo pulsante 

Per prima cosa, crei un nuovo pulsante sul suo sito web che farà apparire il modulo di iscrizione quando viene cliccato. Dovrà assicurarsi che il suo modulo di iscrizione sia impostato correttamente in Klaviyo prima di aggiungere il pulsante al suo sito. Per farlo:

1. Crei un nuovo modulo di iscrizione da far apparire quando si clicca sul pulsante, oppure scelga un modulo già creato.
2. Nella scheda Stili, il suo Tipo di modulo deve essere impostato su Popup, Flyout o Pagina intera. I moduli incorporati non possono essere attivati quando viene cliccato un pulsante.
3. Nella scheda Comportamenti di targeting & , selezioni Mostra solo su trigger personalizzato sotto Tempistica.
   
4. Quando è soddisfatto del design e del contenuto del suo modulo, clicchi su Pubblica. 
5. Successivamente, apra l'editor del suo modulo e scelga le seguenti impostazioni
6. Copi il codice qui sotto:

   <button class="klaviyo_form_trigger"> Clicchi qui</button>

7. Incolli il codice nell'HTML di qualsiasi pagina del suo sito web in cui desidera che il pulsante appaia. Questo pulsante utilizzerà gli stili predefiniti del modello del suo sito. Se desidera personalizzare ulteriormente l'aspetto del pulsante, consulti il suo sviluppatore o un Partner Klaviyo.

Tenga presente che se aggiunge al suo sito più pulsanti che attivano diversi moduli di iscrizione, dovrà utilizzare un nome unico per classificare ogni pulsante (ad esempio, klaviyo_form_trigger1, klaviyo_form_trigger2). 

Imposta il pulsante per attivare il suo modulo di iscrizione

Ora che ha aggiunto un nuovo pulsante al suo sito web, dovrà impostare il trigger in modo che il modulo di iscrizione appaia quando viene cliccato. Configuri l'innesco aggiungendo un piccolo snippet JavaScript personalizzato al suo sito:

1. Copi lo snippet di codice qui sotto: 
   

   <script type="text/javascript">
   	document.querySelector('.klaviyo_form_trigger').addEventListener('click', function (){
   		window._klOnsite = window._klOnsite || []; 
   		window._klOnsite.push(['openForm', 'FORM_ID']);
   	});
   </script>

2. Incolli lo snippet di codice direttamente sotto il codice del pulsante che ha aggiunto al suo sito nell'ultima sezione.
3. Nello snippet appena incollato, sostituisca FORM_ID con l'ID del suo modulo di iscrizione.
   • Per trovare l'ID del modulo, torni su Klaviyo e apra l'editor di moduli per il suo modulo di iscrizione. Copi il codice di 6 cifre alla fine dell'URL da aggiungere al suo snippet di codice; si tratta dell'ID del modulo.
     
4. Il codice completato deve includere il nuovo codice del pulsante e il trigger del modulo di iscrizione con il suo ID modulo unico. Si assicuri di incollare questo codice in ogni pagina in cui ha aggiunto il codice del pulsante.
   • Ecco un esempio del codice completato nell'editor di una pagina di Shopify: 
     
     

     Se ha modificato la classe del pulsante nell'ultimo passaggio (ad esempio, ha sostituito klaviyo_form_trigger con un altro testo o ha aggiunto un numero), si assicuri di aggiornare questo codice con il testo che ha utilizzato. 

5. Salva le modifiche.

Provi il suo pulsante 

Una volta salvate tutte le modifiche al codice del suo sito, visiti il suo sito e clicchi sul nuovo pulsante. Una volta fatto, apparirà il modulo di iscrizione. 

Ha problemi? Visiti il Forum della Comunità di Klaviyo per ricevere indicazioni dagli altri utenti di Klaviyo. 

Risorse aggiuntive

• Come iniziare a usare i moduli di iscrizione
• Come attivare in modo personalizzato un modulo popup o flyout
• Come scegliere il targeting dei moduli e le impostazioni di comportamento
• Corso: Certificazione del prodotto Klaviyo