Pulsante per inviare il messaggio WhatsApp – JavaScript

Hai bisogno di un pulsante che invii un messaggio Whatsapp? Eccoci, ultimamente mi chiedevano spesso – Come creare un pulsante che invii una mail automatica o inviare un messaggio Telegram. Oggi vi spiego come inviare un messaggio direttamente su WhatsApp.

In teoria non ci sono tantissime cose da spiegare. Qui sotto troverai lo Script che segue l’url che passa il numero di telefono di un utente che deve essere obbligatoriamente registrato su WhatsApp.

Inizialmente creiamo un piccolo form che ci servirà per creare il messaggio. Per questo dovremmo creare un tag <form> con dentro un <input> dove il cliente inserirà il messaggio, e il bottone che a sua volta invierà il messaggio inserito.

HTML

<form action="#" class="form" method="POST">
  <input type="text">
  <button type="submit">Invia</button>
</form>

Scriviamo la funzione sendToWhatsapp, aggiungendo due parametri – Testo e Telefono. Elaboriamo la variabile “text” con  encodeURIComponent().

JS

const form = document.querySelector('.form');
const number = '348#######';
function sendToWhatsapp(text, phone) {
 
  text = encodeURIComponent(text);
 
  let url = `https://web.whatsapp.com/send?phone=${phone}&text=${text}&source=&data=`;
 
  window.open(url);
}

form.addEventListener('submit', (e) => {
  e.preventDefault();

  const text = e.currentTarget.querySelector('input').value;

  sendToWhatsapp(text, number);
});

Giustamente questo tipo di modalità ti permetterà di arrivare direttamente nella chat con l’interlocutore. Ti basterà premere il bottone “Invia”. Si il metodo non è perfetto ma molto semplice e funzionale.

Buon Proseguimento =)