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.
Il nostro team di assistenza non può offrire supporto pratico, perché per incollare questo codice è necessario l'accesso all'HTML del tuo sito e alla tua piattaforma di e-commerce. Se nel tuo team non è presente uno sviluppatore e non te la senti di aggiungere il codice in autonomia, valuta di rivolgerti a un partner Klaviyo per ricevere assistenza.
Prima di iniziare, assicurati che JavaScript onsite di Klaviyo (Klaviyo.js) sia installato su ogni pagina in cui aggiungi il pulsante. Assicurati che i moduli d'iscrizione siano abilitati sul tuo sito web.
Crea un nuovo pulsante
Prima di aggiungere un nuovo pulsante al tuo sito web, configura il tuo modulo d'iscrizione in Klaviyo:
- Crea un nuovo modulo d'iscrizione da mostrare quando si fa clic sul pulsante, oppure scegli un modulo che hai già creato.
- Seleziona Modifica stili nell’editor del modulo. Imposta Tipo di modulo su Popup, flyout, Pagina intera o Banner. I moduli incorporati non possono essere attivati quando fai clic su un pulsante.
- Seleziona Targeting e comportamento > Display. In Tempistiche, imposta Mostra modulo su Solo con un attivatore personalizzato.
Gli attivatori personalizzati ignorano le regole del modulo relative a targeting, dispositivo e frequenza. Se devi limitare chi può aprire il modulo, applica queste condizioni al pulsante del tuo sito web o al codice personalizzato.
- Quando sei soddisfatto/a del design e dei contenuti del modulo, fai clic su Pubblica o pianifica, seleziona l’opzione Pubblica ora, quindi fai clic su Pubblica ora per pubblicare il modulo.
- Copia il codice qui sotto:
<button class="klaviyo_form_trigger">Click here</button>- 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.
Se aggiungi più pulsanti alla stessa pagina, assegna a ogni pulsante un nome di classe univoco (ad es., klaviyo_form_trigger1, klaviyo_form_trigger2), anche se aprono lo stesso modulo d'iscrizione. Lo snippet JavaScript qui sotto si collega solo al primo pulsante con una classe corrispondente. Aggiungi uno snippet corrispondente per ogni pulsante.
Imposta il pulsante in modo che attivi il tuo modulo d'iscrizione
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:
- 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>- Incolla lo snippet di codice direttamente sotto il codice del pulsante che hai aggiunto al tuo sito nella sezione precedente.
- Nello snippet che hai appena incollato, sostituisci FORM_ID con l'ID del tuo modulo d'iscrizione.
- Per trovare l’ID del modulo, torna su Klaviyo e apri l’editor del modulo per il tuo modulo d'iscrizione. Copia l’ID subito dopo /forms/ nell’URL. L’ID può contenere lettere e numeri; mantieni le maiuscole esattamente come mostrato quando sostituisci FORM_ID nel tuo snippet.
- Per trovare l’ID del modulo, torna su Klaviyo e apri l’editor del modulo per il tuo modulo d'iscrizione. Copia l’ID subito dopo /forms/ nell’URL. L’ID può contenere lettere e numeri; mantieni le maiuscole esattamente come mostrato quando sostituisci FORM_ID nel tuo snippet.
- 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:
- Ecco un esempio del codice completato in un editor di pagine Shopify:
Se hai modificato il nome della classe di un pulsante (ad esempio, in klaviyo_form_trigger1), sostituisci .klaviyo_form_trigger nello snippet JavaScript del pulsante con .klaviyo_form_trigger1. Mantieni il punto iniziale e usa l’ID del modulo che vuoi che il pulsante apra.
- 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
- Getting started with sign-up forms
Learn how to create and customize sign-up forms in Klaviyo to publish on your website so you can engage shoppers, collect emails and phone numbers, and build long-lasting customer relationships.
- Understanding targeting and behavior settings for sign-up forms
Learn about the Targeting & behavior section of the sign-up form editor, where you can control and change when a form appears on your site, and who sees it. Open the form editor for an existing sign-up form, then select Targeting & behavior to adjust the display and targeting settings covered in this guide.
- How to custom trigger a popup or flyout form
- Klaviyo practitioner certificate