whatsapp
keyboard_arrow_down Contatti

Mercoledì

30

Agosto 2023

Come aggiungere pulsante WhatsApp al sito web

Come aggiungere pulsante WhatsApp al sito web

  1. blog Come aggiungere pulsante WhatsApp al sito web
event_available
schedule

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>

Ti è piaciuto questo articolo?

favorite thumb_down
Autore articolo

Fabio

Sono un terribile realista. Pratico e determinato ma anche un grande sognatore, ecco perché do continuamente vita a nuovi progetti online e non. Nel 2019 ho fondato Eureka Web proprio per rendere possibile tutto questo. Insieme possiamo realizzare la tua idea!


Visita il sito
library_books

Leggi anche

Come fare redirect in WordPress senza plugin
Scopri
Come recuperare utenti WordPress e dati senza plugin
Scopri
Recuperare l'ultimo elemento di un array in php
Scopri

Contattami

perm_identity
alternate_email
phonelink_ring
message

Il tuo messaggio è stato inviato con successo!
Ti risponderemo a breve

Scrivi un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

message
perm_identity
alternate_email

keyboard_arrow_up