Metti un bottone WhatsApp sul tuo sito in 60 secondi (senza plugin)

Pubblicato il 11/11/2025 | Categoria: Produttività | Autore: Pacesoft
Link WhatsApp: messaggio precompilato in 60 secondi (guida completa) — Pacesoft

Obiettivo: creare un link WhatsApp con messaggio precompilato e un bottone pronto da inserire sul sito (o QR da stampare). Risolve: meno attrito, più risposte, zero plugin.

Indice

Tip: se vuoi evitare errori di codifica testo/spazi, usa il WhatsApp Link Builder Pacesoft (tutto in locale).

Cos’è e come funziona

Un link “click-to-chat” apre WhatsApp (mobile o web) con il tuo numero e un messaggio già compilato. L’utente deve solo inviare. Perfetto per ecommerce, preventivi, appuntamenti, assistenza.

Numero corretto (formato E.164) & link base

  • Usa il formato internazionale senza “+” e senza spazi/es. (Italia = 39).
  • Esempio: +39 333 1234567 → 393331234567
https://wa.me/<NUMERO_E164>?text=<TESTO_URL_ENCODED>

Costruzione del link (wa.me e API ufficiale)

Due varianti equivalenti, la prima è la più sintetica:

# Variante breve (consigliata)
https://wa.me/393331234567?text=Ciao%21%20Vorrei%20info%20sul%20prodotto%20X

# Variante API ufficiale
https://api.whatsapp.com/send?phone=393331234567&text=Ciao%21%20Vorrei%20info%20sul%20prodotto%20X

Ricorda: il text= dev’essere URL-encoded (spazi → %20, “!” → %21, “&” → %26, ecc.).

Esempi pronti (vendite, supporto, prenotazioni)

# Vendite / preventivo
https://wa.me/393331234567?text=Ciao%21%20Vorrei%20un%20preventivo%20per%20il%20prodotto%20X

# Assistenza
https://wa.me/393331234567?text=Ciao%21%20Ho%20bisogno%20di%20supporto%20sull%27ordine%20%231234

# Prenotazioni
https://wa.me/393331234567?text=Ciao%21%20Posso%20prenotare%20per%20domani%20sera%20alle%2020%3F

Bottone HTML (minimal e Bootstrap)

Minimal

<a href="https://wa.me/393331234567?text=Ciao%21%20Vorrei%20info%20su%20X"
   target="_blank" rel="nofollow noopener" class="btn-wa">Scrivici su WhatsApp</a>

<style>
.btn-wa{
  display:inline-block;padding:.75rem 1rem;border-radius:8px;
  font-weight:600;text-decoration:none;border:1px solid #e5e7eb
}
.btn-wa:hover{filter:brightness(0.97)}
</style>

Bootstrap

<a href="https://wa.me/393331234567?text=Ciao%21%20Vorrei%20info%20su%20X"
   class="btn btn-success" target="_blank" rel="nofollow noopener">Scrivici su WhatsApp</a>

Messaggio dinamico con titolo pagina & URL

Vuoi sapere da quale pagina/prodotto ti scrivono? Inserisci titolo e URL correnti nel messaggio.

<!-- Bottone "vuoto" con data-attr -->
<a data-wa class="btn btn-success" target="_blank" rel="nofollow noopener">Scrivici su WhatsApp</a>

<script>
// Numero in E.164 (senza +)
const numero = "393331234567";

// Messaggio con titolo + URL + UTM se presenti
const base = "Ciao! Vorrei info su:";
const msg  = encodeURIComponent(`${base} ${document.title} - ${location.href}`);

// Costruzione link finale
const a = document.querySelector('[data-wa]');
a.href = `https://wa.me/${numero}?text=${msg}`;
</script>

Pro tip: aggiungi parametri UTM alla pagina (es. ?utm_source=blog&utm_medium=cta&utm_campaign=whatsapp) per tracciarli dentro il messaggio.

Trasformarlo in QR per stampe/vetrine

Per volantini, vetrine, reception: chi scansiona apre la chat già pronta.

1) Crea il link WhatsApp perfetto
2) Apri: Generatore QrCode by Pacesoft
3) Incolla il link → scarica PNG/SVG → stampa (carta opaca consigliata)

Debug e test rapidi

  • Verifica che il numero sia nel formato corretto (senza +, niente spazi o “00”).
  • Controlla che il testo sia URL-encoded (prova con emoji/accénti/&).
  • Testa da mobile: Android/iOS aprono l’app; da desktop si apre WhatsApp Web.
  • Se non funziona, prova la variante API (sezione sopra).
← Torna all'elenco