33

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?

3
  • 1
    As today (Sept 23 2015) there is no way to achieve this. The best approach is to share the link and serve it with some force download headers.. Quite invasive, but it's the closer you can get today.
    – Joaquín O
    Sep 24, 2015 at 0:03
  • @JoaquínO can you elaborate on this please ? Sep 14, 2016 at 7:28
  • Did you figure out how to achieve this??
    – Umar745
    Aug 5, 2021 at 9:44

1 Answer 1

5

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.

2
  • Just reviewed this question. As of now I couldn't figure out a way to directly share an image on whatsapp so link sharing may be the easiest alternative from an website perspective. From an app there may be alternative ways though.
    – Manuel
    Sep 15, 2016 at 8:18
  • 2
    any solution on this?
    – VaibS
    Jun 6, 2020 at 9:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.