Create links to WhatsApp with just HTML and JAVASCRIPT

[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! 😊😊

Comments

[Yasmil]

Hello, how can I make the inner text appear in a box and with a button to copy the result? Like this page: whatsapp-for-business.firebaseapp....

[Walter Nascimento]

the text inside is an attribute of the html itself called placeholder

developer.mozilla.org/en-US/docs/W...

w3schools.com/tags/tryit.asp?filen...

now the copy button you can see here in this post

dev.to/walternascimentobarroso/cre...

[BHAD-Cusco]

Hello!
Have you ever try to send long message?
I am trying to use this solution but it only allows me to send message up to 2054 characters (including the full url since https)

[Walter Nascimento]

Hi, sorry for the delay.

this solution uses get to send information but get itself already has this maximum character limit.

to send more information only if the whatsapp api released a post route

helpx.adobe.com/mt/experience-mana...

abramillar.com/2018/02/12/urls-max...

[BHAD-Cusco]

Hi, Thank you for the answer.
What do you mean by "whatsapp api released a post route"?

I need to allow the user to send orders throught whatsapp and they could be large, I was trying it out with this solution, not sure if there is a better way or something I am missing.

[Walter Nascimento]

"ONLY IF"

I don't know a better solution