Moduli, pulsanti e widget

Modulo 4: Pagine, aspetto e funzioni · Tempo di lettura: 8 minuti

Obiettivo della lezione: Al termine di questa lezione saprà configurare il modulo di contatto (destinatario, conferma, pagina di ringraziamento, controllo antispam, newsletter e metodo di invio), inserire pulsanti fluttuanti per WhatsApp e per i contatti e incorporare un widget di un altro servizio. Saprà inoltre quando conviene usare Codice personalizzato e HTML personalizzato.

Concetti chiave: modulo di contatto, destinatario, e-mail di conferma, pagina di ringraziamento, captcha, doppia iscrizione (double opt-in), metodo di invio, pulsante fluttuante, widget, codice di incorporamento, consenso, Codice personalizzato, HTML personalizzato

Il modulo di contatto: due posizioni

Un modulo sul Suo sito è composto da due parti. Il modulo vero e proprio, con i campi che il visitatore compila, si trova su una pagina. Lo inserisce con la sezione Contatti (tramite Elementi o Aggiungi sezione) oppure tramite la chat. Che cosa succede quando qualcuno fa clic su Invia lo imposta invece in Impostazioni > Moduli. Questo pannello lo configura sempre Lei: la chat non lo fa.

Il modulo contiene sempre i campi nome, e-mail e messaggio. Tramite la chat può aggiungere altri campi, al massimo otto: un campo di testo, un elenco a scelta (ad esempio "Interno o esterno?"), e-mail, telefono, un campo di testo lungo, una data o un numero. Un campo per inviare un file o una foto non esiste. Se Schildersbedrijf Example desidera ricevere foto del lavoro da eseguire, scrive nel testo di ringraziamento: "Può inviarci le foto al nostro indirizzo e-mail."

Importante: sul sito gratuito senza pacchetto il modulo è visibile ma disattivato (in grigio) e non invia alcuna e-mail. I moduli inviano davvero i messaggi solo quando il Suo sito si trova in un pacchetto AI Builder. Può comunque preparare già le impostazioni descritte qui sotto: verranno usate subito.

Impostazioni > Moduli

Il pannello ha cinque blocchi.

Ricevere i messaggi. In Invia i messaggi a inserisca l'indirizzo e-mail a cui devono arrivare i moduli compilati. Se lo lascia vuoto, i messaggi vanno all'indirizzo e-mail del Suo account WebOké. Lo compili quindi in modo consapevole. In Oggetto dell'e-mail sceglie l'oggetto (se vuoto: "Nuovo messaggio dal suo sito web"). In Dopo l'invio sceglie Mostra un ringraziamento con un testo Suo, oppure Reindirizza a una pagina: una pagina di ringraziamento che crea Lei e che tiene fuori dal menu (lezione 4.1). In questo modo potrà poi misurare quante volte il modulo viene inviato.

Invia tramite. Il modo in cui viene spedita l'e-mail. Server di WebOké funziona subito, con mittente noreply@weboke.site. Il suo indirizzo e-mail (SMTP) è consigliato: l'e-mail parte allora dal Suo dominio e finisce meno facilmente nello spam. Con Configuralo per me il builder crea quell'indirizzo sul Suo dominio. Sotto il Suo indirizzo e-mail può anche scegliere un servizio di posta, come Postmark, Brevo, Mailgun o SendGrid. Perché il mittente conta così tanto lo legge nella lezione 5.3.

Conferma al visitatore. Se attiva Invia una copia al visitatore, il visitatore riceve un'e-mail di conferma. Spesso è il primo messaggio che una persona riceve da Lei. Sceglie l'oggetto, Il suo testo (con {naam} per il nome del visitatore), la Firma e se allegare il messaggio compilato. Il builder impagina il Suo testo con lo stile del Suo sito e il Suo logo. Con Fai scrivere questo testo all'IA riceve una proposta.

Blocca lo spam. Ogni modulo ha sempre un controllo invisibile: un campo nascosto e un limite di tempo. Questo ferma la maggior parte dello spam senza che i visitatori se ne accorgano. Se riceve comunque molto spam, scelga un controllo aggiuntivo, un captcha: Cloudflare Turnstile o hCaptcha. Per farlo crea un account gratuito presso quel servizio e inserisce la Site key e la Secret key. Attivi un captcha solo quando serve: ogni passaggio in più fa perdere visitatori.

