Pulsante WhatsApp per il sito web: codice, plugin o widget

SendSeven Team, Editorial Team

Inserire un pulsante WhatsApp nel sito web: codice HTML da copiare, il link wa.me corretto con le lettere accentate, come procedere con WordPress, Shopify e Wix, cosa succede sul computer, GDPR, misurazione e cosa accade dopo il click. Con demo dal vivo.

Molti clienti preferiscono scrivere piuttosto che telefonare, e WhatsApp ce l'hanno comunque sullo smartphone. Un pulsante WhatsApp sul sito trasforma questa abitudine in un canale di contatto: un click e la chat con la tua azienda è aperta. Inserire il pulsante richiede pochi minuti. Questo articolo mostra il codice da copiare, la strada per WordPress, Shopify e Wix e i punti in cui un pulsante, nella pratica, si inceppa: sul computer, nella protezione dei dati, nella misurazione e nell'inbox.

Che cos'è un pulsante WhatsApp per il sito web?

Un pulsante WhatsApp è un pulsante o un link sul tuo sito che apre direttamente una chat WhatsApp con il numero della tua azienda. Tecnicamente dietro c'è il Click-to-Chat di WhatsApp: un link a wa.me con il tuo numero e, se vuoi, un testo già pronto nel campo di scrittura. Sullo smartphone il link apre l'app WhatsApp, sul computer WhatsApp Web o l'app desktop.

Il visitatore non deve digitare né salvare il tuo numero. Vede il testo già compilato, lo completa oppure lo invia, e tu ti ritrovi nell'inbox una richiesta con il numero di telefono. Che il pulsante sia verde, nei colori del tuo brand o un tasto rotondo a bordo schermo è solo una questione di design. Il link sotto è sempre lo stesso.

Demo dal vivo

Provalo: questi pulsanti aprono una chat vera

Ogni pulsante qui è un normale link wa.me verso il nostro supporto. Sullo smartphone si apre l'app WhatsApp, sul computer WhatsApp Web o l'app desktop.

1. Classico, in verde WhatsApp

Scrivici su WhatsApp

Si nota subito, il colore lo conoscono tutti.

2. Nei colori del tuo brand

Avvia la chat su WhatsApp

Il pulsante ha il tuo colore, il logo WhatsApp resta invariato.

3. Flottante in basso a destra

www.tuo-sito.it

Domande? Scrivici

Resta visibile durante lo scorrimento, su ogni pagina.

4. Codice QR per il computer

Sei al computer? Inquadra il codice con la fotocamera dello smartphone e la chat si apre direttamente nella tua app WhatsApp.

Tutte le varianti precompilano lo stesso messaggio: Ciao SendSeven, ho ancora qualche domanda sui pulsanti WhatsApp per il mio sito web. Il messaggio parte solo quando tocchi Invia. Solo allora vediamo il tuo numero e il nostro team di supporto ti risponde in chat.

Come si costruisce correttamente il link wa.me?

Il link è composto da https://wa.me/, dal tuo numero completo in formato internazionale senza segno più, senza zero iniziale e senza spazi o caratteri speciali, e facoltativamente da ?text= con il messaggio codificato come URL. È così che lo descrive WhatsApp nella guida ufficiale al Click-to-Chat.

Da +49 (0) 821 7898-8853 si ottiene così 4982178988853: prefisso internazionale 49, lo zero del prefisso locale cade, così come parentesi, trattini e spazi. Il link finito è https://wa.me/4982178988853.

Il messaggio precompilato deve essere codificato come URL. Lettere, cifre, trattino, punto, trattino basso e tilde restano, tutto il resto diventa un codice percentuale. Proprio le lettere accentate sono facili da sbagliare, perché in UTF-8 sono formate da due byte:

Un esempio: «è» diventa %C3%A8, e «più» diventa pi%C3%B9. Il link completo verso il nostro supporto ha questo aspetto:

https://wa.me/4982178988853?text=Ciao%20SendSeven%2C%20ho%20ancora%20qualche%20domanda%20sui%20pulsanti%20WhatsApp%20per%20il%20mio%20sito%20web.

Gli errori più comuni sono un segno più o uno zero dopo il prefisso internazionale (wa.me/+49… o wa.me/490170…), spazi non codificati e una e commerciale o un cancelletto nel testo, che troncano il resto del messaggio. Se manca del tutto il numero, WhatsApp apre soltanto la selezione dei contatti. Se non vuoi codificare nulla a mano, il nostro generatore di link WhatsApp gratuito crea il link insieme al codice QR.

