Link HTML di WhatsApp: tutte le varianti utili con esempi pratici
Se vuoi inserire un pulsante o un link diretto a WhatsApp nel tuo sito, hai diverse soluzioni semplici da usare. Le più comuni servono per aprire una chat con un numero specifico, precompilare un messaggio o creare un bottone cliccabile in HTML. In questa guida trovi le varianti principali già pronte da copiare.
1. Link base con wa.me
Questa è la forma più pulita e moderna:
<a href="https://wa.me/393331234567" target="_blank" rel="noopener">Scrivici su WhatsApp</a>Ricorda di inserire il numero in formato internazionale, senza il simbolo +, senza spazi e senza trattini.
2. Link con messaggio precompilato
Se vuoi aprire WhatsApp con un testo già scritto:
<a href="https://wa.me/393331234567?text=Ciao%2C%20vorrei%20avere%20pi%C3%B9%20informazioni" target="_blank" rel="noopener">Contattaci su WhatsApp</a>Il testo deve essere codificato correttamente nell’URL.
3. Variante con api.whatsapp.com
È una forma ancora molto usata e compatibile in molti contesti:
<a href="https://api.whatsapp.com/send?phone=393331234567" target="_blank" rel="noopener">Apri la chat WhatsApp</a>4. api.whatsapp.com con testo precompilato
<a href="https://api.whatsapp.com/send?phone=393331234567&text=Ciao%2C%20sono%20interessato%20al%20prodotto" target="_blank" rel="noopener">Invia un messaggio</a>5. Bottone HTML semplice
<a class="btn-whatsapp" href="https://wa.me/393331234567?text=Ciao%2C%20vorrei%20un%20preventivo" target="_blank" rel="noopener">WhatsApp</a>6. Bottone con immagine
<a href="https://wa.me/393331234567" target="_blank" rel="noopener"><img src="/images/whatsapp.png" alt="Contattaci su WhatsApp"></a>7. Bottone fisso laterale
<a href="https://wa.me/393331234567?text=Ciao%2C%20ho%20bisogno%20di%20aiuto" class="whatsapp-float" target="_blank" rel="noopener">Chat WhatsApp</a>.whatsapp-float{position:fixed;right:20px;bottom:20px;z-index:9999;padding:12px 18px;background:#25D366;color:#fff;text-decoration:none;border-radius:30px;font-weight:bold;}8. Link per mobile e desktop
In genere il link wa.me è la soluzione più pratica perché tenta di aprire WhatsApp nel contesto corretto del dispositivo. Se l’utente è su smartphone, verrà favorita l’app; su desktop, WhatsApp Web o il client disponibile.
9. Esempio con testo dinamico PHP
<?php
$numero = '393331234567';
$messaggio = rawurlencode('Ciao, vorrei informazioni sul servizio');
?>
<a href="https://wa.me/<?php echo $numero; ?>?text=<?php echo $messaggio; ?>" target="_blank" rel="noopener">Contattaci su WhatsApp</a>10. Errori da evitare
- Non inserire il simbolo + nel numero dentro l’URL.
- Non usare spazi o trattini nel numero.
- Non dimenticare
target="_blank"erel="noopener"se apri in nuova scheda. - Codifica sempre il testo del parametro
text.
Conclusione
Per la maggior parte dei siti, la soluzione migliore è usare wa.me con numero internazionale e messaggio precompilato. È semplice, pulita e molto efficace per aumentare i contatti diretti da mobile e desktop.