facebook email

Come aggiungere pulsante WhatsApp al sito web

Ti trovi in:
  1. blog Come aggiungere pulsante WhatsApp al sito web

Pubblicato il , aggiornato il 26 Novembre 2021

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.

code

Pulsante WhatsApp per condividere articoli

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>
code

Pulsante WhatsApp per contattarti direttamente

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>

Contattaci!

Preventivo sempre gratuito

Fabio Fresia, fondatore e titolare di Eureka Web di Asti

perm_device_information366 - 400 9542       emailinfo@agenziawebeureka.it

perm_identity
alternate_email
phonelink_ring
message