Quali opzioni ci sono per inserire un pulsante WhatsApp?

Le strade sono tre: il link wa.me come codice HTML scritto da te, un plugin già pronto per il tuo sistema di gestione del sito oppure un widget di chat che collega WhatsApp ad altri canali e a un'inbox. Il codice è la soluzione più snella, il plugin funziona senza conoscenze di codice, il widget conviene non appena risponde più di una persona.

Per un singolo pulsante nella pagina dei contatti basta il codice HTML. Un plugin conviene se vuoi mostrare il pulsante su tutte le pagine senza conoscenze di codice. Un widget è la strada giusta quando le richieste di più canali devono arrivare a un unico team.

Che aspetto ha il codice HTML di un pulsante WhatsApp?

Il pulsante WhatsApp più semplice è un normale link HTML a wa.me con target="_blank", così la tua pagina resta aperta nel browser. Nell'esempio compare il numero del nostro supporto. Sostituiscilo con il tuo e adatta il testo:

<a href="https://wa.me/4982178988853?text=Ciao%2C%20ho%20una%20domanda%20sulla%20vostra%20offerta."
   target="_blank" rel="noopener">
  Scrivici su WhatsApp
</a>

Per un pulsante flottante, che sta in basso a destra su ogni pagina, serve un po' di CSS. Il codice va inserito una sola volta prima del tag </body> di chiusura del tuo template:

<a href="https://wa.me/4982178988853?text=Ciao%2C%20ho%20una%20domanda."
   class="wa-float" target="_blank" rel="noopener"
   aria-label="Avvia la chat su WhatsApp">
  <img src="/immagini/whatsapp-icon.svg" alt="" width="28" height="28">
</a>

<style>
  .wa-float {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25D366;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
  }
</style>

Contano tre dettagli. L'aria-label: un pulsante che mostra solo un logo ha bisogno di un nome per gli screen reader. La dimensione: 56 pixel si colpiscono bene sullo smartphone, sotto i 44 pixel diventa difficile. È anche la dimensione minima che Apple e le WCAG raccomandano per le aree touch. L'icona: scarica il logo WhatsApp dalle risorse ufficiali del brand di WhatsApp, non modificarlo, nemmeno nel colore, e salvalo sul tuo server. Un'icona caricata da un server esterno trasmette l'indirizzo IP dei tuoi visitatori a ogni visualizzazione di pagina.

Come inserisco il pulsante WhatsApp in WordPress, Shopify o Wix?

In tutti i sistemi più diffusi vale lo stesso principio: un singolo pulsante entra nella pagina come blocco HTML, un pulsante flottante una sola volta nel footer, prima di </body>. Cambiano solo i nomi dei menu.

WordPress

• Pulsante in una pagina: nell'editor a blocchi inserisci il blocco «HTML personalizzato» e copiaci dentro il codice del link.
• Pulsante flottante su tutte le pagine: il modo più sicuro è un plugin per il codice di header e footer come WPCode. Lì inserisci il codice nell'area del footer. Se in un tema classico modifichi direttamente footer.php, usa un child theme, altrimenti dopo il prossimo aggiornamento del tema il codice sparisce. I temi a blocchi non hanno footer.php, lì WPCode è la strada più semplice.
• Plugin WhatsApp già pronti: nella directory dei plugin ce ne sono molti. Prima di installarli controlla se il plugin carica file da server esterni, quando è stato aggiornato l'ultima volta e se funziona bene con il tuo banner dei cookie.

Shopify

• Pulsante flottante in tutto il negozio: in Negozio online > Temi clicca, sul tema attuale, il menu con i tre puntini e poi «Modifica codice». Apri il file layout/theme.liquid e inserisci il codice subito prima di </body>. Prima duplica il tema dallo stesso menu.
• Pulsante in una pagina o nella pagina prodotto: nei temi Online Store 2.0 come Dawn aggiungi nell'editor del tema una sezione «Liquid personalizzato» e inserisci il codice del link.

Wix e Webflow

• Wix: per un pulsante in una pagina usa nell'editor l'elemento per incorporare codice HTML. Wix mostra il codice incorporato in un riquadro a parte. Un pulsante flottante su tutto il sito va quindi inserito in «Impostazioni > Sviluppo e integrazioni > Codice personalizzato». Quest'area si usa solo con un sito pubblicato, un dominio collegato e quindi un piano Premium.
• Webflow: per tutto il sito inserisci il codice nelle impostazioni del sito («Site settings»), sotto «Custom code», nel campo «Footer code»; serve un piano del sito a pagamento. Per un singolo pulsante usa l'elemento «Code Embed».

