Come aggiungere pulsante WhatsApp al sito web

In questa guida vedremo come aggiungere un pulsante WhatsApp al sito web senza utilizzare un plugin o risorse esterne.

In particolare potrai aggiungere un pulsante di condivisione diretta dei tuoi articoli su WhatsApp oppure farti contattare direttamente al tuo numero di telefono.

Il procedimento è molto semplice e inizia per entrambi i casi creando un pulsante che l’utente possa utilizzare, in questo modo:

creazione del pulsante

 <style media="screen">
     .ekw_content_WhatsApp {
       position: fixed;
       z-index: 999;
       bottom: 50px;
       right: 50px;
     }
   </style>
   <div class="ekw_content_WhatsApp">
     <a href="#">
       <img width="50px" src="link-mia-immagine.png">
     </a>
   </div>

Questo codice crea un’immagine cliccabile che non esegue ancora nessuna azione.

In questo caso abbiamo inserito un’immagine in formato png come risorsa esterna ma puoi sempre utilizzare il formato SVG per snellire le richieste del tuo sito e velocizzarlo.

Ora vediamo come sfruttare il pulsante appena creato per condividere gli articoli del tuo blog.

Il codice è lo stesso di prima ma dobbiamo aggiungere l’url di WhatsApp con alcuni parametri in questo modo:

//link: WhatsApp://send?text=https://www.articolo-da-condividere.it/

   <a href="WhatsApp://send?text=https://www.articolo-da-condividere.it/">
       <img width="50px" src="link-mia-immagine.png">
     </a>

Questo link invia apre l’applicazione di WhatsApp dal tuo telefono, consentendoti di scegliere il contatto a cui inviare il link.

I parametri da inserire sono:

• send?: per inviare un nuovo messaggio
• text=link: che contiene l’url da inviare come testo.

Se il tuo sito dispone di meta proprietà per la condivisione di immagini allora esse appariranno nel testo del messaggio come descrizione del link che stai mandando.

Se i tuoi utenti stanno visualizzando il tuo sito da PC allora dovrai cambiare il link di WhatsApp con questo:

  <a href="https://web.WhatsApp.com/send?text=https://www.articolo-da-condividere.it/">
       <img width="50px" src="link-mia-immagine.png">
     </a>

Ora vediamo il pulsante di WhatsApp che consente ai tuoi clienti di contattarti direttamente.

Il codice ha la stessa base del pulsante visto in precedenza ma cambia l’url a cui punta il tasto, come nell’esempio.

  <a href="WhatsApp://send?phone=+39012345678&text=testo">
       <img width="50px" src="link-mia-immagine.png">
     </a>

Il codice accetta 3 parametri:

• send?: per inviare un nuovo messaggio
• text=text: testo di default del messaggio.
• phone=: numero di telefono (il tuo) al quale inviare il messaggio

Per la versione PC il link cambierà in questo modo:

 <a href="https://web.WhatsApp.com/send?phone=+39012345678&text=testo">
       <img width="50px" src="link-mia-immagine.png">
     </a>