Avete creato un sito web e volete integrare un link per essere contattati tramite WhatsApp? Ormai sono tantissimi i siti web che integrano la funzionalità click to chat di WhatsApp per creare, in modo semplice ed immediato, un canale di comunicazione diretto coi propri clienti.
In questo articolo vi spiegherò come è possibile aggiungere, all’interno di una pagina HTML, un link per avviare una chat attraverso il noto programma di messaggistica. Perché il link funzioni, ovviamente, è necessario che sul dispositivo del nostro visitatore sia installato WhatsApp, in caso contrario il link non produrrà effetti.
Perchè inserire un click to chat?
Oggi WhatsApp è uno degli applicativi più utilizzati al mondo per comunicare, pertanto offrire agli utenti del nostro sito la possibilità di contattarci attraverso questo strumento può essere un modo efficace per creare un canale di collegamento diretto con chi visita alle nostre pagine web.
WhatsApp offre la massima immediatezza e la possibilità di instaurare una conversazione in tempo reale in qualsiasi momento e senza particolari vincoli: anche il gestore del sito web, infatti, non ha la necessità di trovarsi davanti al computer ma può interagire in mobilità attraverso l’app installata sul proprio smartphone, senza correre il rischio di perdere contatti importanti a causa di una risposta ritardata.
Oggi molti siti web integrano un canale di comunicazione attraverso WhatsApp: è facile, gratuito ed è uno strumento di massa utilizzato praticamente da tutti.
Nel proseguo di questo articolo vi spiegherò come inserire, all’interno della vostra pagina web, un semplice link per avviare una chat, coi vostri utenti, attraverso WhatsApp.
Come inserire un link per avviare una chat su WhatsApp
Per integrare la funzionalità click to chat è sufficiente inserire un comune link HTML verso un indirizzo web specifico fornito da WhatsApp in cui dovremo specificare il numero telefonico attraverso il quale desideriamo essere contattati. Il link in questione deve avere la seguente sintassi:
https://wa.me/TUO_NUMERO_DI_TELEFONO
Per fare un esempio:
<a href="https://wa.me/390123456789">
Contattami su WhatsApp
</a>Come avrete notato ho inserito il numero di telefono in formato internazionale senza anteporre il + o gli zero al prefisso internazionale (39 è il prefisso dei numeri telefonici italiani).
Facendo click sul link creato mediante il codice qui sopra, gli utenti del vostro sito web vedranno aprirsi WhatsApp con la finestra chat aperta col numero telefonico 0123456789.
Inserire un messaggio preimpostato
Volendo è anche possibile arricchire il link inserendo un messaggio predefinito che comparirà all’interno dell’area di testo in cui l’utente potrà inserire il suo messaggio. In pratica è un modo per semplificare ulteriormente le richieste di contatto.
Per fare un esempio si supponga di utilizzare WhatsApp per le prenotazioni di un ristorante. Per velocizzare le richieste da parte degli utenti possiamo impostare nel link un messaggio predefinito del tipo "Sarei interessato ad un tavolo per stasera". Vediamo come fare:
<a href="https://wa.me/390123456789?text=Sarei%20interessato%20ad%20un%20avolo%20per%20stasera">
Contattami su WhatsApp
</a>Si noti che per impostare un messaggio predefinito abbiamo aggiunto, alla fine della nostra URL, il parametro text cui abbiamo assegnato una valore dato dal messaggio codificato (per ottenere la giusta stringa è sufficiente utilizzare dei tool come questo per l’URL encoding). Quindi il nostro testo:
Sarei interessato ad un tavolo per stasera
diventerà:
Sarei%20interessato%20ad%20un%20avolo%20per%20stasera
E’ appena il caso di ricordare, infine, che l’utente avrà sempre la possibilità di cambiare e/o arricchire il testo del messaggio prima di inviarcelo.
Inserire un link "Condividi su WhatsApp"
Utilizzando gli strumenti descritti in questo articolo è anche possibile creare un link o un pulsante per consentire agli utenti di condividere un contenuto su WhatsApp. La tecnica è semplicissima. Sarà sufficiente, infatti, utilizzare il link wa.me senza indicare alcun numero di telefono ma solo un messaggio preimpostato del tipo:
Titolo del contenuto - Link
Ad esempio:
<a href="https://wa.me/?text=Creare%20un%20link%20HTML%20per%20chattare%20con%20WhatsApp%20-%20https%3A%2F%2Fwww.mrwebmaster.it%2Fhtml%2Flink-click-to-chat-whatsapp_12648.html">
Condividi questo articolo su WhatsApp
</a>In questo modo saranno gli utenti del sito ad inserire il numero di telefono del contatto col quale vorranno effettuare la condivisione.
Creare pulsanti di condivisione con WhatsApp Sharing Button Generator
WhatsApp Sharing Button Generator (raggiungibile cliccando qui) è un semplice strumento Javasctript che consente di inserire nelle pagine Web un pulsante di condivisione su WhatsApp in modo semplice e dinamico; si tratta sostanzialmente di uno strumento basato sull’embedding: l’utilizzatore non dovrà fare altro che digitare i parametri richiesti nell’apposito modulo e il codice HTML verrà generato automaticamente.
A seconda delle esigenze è possibile selezionare tra tre diverse dimensioni per il proprio pulsante (small, medium e large), di default verrà messo a disposizione il pulsante di condivisione più piccolo. Una volta effettuata questa scelta il form richiederà di definire un testo, ad esempio "Condividi su WhatsApp" e un messaggio per la condivisione (ad esempio "Dai uno sguardo a questo post:").
Fatto questo, l’ultimo parametro da indicare sarà quello relativo all’URL che presenta il contenuto da mandare in condivisione; relativamente a questo aspetto si può decidere di utilizzare un indirizzo Web specifico o lasciare che sia il codice ad intercettare quello della pagina corrente. Quest’ultima impostazione potrebbe rivelarsi particolarmente utile nel caso in cui si vogliano rendere condivisibili le pagine di un sito Internet aggiornato frequentemente come per esempio un blog.
Il codice riportato di seguito è un esempio di embedding basato sulla condivisione della pagina corrente:
<a href="whatsapp://send" data-text="Dai uno sguardo a questo post:" data-href="" class="wa_btn wa_btn_s" style="display:none">Condividi su WhatsApp</a>Una volta generato il pulsante se ne potrà caricare il sorgente direttamente sul server, quindi una volta scaricato l’apposito archivio compresso si dovrà uploadare il file JavaScript denominato "whatsapp-button.js" presente nella cartella "dist/". Diversamente l’inclusione potrà avvenire direttamente su una pagina Web:
<script type="text/javascript">if(typeof wabtn4fg==="undefined"){wabtn4fg=1;h=document.head||document.getElementsByTagName("head")[0],s=document.createElement("script");s.type="text/javascript";s.src="url/to/your/button/whatsapp-button.js";h.appendChild(s);}</script>Compatibili con iOS e Android, i pulsanti prodotti da WhatsApp Sharing Button Generator saranno funzionanti soltanto sui dispositivi che supportano tale funzionalità.
La pagina su Github del progetto è raggiungibile a questo link.