Inserire un widget di chat con WhatsApp

Un widget come quello di SendSeven si inserisce allo stesso modo: inserisci una sola volta un frammento di script prima di </body>. In WordPress si fa tramite il footer o WPCode, in Shopify tramite theme.liquid, in Wix e Webflow tramite l'area del codice personalizzato, come descritto sopra. Tutte le impostazioni nel dettaglio sono descritte nella nostra guida al widget per il sito web.

Cosa succede se qualcuno clicca il pulsante dal computer?

Sul computer un link wa.me apre prima una pagina di WhatsApp, da cui si passa all'app desktop o a WhatsApp Web. Se il visitatore lì non ha effettuato l'accesso, deve prima collegare il suo smartphone, ed è proprio qui che molti abbandonano.

Sullo smartphone il percorso è breve: click, l'app si apre, il messaggio è pronto. Sul computer tutto dipende dal fatto che WhatsApp sia già configurato. Soprattutto nel B2B, dove molti visitatori fanno ricerche dalla postazione di lavoro, spesso non è così.

La soluzione è un codice QR: il visitatore lo inquadra con lo smartphone e arriva direttamente nella chat nella sua app. Nella demo dal vivo qui sopra lo vedi sul computer come quarta variante. Con puro HTML lo realizzi con una regola CSS che mostra il codice QR solo sugli schermi grandi. Il widget SendSeven gestisce il passaggio da solo: se qualcuno clicca su WhatsApp dal computer, il widget mostra un codice QR e offre WhatsApp Web come seconda strada. Sullo smartphone si apre direttamente l'app. La funzione è attiva nei nuovi widget, quelli esistenti mantengono il comportamento precedente. Vale anche per Telegram, Messenger, Instagram e SMS. Dove usare i codici QR al di fuori del sito lo mostra il nostro articolo sui sei luoghi per il codice QR di WhatsApp.

Il pulsante WhatsApp sul sito è conforme al GDPR?

Sì, un link wa.me ospitato da te si può integrare in modo conforme al GDPR: non trasmette dati a WhatsApp quando la tua pagina si carica, ci arrivi solo con il click del visitatore. Devi guardare più da vicino plugin e widget che caricano script, font o icone da server esterni, e la questione di dove venga poi trattata la chat.

• Prima del click: un pulsante ospitato da te, con un'icona tua, non carica nulla da terzi. I plugin che prelevano file da server esterni trasmettono così l'indirizzo IP e rientrano quindi nella tua verifica e, se necessario, nel banner dei cookie.
• Informativa sulla privacy: di solito contiene un riferimento a WhatsApp come canale di contatto e ai dati che ricevi in chat. La formulazione esatta è meglio chiarirla con il tuo responsabile della protezione dei dati.
• Dopo il click: se la chat passa dall'app WhatsApp Business su uno smartphone aziendale, l'app può accedere alla rubrica se le concedi il permesso, e quindi anche ai numeri di contatti che non hanno mai dato il consenso. Tramite la WhatsApp Business Platform e un fornitore con un accordo sul trattamento dei dati (DPA) la rubrica resta fuori, e il tuo team lavora in un'unica interfaccia con ruoli e permessi.

Questa sezione non sostituisce una consulenza legale. I dettagli su consenso, periodi di conservazione e scelta del fornitore li trovi nella guida a WhatsApp Business e GDPR.

Come misuro i click sul pulsante WhatsApp?

I click sul pulsante li misuri in Google Analytics 4 nel modo più semplice tramite Google Tag Manager: un trigger reagisce ai link il cui indirizzo contiene wa.me e invia un evento dedicato. Nell'UE questa misurazione richiede di regola il consenso nel banner dei cookie, per questo il tag si attiva solo dopo l'accettazione.

1. In Tag Manager attiva le variabili di click integrate, tra cui Click URL.
2. Crea un trigger di tipo «Click – Solo link» che si attiva quando Click URL contiene wa.me.
3. Collegalo a un tag evento GA4, per esempio con il nome whatsapp_click, e passa la pagina come parametro.
4. Collega il tag al consenso del tuo banner dei cookie, in modo che senza consenso non si attivi.

