Create links to WhatsApp with just HTML and JAVASCRIPT

Walter Nascimento - Sep 18 '20 - - Dev Community

[clique aqui para ler em português]

WhatsApp allows you to create links from your phone to share with your contacts, with the new WhatsApp feature you can start a conversation even without having the person’s contact in your phonebook.

WhatsApp’s click to chat feature allows you to begin a chat with someone without having their phone number saved in your phone’s address book. As long as you know this person’s phone number and they have an active WhatsApp account, you can create a link that will allow you to start a chat with them. By clicking the link, a chat with the person automatically opens. Click to chat works on both your phone and WhatsApp Web.

With this resource it is also easy to share our number without complications.

CODE

We will create our own tool to facilitate the creation of links.

First let’s create the interface, we’ll do something simple, just HTML.

<h1>Gerador de link pro whatsapp</h1>
<form name="form_main">
  <label for="number">Número: </label>
  <input type="text" name="number" id="number"> <br>
  <label for="message">Mensagem: </label>
  <input type="text" name="message" id="message"> <br>
  <p id="end_url"></p>
  <button type="button" onclick="generateLink()">Gerar</button>
</form>

Now let’s do the generateLink function.

function generateLink() {
  let number = document.form_main.number.value;
  let message = document.form_main.message.value;
  let url = "https://wa.me/";
  let end_url = `${url}${number}?text=${message}`;
  document.getElementById('end_url').innerText = end_url;
}

There, it’s that simple.

Demo

See the complete project working below.

Youtube

If you prefer to watch, I see the development on youtube (video in PT-BR).

Thanks for reading!

If you have any questions, complaints or tips, you can leave them here in the comments. I will be happy to answer!

😊😊 See you! 😊😊

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Terabox Video Player