Whatsapp Click to Chat with emojis

Viewed 4215

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

1 Answers

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.

Related