WhatsApp HTML Sharing Link for Image

Question

I know you can share messages with and this is working on android and ios now:

<a href="whatsapp://send?text=Hello world this is a message and a link http://www.example.com/image.jpg">Share with whatsapp</a> 

However I'd like to share an image trough a button on my website like someone would share an image from his phone (gallery). Is this anyhow possible?

Answer 1

One solution that comes to mind is uploading a photo to your server via AJAX, returning the link to the uploaded photo and then sending a message with the link to your photo using the method you described in your question. This is not quite the same as sending an image directly using Whatsapp since the recipient would only receive a link, but I doubt there will ever be a way to send an image to another application from your gallery using a webpage since that would raise some serious concerns.

Roughly, the process would like this (keep in mind that this will require some testing to get right and find a solution that works well on all platforms or at least most of them):

1. Create an image upload on your website. Simply having <input type="file" accept="image/*"> on your page should, on most platforms, allow you to create a button which will open a dialog to select an image from your phone's gallery when clicked. You can find a full example here or use a library such as Plupload which contains many upload methods, including HTML5 which is what you need.

2. Create a simple server-side upload. This depends on your language and platform, but all you need to do is store the image somewhere and return a link to it in response. If you don't want to store these images on your server, you could forward it to Imgur API and upload there.

3. Redirect the user to the whatsapp:// link that contains the image link.

   window.location = 'whatsapp://send?text='+encodeURIComponent(imageURL); 

   This is the point where you need to do some testing on different platforms, though. You might not be able to redirect to a whatsapp:// link this way (since it seems like a security concern), so you may need to trick it (this is a bad idea, but I'm including it for the sake of completeness; the data-action part is from this answer):

   var fakeLink = document.createElement('a'); fakeLink.setAttribute('href', 'whatsapp://send?text='+encodeURIComponent(imageURL)); fakeLink.setAttribute('data-action', 'share/whatsapp/share'); fakeLink.click(); 

   In the end, if neither of these work, your best bet is creating a link once the upload is complete for the user to "confirm" sending which actually contains the above whatsapp:// link in the href field.

There are many factors to test and some that are implementation specific so I had to keep it vague without much code - if you come across anything else when implementing this, please mention it in the comments.