Codice HTML per il widget WhatsApp da copiare e incollare, dal semplice link wa.me al pulsante fluttuante completo, più quello che il codice grezzo da solo ti lascia da costruire.
Se hai cercato l’HTML vero e proprio, eccolo qui, senza bisogno di registrazione:
<a href="https://wa.me/15551234567">Chat with us on WhatsApp</a>Sostituisci 15551234567 con il tuo numero in formato internazionale completo: prima il prefisso internazionale, senza segno più, senza spazi, senza zero iniziale. Quel link da solo basta ad aprire una chat WhatsApp con la tua attività. È anche l’intera risposta onesta a “dammi il codice HTML del widget”, perché tutto ciò che viene dopo sei tu (o un generatore) che costruisci le parti che quella singola riga non copre.
Un visitatore arriva sul link senza nulla di digitato. Aggiungi il parametro text per avere un messaggio già pronto nella casella quando la chat si apre:
<a href="https://wa.me/15551234567?text=Hi%2C%20I%27d%20like%20to%20ask%20about%20pricing">
Chat with us on WhatsApp
</a>Il messaggio deve essere codificato in URL: %20 è uno spazio, %2C è una virgola, %27 è un apostrofo. Scrivi prima la frase che vuoi, poi passala attraverso un qualsiasi codificatore URL prima di incollarla nel valore text, perché uno spazio o un segno di punteggiatura grezzo in mezzo alla query string interromperà il link su alcuni browser.
Un link testuale non è quello che la maggior parte delle persone intende per “widget WhatsApp”. Il pulsante nell’angolo è CSS sopra lo stesso link:
<a
href="https://wa.me/15551234567?text=Hi%2C%20I%27d%20like%20to%20ask%20about%20pricing"
target="_blank"
rel="noopener"
aria-label="Chat on WhatsApp"
style="
position: fixed;
bottom: 24px;
right: 24px;
z-index: 999;
width: 60px;
height: 60px;
border-radius: 50%;
background: #25D366;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(0,0,0,.2);
"
>
<svg width="30" height="30" viewBox="0 0 24 24" fill="white" aria-hidden="true">
<path d="M12.04 2c-5.46 0-9.91 4.45-9.91 9.91 0 1.75.46 3.45 1.32 4.95L2.05 22l5.25-1.38a9.87 9.87 0 0 0 4.74 1.21h.01c5.46 0 9.9-4.45 9.9-9.91 0-2.65-1.03-5.14-2.9-7.01A9.82 9.82 0 0 0 12.04 2Z"/>
</svg>
</a>Questa versione evita un file icona separato incorporando il glifo del telefono/chat come SVG, quindi è genuinamente un blocco autonomo: incollalo prima di </body> e non c’è nient’altro da caricare. Lascia comunque quattro cose da gestire a mano, ed è proprio lì che il vero generatore si guadagna il suo posto.
Mobile e desktop non si comportano allo stesso modo, e niente in questo snippet lo controlla. Clicca su un link wa.me su un telefono con WhatsApp installato e apre direttamente l’app. Senza l’app installata, invece manda il visitatore all’app store, non c’è nessun messaggio di riserva o metodo di contatto alternativo che puoi configurare dal link stesso. Su un browser desktop, apre web.whatsapp.com in una nuova scheda, che funziona solo se il visitatore ha già effettuato l’accesso a WhatsApp Web in quel browser, altrimenti si ritrova davanti a un codice QR senza alcun contesto sul perché. Tutti e tre gli esiti derivano dallo stesso href. Non puoi rilevare quale sta per accadere né intercettarlo con semplice HTML.
Il messaggio precompilato vive nell’URL, non in un campo del modulo. Se lo cambi, torni a codificare a mano una nuova stringa, a trovare ogni pagina su cui il link è incollato, e a sostituirlo anche lì se non hai un template condiviso.
Non c’è un file icona da sostituire senza modificare il percorso SVG a mano, e non c’è modo di riposizionare, ridimensionare o ricolorare il pulsante senza toccare direttamente il blocco di stile inline, riga per riga.
Niente qui cattura un lead prima che la chat si apra. Il link (o il pulsante) va direttamente a WhatsApp nel momento in cui viene cliccato. Se vuoi un nome e un motivo di contatto prima che la conversazione inizi, si tratta di un modulo separato che dovresti costruire, collegare, e in qualche modo passare tu stesso nel parametro text.
Il Generatore di Widget Chat WhatsApp è uno strumento gratuito che trasforma la stessa manciata di impostazioni in un unico tag script al posto di un blocco di CSS che devi mantenere. Imposta il tuo numero, scegli un colore, imposta la posizione e gli offset, scrivi un saluto, e facoltativamente attiva un modulo pre-chat (una breve domanda, con email o telefono contrassegnati come obbligatori o meno) che raccoglie il contesto prima che la finestra WhatsApp si apra del tutto. Lo strumento produce questo:
<script src="https://cdn.thechatquotient.com/widget/v1/widget.js"
data-widget-id="wgt_xxxxxxxx"
data-whatsapp-number="15551234567"
data-color="#128C7E"
data-position-vertical="bottom"
data-position-horizontal="left"
data-offset-vertical="24"
data-offset-horizontal="24"
data-z-index="999"
data-greeting="Hi! Ask us anything."
data-prechat="true"
data-prechat-title="Before we chat"
data-prechat-description="Tell us what you need help with."
async
defer
></script>Ogni impostazione è un attributo data- etichettato su una riga, quindi cambiare il saluto o spostare il pulsante nell’angolo opposto significa ricopiare il tag dal modulo, non frugare in un file CSS. L’icona, la logica di posizionamento, la gestione dei deep-link per mobile rispetto a desktop, e il modulo pre-chat vivono tutti nello script hostato a cui il tag punta, il che è ciò che l’HTML grezzo sopra non può fare da solo senza che tu lo scriva.
Se stai incollando uno snippet generato e vuoi sapere cosa controlla ogni riga prima di modificarla a mano, ecco cosa accetta il tag:
| Attributo | Controlla |
|---|---|
data-widget-id | ID univoco rilasciato dal generatore, non modificarlo |
data-whatsapp-number | Numero di destinazione, formato internazionale, senza + |
data-color | Sfondo del pulsante, qualsiasi valore hex |
data-position-vertical | top o bottom |
data-position-horizontal | left o right |
data-offset-vertical / data-offset-horizontal | Distanza in pixel da quel bordo |
data-z-index | Ordine di sovrapposizione, aumentalo se un altro elemento fisso copre il pulsante |
data-greeting | Testo del messaggio precompilato, senza bisogno di codifica URL manuale |
data-prechat | true per mostrare un breve modulo prima che la chat si apra |
data-prechat-title / data-prechat-description / data-prechat-question | Testo mostrato nel modulo pre-chat |
Sia l’HTML grezzo che il tag script generato vanno nello stesso posto: da qualche parte che viene visualizzato su ogni pagina, idealmente subito prima di </body>.
theme.liquid, subito sopra </body>, tramite Online Store → Themes → Edit Code.Il link HTML grezzo richiede un account WhatsApp Business?
No. Un numero WhatsApp personale funziona con un link wa.me allo stesso modo di un numero Business. Le funzionalità specifiche di Business, come un catalogo o le risposte automatiche, non fanno parte del link stesso.
Perché il mio pulsante mostra un’immagine rotta invece di un’icona?
Succede quando l’HTML fa riferimento a un file icona esterno (<img src="/whatsapp-icon.svg">) che non è stato caricato in quel percorso. La versione SVG inline sopra evita completamente questo problema perché l’icona è scritta direttamente nell’HTML.
Posso mettere l’HTML del widget dentro un tag <head> invece?
Tecnicamente il tag anchor stesso deve essere visualizzato nel <body>, poiché il contenuto di <head> non viene mostrato. Gli script possono caricarsi da <head>, ma posizionare lo snippet subito prima di </body> evita il render-blocking ed è lo schema che la maggior parte dei costruttori di siti si aspetta.
C’è un limite a quanti widget WhatsApp posso aggiungere a una pagina? Niente ti impedisce di incollarne due, ma due pulsanti fluttuanti impilati nello stesso angolo di solito sembrano un bug piuttosto che una funzionalità. Se hai bisogno di due numeri (vendite e supporto, ad esempio), assegna a ciascuno una posizione distinta invece di sovrapporli.
Funziona allo stesso modo su Squarespace? Il pannello Code Injection di Squarespace (sotto Settings → Advanced) accetta entrambe le versioni allo stesso modo del blocco HTML personalizzato di WordPress, l’iniezione nel footer la applica a livello di sito in un unico punto.
L’HTML letterale per un widget WhatsApp è un unico tag <a href="https://wa.me/...">, e ora ce l’hai. Trasformarlo nel pulsante fluttuante, brandizzato e che cattura lead che la gente di solito immagina significa scrivere e mantenere tu stesso il CSS e i casi limite dei deep-link, oppure lasciare che il Generatore di Widget Chat WhatsApp produca il tag script finito in un solo incolla, gratis, senza bisogno di account.
Aggiungi l'estensione Chrome e trasforma il modo in cui gestisci le conversazioni WhatsApp per il tuo business.