In Wix integri Tag Manager tramite le integrazioni di marketing, non tramite codice personalizzato. Ciò che accade dopo in chat, Google Analytics non lo vede. WhatsApp non trasmette né parametri UTM né la pagina di provenienza. Un semplice accorgimento fa chiarezza: dai a ogni pulsante un messaggio precompilato diverso, per esempio «Ho una domanda sui prezzi» nella pagina dei prezzi. Così vedi in chat da dove arriva la richiesta. Nel widget SendSeven le statistiche mostrano inoltre i click per canale, per esempio quante volte i visitatori hanno scelto WhatsApp, oltre a visualizzazioni e interazioni. Come seguire le conversazioni WhatsApp fino al fatturato quando entrano in gioco gli annunci lo mostra la guida a Click-to-WhatsApp Ads e wa.me.

Cosa succede dopo il click nella tua azienda?

Dopo il click il messaggio arriva al numero dietro il pulsante. Con l'app WhatsApp Business si tratta di uno smartphone. Non appena rispondono più colleghi o arrivano molte chat, conviene un'inbox di team in cui il tuo team lavora insieme. Qui si decide se il pulsante porta clienti o solo messaggi che nessuno legge in tempo.

Un'inbox per il tuo team

Nell'inbox di team di SendSeven le chat WhatsApp arrivano accanto a e-mail, SMS, Instagram, Messenger, live chat e Telegram. Il tuo team assegna le chat, vede chi sta rispondendo e scrive note interne che il cliente non vede. Come funziona nella quotidianità lo descrive il nostro articolo su WhatsApp Business con più utenti.

Rispondere la sera e nel fine settimana

Una parte delle richieste tramite il pulsante arriva dopo l'orario di lavoro. Un agente IA risponde subito alle domande ricorrenti su orari di apertura, consegna o prezzi attingendo dalla tua knowledge base e passa tutto il resto al tuo team. La mattina dopo il passaggio, con l'intero storico, è nell'inbox.

Un widget per WhatsApp e altri canali

Non tutti i visitatori vogliono usare WhatsApp. Nel widget SendSeven decidi quali canali compaiono: solo WhatsApp oppure WhatsApp accanto a live chat, e-mail, Telegram e altri canali. Se disattivi la live chat, un nuovo widget mostra i canali come elenco con i loghi. Con la selezione rapida, disponibile per i widget bubble, la bubble rotonda apre a ventaglio i canali al click. WhatsApp è così a due click di distanza. Per la bubble sono disponibili 15 icone, tra cui il logo WhatsApp.

Se ti servono solo singoli pulsanti, per esempio per un articolo del blog, una landing page o la firma e-mail, nell'area Widget sotto «Promotion» trovi link pronti e codici QR in PNG o SVG, oltre a snippet HTML per pulsanti dei canali, badge e firme e-mail. Il messaggio precompilato lo imposti direttamente lì. Così crei un pulsante WhatsApp tramite snippet, senza codificare tu il link. Per saperne di più sul canale, vai alla nostra pagina su WhatsApp per le aziende.

Quanto costa un pulsante WhatsApp?

Il pulsante in sé non costa nulla: un link wa.me è gratuito, che tu usi l'app WhatsApp Business o l'API. I costi nascono solo dalle risposte tramite la WhatsApp Business Platform e dal software con cui lavora il tuo team.

• I messaggi in entrata sono sempre gratuiti.
• Se il cliente scrive per primo, si apre una finestra di 24 ore per le tue risposte.
• Dal 1° ottobre 2026 Meta addebita anche i messaggi di servizio, cioè le tue risposte nella finestra di 24 ore. I primi 1.000 per numero di telefono e al mese restano gratuiti, dal 1.001° vale la tariffa Utility, in Germania 0,0456 € per messaggio consegnato. I dettagli sono nella nostra panoramica sui prezzi di WhatsApp 2026 e nel listino di Meta.
• Con l'app WhatsApp Business non ci sono costi per i messaggi. In cambio risponde solo chi usa lo smartphone e i dispositivi collegati.

In SendSeven i widget per il sito web sono inclusi dal piano Basic a 49 € al mese, gli agenti IA e il Flow Builder dal piano Professional a 79 € al mese. L'uso dell'IA viene fatturato in crediti IA. Tutti i prezzi sono al netto dell'IVA, il riepilogo è nella pagina dei prezzi. Puoi provare SendSeven gratis per 14 giorni, con 100 messaggi di prova e senza carta di credito.

Hai ancora una domanda sul tuo pulsante? Usa la demo dal vivo qui sopra: arriva direttamente al nostro supporto.

Domande frequenti