DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for Create links to WhatsApp with just HTML and JAVASCRIPT
Walter Nascimento
Walter Nascimento

Posted on

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

Top comments (6)

Collapse
yasmil_vl profile image
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....

Collapse
walternascimentobarroso profile image
Walter Nascimento Author

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

Collapse
bhadcusco profile image
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)

Collapse
walternascimentobarroso profile image
Walter Nascimento Author • Edited on

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

Collapse
bhadcusco profile image
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.

Thread Thread
walternascimentobarroso profile image
Walter Nascimento Author

"ONLY IF"

I don't know a better solution

🌚 Browsing with dark mode makes you a better developer.

It's a scientific fact.