Come aggiungere un widget chat WhatsApp gratuito a qualsiasi sito web in pochi minuti: l'approccio del link wa.me puro, e un generatore che produce uno snippet personalizzabile senza codice.
Esistono due modi onesti per aggiungere un widget chat WhatsApp a un sito web senza pagare per uno: incollare un link wa.me semplice e stilizzarlo tu stesso, oppure utilizzare un generatore che ti fornisce uno snippet finito e personalizzabile. Entrambi sono genuinamente gratuiti e richiedono solo pochi minuti. Ti lasciano semplicemente in posti molto diversi tra sei mesi.
Questo articolo illustra entrambi, iniziando dal link grezzo in modo che tu sappia esattamente cosa stai escludendo quando lo salti.
La versione assoluta minima è una sola riga di HTML:
<a href="https://wa.me/15551234567?text=Hi%2C%20I%20have%20a%20question">Chat with us</a>Sostituisci 15551234567 con il tuo numero in formato internazionale completo, senza il segno più, senza spazi, senza zero iniziale. Il parametro text è un messaggio precompilato, codificato in URL, quindi %20 è uno spazio e %2C è una virgola. Cliccandolo WhatsApp si apre con quel messaggio già digitato nella casella, in attesa che il visitatore prema invio.
wa.me è il link breve ufficiale di Meta per questo, quindi il comportamento dall’altra parte è coerente: su un telefono, apre direttamente l’app WhatsApp se è installata, oppure invia il visitatore all’app store se non lo è. Su un browser desktop senza app installata, apre invece web.whatsapp.com in una nuova scheda. Non devi costruire nessuno di questi rilevamenti tu stesso, il che è l’unica parte di questo approccio che è veramente risolta per te.
Tutto il resto non lo è. Quel singolo link è solo testo blu sottolineato ovunque lo metti. Per trasformarlo nel pulsante fluttuante nell’angolo in basso che la gente intende davvero quando parla di “widget chat WhatsApp”, stai scrivendo il CSS tu stesso:
<a href="https://wa.me/15551234567?text=Hi%2C%20I%20have%20a%20question"
target="_blank" rel="noopener"
style="position:fixed; bottom:20px; right:20px; z-index:5000;
width:56px; height:56px; border-radius:50%;
background:#25D366; display:flex; align-items:center;
justify-content:center; box-shadow:0 2px 8px rgba(0,0,0,.25);">
<img src="/whatsapp-icon.svg" alt="Chat on WhatsApp" width="28" height="28">
</a>Questo funziona, ma ora hai bisogno anche di un file icona, di un z-index abbastanza alto da stare sopra il tuo banner dei cookie e di eventuali modal senza coprire la tua stessa navigazione su mobile, e di un piano per quello che succede quando qualcuno vuole che il testo del messaggio venga cambiato il mese prossimo, il che significa aprire di nuovo questo stesso blocco di markup, ovunque sia incollato, su ogni pagina o template che lo contiene.
Il Generatore di Widget Chat WhatsApp fa lo stesso lavoro del link qui sopra, più la stilizzazione, il posizionamento e l’icona, e ti restituisce un tag script al posto di un blocco di CSS personalizzato che sei responsabile di mantenere. È gratuito, non richiede un account, e non tocca l’API WhatsApp Business, quindi non c’è nessun passaggio di verifica prima di poterlo usare.
Ecco la procedura vera e propria:
#25D366) è l’impostazione predefinita, ma il campo accetta qualsiasi valore hex se preferisci che corrisponda al colore del brand del tuo sito.text nel link grezzo, ma modificabile dal modulo al posto di una stringa codificata in URL.Mentre riempi il modulo, un’anteprima dal vivo del pulsante viene visualizzata direttamente sulla pagina, e il pannello del codice accanto si aggiorna in tempo reale con lo snippet finito:
<script src="https://cdn.thechatquotient.com/widget/v1/widget.js"
data-widget-id="wgt_xxxxxxxx"
data-whatsapp-number="15551234567"
data-color="#25D366"
data-position-vertical="bottom"
data-position-horizontal="right"
data-offset-vertical="20"
data-offset-horizontal="20"
data-z-index="5000"
data-greeting="Hi! How can we help?"
async
defer
></script>Fai clic su Copia, incolla quel singolo tag in qualsiasi punto prima del tag di chiusura </body> sul tuo sito, e il widget è live. Non c’è niente altro da caricare, nessun file icona, nessun foglio di stile separato. Ogni impostazione dal modulo (colore, posizione, offset, saluto, popup) è codificata come attributo data- su quel singolo tag, quindi l’intera cosa si sposta come un’unica incollatura.
I due output si assomigliano in superficie, un pulsante nell’angolo che apre WhatsApp, ma invecchiano diversamente.
Con la versione costruita a mano, ogni impostazione è un valore sepolto dentro stili inline o un file CSS separato. Cambiare il messaggio di saluto significa trovare e modificare il parametro text in una stringa codificata in URL. Spostare il pulsante perché un nuovo banner di cookie lo ricopre ora significa rieditare il CSS su ogni pagina o template dove l’hai incollato, e se ne hai dimenticato una, quella pagina tranquillamente ha un widget con un aspetto rotto finché qualcuno non se ne accorge. Niente di tutto questo fallisce clamorosamente, semplicemente si desincronizza pagina per pagina.
Lo snippet generato mantiene ogni una di quelle impostazioni come attributo etichettato su una riga che puoi ri-copiare dal modulo in pochi secondi, quindi trova e sostituisci su tutto il tuo sito se non stai usando un’inclusione di intestazione o footer condivisa. E poiché la logica effettiva del pulsante vive nel file di script hostato a cui il tag punta, non nel codice che hai incollato, le correzioni di bug e i miglioramenti del comportamento del widget stesso vengono distribuiti senza toccare il tuo sito di nuovo.
La meccanica è la stessa ovunque: fai in modo che lo snippet sia in un luogo visualizzato su ogni pagina, idealmente subito prima di </body>.
theme.liquid, subito sopra il tag di chiusura </body>, tramite Online Store → Themes → Edit Code.Ognuno di questi ha i suoi particolari che meritano uno sguardo più attento da solo, affronteremo WordPress con maggior dettaglio separatamente, ma il passaggio di incollatura stesso è identico ovunque: un tag di script, un posto, applicato a ogni pagina in una volta.
Carica il sito in una finestra in incognito in modo che gli stili cache non nascondano un problema reale, e controlla il pulsante sia su desktop che su un vero telefono, non solo una finestra del browser ridimensionata. Cliccalo una volta da ogni e conferma che apra WhatsApp (l’app su mobile, web.whatsapp.com su desktop) con il tuo numero e il messaggio di saluto già compilati. Quindi scorri la pagina con qualsiasi banner di cookie o elementi appiccicaticci visibili, il fallimento più comune a questo punto è un conflitto z-index, in cui il widget viene visualizzato dietro un altro elemento a posizione fissa anziché sopra di esso.
Questo è davvero gratuito, oppure c’è una trappola? Il generatore stesso è gratuito senza account richiesto. Lo script del widget a cui punta è hostato e servito senza costi. Se in seguito installi l’estensione Chrome The Chat Quotient per gestire le conversazioni che arrivano tramite il widget, quella ha il suo piano gratuito, ma è un passaggio separato e opzionale, non un requisito per usare il widget.
Un widget WhatsApp è la stessa cosa di WhatsApp Web?
No, e questo è un malinteso comune. WhatsApp Web (web.whatsapp.com) è l’interfaccia che usi per leggere e inviare messaggi WhatsApp da un browser. Un elemento web di widget chat WhatsApp è il piccolo pulsante che aggiungi al tuo sito che, quando cliccato, apre una chat, nell’app WhatsApp su mobile o in WhatsApp Web su un desktop che non ha l’app desktop installata. Il widget è qualcosa che incorpori; WhatsApp Web è dove la conversazione risultante si apre.
Il widget funziona se un visitatore non ha WhatsApp installato? Su mobile, cliccarlo senza l’app installata invia il visitatore al suo app store per installare WhatsApp prima. Non c’è modo di aggirare questo passaggio, poiché il link sa solo come passare a WhatsApp stesso, non come sostituire un altro canale di messaggistica.
Posso avere più di un numero WhatsApp, come vendite e supporto, sullo stesso widget? No su un pulsante. Il widget è costruito intorno a un singolo numero WhatsApp per istanza. Se hai bisogno di due punti di ingresso, aggiungeresti due widget con posizioni e saluti diversi, sebbene a quel punto una pagina di contatti dedicata con entrambi elencati separatamente è di solito più chiara per i visitatori che due pulsanti fluttuanti impilati nello stesso angolo.
Devo sapere come codificare per usare il generatore? No. Ogni impostazione è un campo del modulo, e l’unica cosa che incolla è il singolo tag di script che produce, lo stesso passaggio di copia-incolla indipendentemente da quale piattaforma il tuo sito esegue.
Un link wa.me è davvero tutto quello che ti serve se sei a tuo agio nello scrivere e mantenere il tuo CSS e non ti dispiace rivisitare quel codice ogni volta che qualcosa deve cambiare. Il Generatore di Widget Chat WhatsApp produce lo stesso risultato, un pulsante fluttuante che apre una chat WhatsApp precompilata, senza il CSS, il file icona, o la manutenzione che viene con costruirlo a mano, ed è ancora gratuito.
Aggiungi l'estensione Chrome e trasforma il modo in cui gestisci le conversazioni WhatsApp per il tuo business.