Come attivare la comparsa di un modulo d'iscrizione quando si fa clic su un pulsante

Cosa imparerai

Scopri come attivare un modulo d'iscrizione in modo che appaia sul tuo sito web quando un visitatore fa clic su un determinato pulsante. Questa guida ti accompagna nell'adattare il tuo modulo in modo che venga mostrato con un trigger personalizzato, nel creare e aggiungere un nuovo pulsante al tuo sito e nell'incollare un breve snippet di codice nell'HTML del tuo sito, in modo che facendo clic sul pulsante venga attivato il modulo d'iscrizione.

Se sei uno sviluppatore e vuoi creare con codice personalizzato un trigger per il tuo modulo d'iscrizione, vai alla nostra risorsa per sviluppatori su come attivare con un trigger personalizzato un modulo popup o flyout.

Crea un nuovo pulsante

This content requires Functional cookies to be enabled.

Update Cookie Settings

Per prima cosa, crea un nuovo pulsante sul tuo sito web che farà comparire il modulo d'iscrizione quando viene fatto clic. Prima di aggiungere il pulsante al tuo sito, assicurati che il modulo d'iscrizione sia configurato correttamente in Klaviyo. Per farlo:

1. Crea un nuovo modulo d'iscrizione da mostrare quando si fa clic sul pulsante, oppure scegli un modulo che hai già creato.
2. Nella scheda Stili, il Tipo di modulo deve essere impostato su Popup, flyout o Pagina intera. I moduli incorporati non possono essere attivati quando si fa clic su un pulsante.
3. Nella scheda Targeting & Behaviors , seleziona Mostra solo su trigger personalizzato in Timing.
   

4. Quando sei soddisfatto del design e dei contenuti del modulo, clicca su Pubblica.
5. Quindi, apri l'editor del modulo e scegli le seguenti impostazioni
6. Copia il codice qui sotto:

<button class="klaviyo_form_trigger">Click here</button>

1. Incolla il codice nell'HTML di qualsiasi pagina del tuo sito web in cui vuoi che compaia il pulsante. Questo pulsante utilizzerà gli stili predefiniti del modello del tuo sito. Se vuoi personalizzare ulteriormente l'aspetto del pulsante, consulta il tuo sviluppatore o un partner Klaviyo.

Tieni presente che, se aggiungi più pulsanti al tuo sito che attivano ciascuno diversi moduli d'iscrizione, dovrai utilizzare un nome univoco per classificare ogni pulsante (ad es. klaviyo_form_trigger1, klaviyo_form_trigger2).

Imposta il pulsante in modo che attivi il tuo modulo d'iscrizione

This content requires Functional cookies to be enabled.

Update Cookie Settings

Ora che hai aggiunto un nuovo pulsante al tuo sito web, dovrai configurare l'attivatore in modo che il tuo modulo d'iscrizione venga visualizzato quando viene cliccato. Configura l'attivatore aggiungendo al tuo sito un piccolo snippet JavaScript personalizzato:

1. Copia 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>

1. Incolla lo snippet di codice direttamente sotto il codice del pulsante che hai aggiunto al tuo sito nella sezione precedente.
2. Nello snippet che hai appena incollato, sostituisci FORM_ID con l'ID del tuo modulo d'iscrizione.
   • Per trovare l'ID del modulo, torna in Klaviyo e apri l'editor del modulo d'iscrizione. Copia il codice a 6 cifre alla fine dell’URL da aggiungere al tuo snippet di codice; questo è l’ID modulo.
     

3. Il codice completato dovrebbe includere il nuovo codice del pulsante e l'attivatore del modulo d'iscrizione con il tuo ID modulo univoco. Assicurati di incollarlo in ogni pagina in cui hai aggiunto il codice del pulsante.
   • Ecco un esempio del codice completato in un editor di pagine Shopify:
     

1. Salva le modifiche.

Testa il pulsante

Dopo aver salvato tutte le modifiche al codice del tuo sito, visita il sito e fai clic sul tuo nuovo pulsante. Quando lo fai, verrà visualizzato il modulo d'iscrizione.

Problemi? Vai al forum della Community di Klaviyo per ricevere indicazioni da altri utenti di Klaviyo.

Risorse aggiuntive