Newsletter. Può aggiungere al modulo una casella con cui i visitatori si iscrivono a Mailchimp, Laposta, Brevo o MailerLite. Viene aggiunto solo chi spunta la casella di sua iniziativa. Sempre con doppia iscrizione: il visitatore conferma prima tramite un'e-mail. Con Laposta e MailerLite la attiva Lei stesso in quel servizio; il builder Le indica dove. Senza doppia iscrizione chiunque potrebbe inserire indirizzi altrui nella Sua lista.

Inoltre: un visitatore può inviare al massimo 5 messaggi all'ora. Se ha un'informativa sulla privacy, sotto il modulo compare un link a essa. Un modulo raccoglie dati personali; che cosa deve predisporre a questo scopo è spiegato nella lezione 7.1.

Insidia: dopo ogni modifica provi Lei stesso il modulo, da un indirizzo diverso da quello di ricezione. Controlli anche la cartella dello spam e verifichi che la conferma arrivi al "visitatore".

Pulsanti fluttuanti

In Impostazioni > Pulsanti inserisce pulsanti che restano visibili in basso su ogni pagina, a destra o a sinistra (Angolo: In basso a destra o In basso a sinistra).

• Numero WhatsApp: in formato internazionale, con il prefisso del paese (ad esempio +39 per un numero italiano) e senza lo 0 iniziale, se il numero ne ha uno. Se lo lascia vuoto, non c'è alcun pulsante WhatsApp. Un Messaggio precompilato è possibile, ad esempio "Vorrei un preventivo per lavori di tinteggiatura." Il pulsante apre una conversazione con il Suo numero.
• Pulsante di contatto fluttuante: apre il Suo modulo di contatto in una finestra. Il messaggio arriva allo stesso indirizzo del Suo modulo. Sceglie Lei il Testo del pulsante.

Nell'anteprima i pulsanti sono un po' più in alto che sul Suo sito reale, così non finiscono dietro il pulsante di aiuto del builder.

Attenzione: un pulsante WhatsApp promette una risposta rapida. Se legge WhatsApp solo la sera, scelga piuttosto il pulsante di contatto.

Widget di altri servizi

Un widget è un elemento di un altro servizio inserito nella Sua pagina: un video di YouTube, una mappa di Google Maps, un'agenda appuntamenti di Calendly, il Suo Instagram, una playlist di Spotify. Per molti servizi basta il link: il builder crea da sé il lettore o il modulo. Esempi: YouTube, Vimeo, Spotify, Calendly, Google Maps (basta l'indirizzo), Google Calendar, Instagram e TikTok (basta il Suo @nome) e Google Moduli. Per altri servizi, come Salonized, Trustpilot o Bandcamp, incolla il codice di incorporamento: il frammento di codice che riceve da quel servizio per inserirlo in un sito web.

Ecco come fare: lo chieda nella chat indicando il link ("metti la nostra mappa del percorso sotto il blocco contatti, indirizzo Via Roma 1"), incolli il codice nella chat, oppure scelga in Elementi la sezione Widget. Il builder riconosce il servizio, propone altezza e titolo e La avvisa se qualcosa non funzionerà. Se lo fa inserire all'IA, si tratta di una richiesta e consuma elaborazioni; vede prima quante. Un widget già inserito lo modifica con Modifica codice sul blocco nell'anteprima.

Tre cose da sapere:

1. Un widget si carica solo dopo il consenso. I servizi di terzi spesso installano cookie o tracciano i visitatori. Con il banner dei cookie attivo, un widget si carica solo quando il visitatore dà il consenso per quel tipo di cookie. Il servizio compare automaticamente nel Suo banner dei cookie in "Cosa è attivo ora sul suo sito". Controlli poi anche la Sua informativa sulla privacy (lezioni 7.1 e 7.2).
2. Google Calendar deve essere pubblico. Un calendario privato non può vederlo nessun altro. In Google Calendar renda pubblico solo un calendario separato con ciò che i visitatori possono vedere, mai il Suo calendario personale.
3. Il codice non sicuro non viene inserito. Il codice che può inoltrare dati dei visitatori, che nasconde ciò che fa o che carica qualcosa da un sito sconosciuto, l'IA non lo inserisce nel Suo sito. Ne spiega il motivo.

Codice personalizzato e HTML personalizzato, a grandi linee

Per gli utenti esperti ci sono due posizioni.

