whatsapp   

Giovedì

01

Gennaio 1970

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

Leggi anche

Come creare pagina di amministrazione backend WordPress
Scopri
Come inviare dati dei form con Ajax serialize() a php
Scopri
Come creare controlli personalizzati per Wp customizer
Scopri
Elenco icone Google in un array in codice php
Scopri
Come creare sottomenu backend WordPress con add_submenu_page()
Scopri
Come usare le chiavi API Google
Scopri
Come recuperare elenco articoli di WordPress
Scopri
Come creare pannelli Meta Box nell’admin di WordPress
Scopri

Contattaci!

Preventivo sempre gratuito

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.

message
perm_identity
alternate_email

keyboard_arrow_up