Post
Ask Question

WhatsApp Web and Mobile Sharing in JavaScript

Introduction

When it comes to instant sharing with friends, family, and colleagues, the first channel that comes to mind is WhatsApp.

Photo by Anton on Pexel

Imagine the impact on the website if your users could directly share information from it with their immediate circle. Having such a feature will allow your users to create visibility for your product in seconds, which is exactly what you need if you are just getting started!

More interestingly, users should also be able to access this sharing even when they are browsing through your website on mobile. This is also possible. 

In this article, I will show you how to set it up and integrate it into your website in less than 5 minutes. Once deployed, your users will be able to share content from your website directly through Whatsapp on both Desktop (Whatsapp Web) and Mobile (Whatsapp App).

Getting started

WhatsApp Web is a convenient platform for sharing content seamlessly with desktop users via a web browser. For mobile users, on the other hand, the WhatsApp mobile app offers a user-friendly experience for effortless sharing on the go. As a result, our code should detect the screen size and trigger the appropriate sharing method. 

The code provided here has been kept as simple as possible in order for you to simply integrate it with yours.

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-16" />
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no" />
        <link rel="stylesheet" href="index.css">
        <script type="text/javascript" src="index.js"></script>
    </head>
    <body>
        <input type="text" id="txtMsgToShare">
        <input type="button" id="btnWhatsAppMobile" value="btnShareMobile Mobile" onclick="onShareWhatsApp('mobile')">
        <input type="button" id="btnWhatsAppWeb" value="btnShareMobile Web" onclick="onShareWhatsApp('web')">
    </body>
</html>
  • On line 11, I am creating a simple textbox whose id is 'txtMsgToShare'. This is where you will type in the message you wish to share on WhatsApp.
  • On line 12, we are creating a button with the id 'btnWhatsAppMobile'. This button will be used for sharing on mobile.
  • On line 13, we are creating a button with the id 'btnWhatsAppWeb'. This button will be used for sharing on a desktop/laptop.

What happens when the function is triggered after the button click will be discussed in the 'Javascript' section.

CSS

@media screen and (max-width: 1001px) {
    #btnWhatsAppWeb{  
      display: none  
    }  
  }
  
  @media screen and (min-width: 1000px) {
    #btnWhatsAppMobile{  
      display: none  
    }  
  }

On screens smaller than 1000px, the button with the id 'btnWhatsAppWeb' should not be displayed. This is because such devices are mobile devices, and the button to share using Whatsapp Mobile should be used. 

On the other hand, for larger screens, the button having the ID 'btnWhatsAppMobile should not be displayed. These large screens are not mobile devices, and the sharing should be done via WhatsApp Web. Hence, only the button 'btnWhatsAppWeb' should be seen on the screen.

The screen size '1000px' has been used for simplicity. To get the exact number for each device type's screen size, kindly check here.

Javascript

function onShareWhatsApp(platform){
    const txtToShare = document.getElementById("txtMsgToShare").value;
    console.log("txtToShare: ", txtToShare);

    if (platform == "web"){
        window.open(`https://api.whatsapp.com:/send?text= The text is ${txtToShare}`);  
    } else if(platform == "mobile") {
        window.open(`whatsapp://send?text= The text is ${txtToShare}`); 
    }
}

This function is triggered by the onclick event (see the HTML section).
The platform type, i.e, web or mobile, is sent as a parameter. It is done so that you know how to send the message.

If we are doing the sharing from a desktop device, as per the if condition on line 5, we will use the url 'https://api.whatsapp.com:/send?text'. A new tab will be opened, prompting you to sign in to WhatsApp Web to send the message.

If the function is triggered by the button for mobile sharing, the parameter 'mobile' will be sent to this function, and the url on line 8 will be used. It will launch the Whatsapp Mobile app, and we can choose to whom we want to send the message.

Conclusion

Harnessing the power of WhatsApp for web and mobile sharing is not just about convenience; it's about enhancing user engagement and expanding your reach. Whether you're a seasoned developer or just starting out, integrating WhatsApp into your web and mobile applications can open up a world of possibilities. From sharing updates with customers to streamlining communication within your team, WhatsApp has the potential to transform the way you connect. So dive in, explore the possibilities, and let the world of WhatsApp integration empower your web and mobile applications.

You can find all the working codes here: https://github.com/mervynmanilall/share-on-whatsapp-js.


Similar Articles