6

Using Whatsapp 'Click To Chat' I'm able to send a message to a number, as expected. But, I want to send some emojis in the prefilled message. It works well when I use a browser, but it doesn't work when I use a WebView inside an app (specifically a React Native app with a webview running the same site).

The problem:
For both, desktop browser or webView I use the same function and same encoding (encodeURI()), but when the WebView calls the Whatsapp URL ("wa.me/...") the chat on Whatsapp shows all emojis as: �

  • Is it even possible to use emojis on Whatsapp Click to Chat? (I bet it is, since desktop browser works).
  • What can be happening on mobile/app?
  • Should I use some kind of character encoding, as unicode, UTF-8 (I already tested some, but no success)?

Here's the function that I'm using:

SendWhatsapp = function(message, number) {
  number = LibGeral.NormalizeMobileNumber(number);
  if (empty(message)) {
    message = "";
  }

  var urlApiWhats = "https://wa.me/" + number + "?text=" + message;
  urlApiWhats = encodeURI(urlApiWhats);
  var a = document.createElement("a");
  a.setAttribute("data-action", "share/whatsapp/share")
  a.href = urlApiWhats;
  window.document.body.appendChild(a)
  a.click();
  window.document.body.removeChild(a);
  return true;
}

SendWhatsapp("I'm a message with emoji ", "xxxxxxxxx")

As said, inside the WebView from app, it calls the whatsapp url and opens the chat correctly, but the emoji is lost and just a question mark shows up. On Browser (Chrome, for example), it works very well and emoji appears (even on Chrome for mobile) Also, even if I remove the encodeURI and pass the emoji 'directly', it still not working. I'm pretty sure it was working some weeks ago...

blakkwater
  • 1,133
  • 7
  • 13
Calvin Nunes
  • 6,376
  • 4
  • 20
  • 48
  • Emojis are special characters (unicode). You just probably URL-encode those the message before adding it to the URL parameters. You can use `URLEncoder.encode()`. – ByteWelder Oct 05 '20 at 21:13
  • @KenVanHoeylandt *"URLEncoder is not defined"* – Calvin Nunes Oct 06 '20 at 12:47
  • 3
    I am facing the same issue; it has been working before, and since a couple of weeks you get this question mark, no matter how you encode it. Mobile is still working correctly, but on a computer the browser shows the question mark and also moving forward to WhatsApp application (mac/win) it is wrong. – Stefan de Vogelaere Oct 28 '20 at 12:15
  • I'm having the same issue. Did you manage to solve it? – HasanAboShally Feb 22 '23 at 06:21

2 Answers2

2

This is how you should encode your URL:

const url = `https://api.whatsapp.com/send?phone=31612345678&text=${encodeURIComponent('Cheers from Vissie ⚡️')};
// returns: "https://api.whatsapp.com/send?phone=31612345678&text=Cheers%20from%20Vissie%20%E2%9A%A1%EF%B8%8F"

You can use https://wa.me/, I just used the other URL for this example. It's possible that in the browser it still gives �. But on your phone this should work.

Vissie
  • 637
  • 5
  • 11
2

I'm a bit late here but I ran into the same issue. Here's the solution:

Don't use

var urlApiWhats = "https://wa.me/" + number + "?text=" + message;

Use this instead

var urlApiWhats = "https://api.whatsapp.com/send/?phone=" + number + "&text=" + message;

Vissie's answer is working as he/she uses api.whatsapp.com/send/. It's also true that the browser will still show � but you'll see the emoji once you open WhatsApp. However the short url wa.me won't work. Apprently WhatsApp's server will redirect all wa.me requests to api.whatsapp.com/send/ and during that redirection emojis become �. It's not the problem of your code.

Panda Sean
  • 21
  • 2