Codice personalizzato si trova in fondo a Impostazioni > Integrazioni: codice che deve essere presente su ogni pagina, Nell'head di ogni pagina o In fondo a ogni pagina. Ad esempio lo script di caricamento di un servizio di chat o di un widget di recensioni. Il builder non controlla questo codice ("Questo codice non lo controlliamo"). I servizi noti vengono bloccati dal banner dei cookie finché non c'è il consenso. Spunti Questo codice è necessario solo per codice che non traccia i visitatori, perché in quel caso si carica subito. Nell'anteprima del builder il codice personalizzato non viene eseguito, sul Suo sito reale sì. Sul sito gratuito il codice personalizzato non funziona. Per un ID di misurazione come Google Analytics non usa Codice personalizzato, ma il campo apposito in Integrazioni (lezione 7.2).

HTML personalizzato è una sezione in Elementi. Incolla del codice HTML ed eventualmente CSS, e lo modifica in seguito con Modifica HTML. Colori e caratteri seguono la Sua immagine coordinata. Script, iframe e moduli qui non funzionano; per questi usi un widget.

Usi entrambi solo se non c'è altra soluzione: il codice di terzi è un rischio per velocità, sicurezza e privacy.

Nel builder: ecco come fare

1. Inserisca la sezione Contatti con il modulo nella Sua pagina dei contatti.
2. Apra Impostazioni > Moduli. Compili Invia i messaggi a.
3. In Invia tramite scelga il Suo indirizzo e-mail, oppure lasci il server di WebOké finché il Suo dominio non è pronto (lezione 5.3).
4. Attivi Invia una copia al visitatore e scriva il Suo testo.
5. In Dopo l'invio scelga un ringraziamento o una pagina di ringraziamento.
6. Se necessario, in Impostazioni > Pulsanti aggiunga un pulsante WhatsApp o di contatto.
7. Pubblichi il Suo sito e invii un messaggio di prova.

Riepilogo

• Il modulo si trova su una pagina; che cosa succede ai messaggi lo imposta in Impostazioni > Moduli.
• Compili Invia i messaggi a in modo consapevole; come mittente scelga preferibilmente il Suo indirizzo e-mail.
• Sul sito gratuito il modulo non invia e-mail; allegare un file non è mai possibile.
• I pulsanti fluttuanti per WhatsApp e per i contatti si trovano in Impostazioni > Pulsanti.
• I widget si caricano solo dopo il consenso; Codice personalizzato e HTML personalizzato sono per utenti esperti.

Quiz

Esercizio

Esercizio D4.3: Il Suo modulo di contatto e un widget. Configuri completamente il Suo modulo e inserisca un widget che aggiunga davvero qualcosa.

Checklist:

• [ ] sezione Contatti con modulo nella Sua pagina dei contatti;
• [ ] Invia i messaggi a compilato con un indirizzo che legge ogni giorno;
• [ ] metodo di invio scelto, sapendo perché;
• [ ] conferma al visitatore con un testo Suo;
• [ ] ringraziamento o pagina di ringraziamento impostati;
• [ ] un widget inserito (ad esempio una mappa o un'agenda appuntamenti) e verificato che compaia nel banner dei cookie;
• [ ] sito online e messaggio di prova inviato (solo con un pacchetto; sul sito gratuito controlla le impostazioni).

Domande:

1. A quale indirizzo arrivano i messaggi del Suo modulo e con quale metodo di invio?
2. Quale widget ha scelto, che cosa aggiunge per il Suo visitatore e che cosa vede un visitatore che non dà il consenso?
3. Il Suo messaggio di prova è arrivato? E la conferma è arrivata al "visitatore" oppure è finita nello spam?

Dopo aver segnato "fatto" vedrà una risposta d'esempio: Schildersbedrijf Example invia i messaggi a info@example.com tramite il proprio indirizzo e-mail sul dominio; il widget è una mappa di Google Maps con l'indirizzo, che si carica solo dopo il consenso e altrimenti mostra un riquadro con un pulsante per dare il consenso; il messaggio di prova è arrivato, la conferma anche, non nello spam.

Per approfondire

• Un modulo di contatto sul Suo sito web: inviare i campi via e-mail e prevenire lo spam
• Corso gratuito E-mail in ordine: configurarla e farla arrivare correttamente 7.3: Posta dal Suo sito web e dai moduli di contatto
• Corso gratuito E-mail in ordine: configurarla e farla arrivare correttamente 7.2: Consenso, disiscrizione e una lista pulita
• Usare la funzione Click to chat (Centro assistenza WhatsApp): https://faq.whatsapp.com/5913398998672934
• Create & manage a public Google calendar (Guida di Google Calendar, in inglese): https://support.google.com/calendar/answer/37083