Come integrare WhatsApp in un sito web

Suggerimento: se lo scopo è quello di ricevere i messaggi di contatto sul cellulare, vi ricordo che molti smartphone permettono di installare una eSIM in aggiunta alla SIM fisica. Questo ci permetterà di avere un secondo numero da dedicare ai contatti di lavoro o in questo caso di ricevere i messaggi dal sito. Se già utilizziamo WhatsApp abbinato al nostro numero principale possiamo installare anche WhatsApp Business ed abbinarlo alla eSIM, con tutti i vantaggi del caso.

Il primo passo è di andare alla pagina ufficiale dove vengono elencate le linee guida per l'utilizzo del brand WhatsApp e le risposte (FAQ) alle domande più comuni. Da qui è possibile anche scaricare il pacchetto dei loghi ufficiali.
Questa la pagina di riferimento: https://about.meta.com/it/brand/resources/whatsapp/whatsapp-brand

Esempi di alcune soluzioni grafiche per visualizzare il link "click-to-chat":

• link collegato al logo WhatsApp in modo che cliccando sul logo parta la chat;
• logo e il link collegato ad un bottone con la scritta es:"Chatta con noi";
• QR code con logo WhatsApp all'interno.

• le immagini sono demo, non hanno link collegati;
• per generare il QR code ed incorporare la URL puoi usare uno dei tanti tool disponibili online come ad esempio: https://www.qrcode-monkey.com/

Da mobile si aprirà la App, da browser si verrà reindirizzati ad una pagina dedicata.
Il formato del numero è quello con prefisso internazionale senza gli zeri o il + (per l'Italia sarà 39, non 0039 o +39) seguito dal numero di cellulare.
In caso si volesse aggiungere un testo precompilato al messaggio, al posto dello spazio tra le parole inserire %20 (il codice esadecimale per lo spazio vuoto).
Nota: gli spazi non sono consentiti nelle URL secondo lo standard del protocollo HTTP.

Le URL dei link avranno queste sintassi, la prima collega solo il numero, la seconda aggiunge un testo precompilato che verrà visualizzato nella chat.
39 = pref. internazionale italiano PPP = prefisso operatore NNNNNNN = numero di cellulare.

Alla pagina del Centro assistenza di WhatsApp sono presenti ulteriori esempi e riferimenti: https://faq.whatsapp.com/5913398998672934/?helpref=uf_share
Da questa pagina potrai scaricare anche le grafiche per i pulsanti.

Di seguito due esempi di codice HTML simili a quelli visualizzati nella pagina del Centro Assistenza, il primo collega un'immagine SVG, il secondo PNG.
Potete personalizzarli come preferite, aggiungendo altri attributi come target="_blank" rel="noopener", width, height, ecc.

WhatsApp Business ci permette di creare un link diretto direttamente dalla App pronto per essere copiato ed incollato nel sito web.

• con iOS vai a Impostazioni --> Strumenti business --> Link diretto
• con Android vai a Strumenti business --> Link diretto

Un esempio pratico di implementazione di link diretto click-to-chat lo trovate alla pagina Contatti di questo sito.

Maggiori informazioni alla pagina del Centro assistenza: https://faq.whatsapp.com/502291734918768/?helpref=uf_share

La normativa GDPR ci impone di dichiarare quali dati raccogliamo, con quali modalità, con chi vengono condivisi, come vengono conservati, per quanto tempo ecc.
Non sono un legale ma a mio parere l'inserimento della modalità di contatto tramite WhatsApp è meglio sia trattato nella nostra informativa Privacy.