WhatsApp stands out as one of the leading mobile messaging applications in today's digital landscape. Originally created by Jan Koum and Brian Acton, it is currently under the ownership of Facebook. As of recent statistics, the platform boasts nearly 1.5 billion active users.
Given the immense popularity of WhatsApp as a messaging application, many websites are now incorporating a WhatsApp sharing feature. Web developers are tasked with implementing this functionality to enhance user experience and facilitate easy sharing directly from their websites.
This chapter will guide you on adding a WhatsApp sharing link or button to a website using the JavaScript programming language . This chapter will describe the following methods to create a WhatsApp sharing option for your website:
- Create WhatsApp Sharing Link
- Create WhatsApp Sharing button
- Create WhatsApp Sharing icon using image
Why needed?
Given that WhatsApp ranks as the leading messaging application, it is essential for many websites to incorporate a WhatsApp sharing feature. WhatsApp facilitates private sharing, indicating that the sharing process occurs among a select group of individuals rather than being broadcast to the general public.
The web developer needs to address this requirement by incorporating a sharing feature into their website to enhance user efficiency. This will allow users to effortlessly share information directly from the website using the designated sharing option, rather than resorting to the traditional copy and paste method for sharing.
Steps to Add a WhatsApp sharing link
The subsequent procedure will establish a WhatsApp sharing link on a webpage, enabling users to directly access WhatsApp and share information from the website through the application.
Note: This will not work on large screens like laptops and computers. It will work perfectly on a Mobile phone.
For users utilizing larger screens, incorporate the WhatsApp web URL or hyperlink directly within the JavaScript code.
Follow the steps below:
Step 1: Create a basic webpage that includes a hyperlink implemented with the HTML anchor tag <a>. This link will serve as an option for sharing.
HTML CODE
<html>
<head>
<title> Add a WhatsApp sharing link on a website </title>
</head>
<body>
<h3 style="color:brown"> WhatsApp sharing Link </h3>
<a> Share to WhatsApp </a>
</body>
</html>
Step 2: As previously mentioned, this approach will not function effectively on larger displays (such as laptops, desktops, or computers). Therefore, we will implement CSS to conceal the sharing link on these larger screens. Below is the CSS code designed to hide the sharing link on larger displays:
Use the CSS @media query for this.
CSS CODE
<style>
@media screen and (min-width: 500px) {
a {
display: none
}
}
</style>
This snippet of code is designed to conceal the hyperlink that you established with the anchor tag, as it specifies a minimum screen width of 500 pixels. To conduct your tests, you may adjust the minimum width to 1000 pixels and observe the results on a laptop; in this case, the link will remain visible.
Step 3: At this stage, proceed to apply the previous two steps using JavaScript to ensure that the generated hyperlink functions correctly. Consequently, when this link is clicked, it will launch WhatsApp directly from the existing webpage.
JAVASCRIPT CODE
Incorporate the following code into the anchor tab <a> within the HTML markup intended for mobile devices.
href="whatsapp://send?text=Your message here"
Complete Example
Below is the full code necessary for generating a WhatsApp sharing link:
<html>
<head>
<title> Add a WhatsApp sharing link on a website </title>
</head>
<style>
//css code to hide the WhatsApp sharing link on the large screen
@media screen and (min-width: 1000px) {
a {
display: none
}
}
</style>
<body>
<h3 style="color:brown"> WhatsApp sharing Link </h3>
<!-- create a link using anchor tab -->
<a href="whatsapp://send?text=This is WhatsApp sharing example using link" data-action="share/whatsapp/share"
target="_blank"> Share to WhatsApp </a>
</body>
</html>
Output on Mobile
Execute the aforementioned code on a mobile device rather than on a desktop or laptop computer. You should receive a response similar to what is provided below. At this point, tap on the Share to WhatsApp link, which will direct you to the WhatsApp messenger application on your mobile phone.
Upon clicking the link, the WhatsApp application on your mobile device will launch, prompting you to choose the contacts with whom you wish to share the message. This action will distribute the text specified in the text parameter (This is WhatsApp sharing example) contained within the anchor tag.
Note: You will get this output of the above code only on the mobile phone.
Output on desktop
When executing the aforementioned code on larger displays such as desktops or laptops, you will notice that the output does not include a WhatsApp sharing link, as illustrated in the screenshot below:
Alternatively, if you receive the WhatsApp sharing link while reducing the size of your browser window, clicking on that link will result in a blank response, with the text appearing in the browser's search bar.
Create a WhatsApp Sharing button
At this stage, we will implement a WhatsApp Sharing button on a webpage. Essentially, this code is meant to incorporate a button into the website that directs users to the WhatsApp mobile application. When you click this button, you will be taken to the WhatsApp app, enabling you to share specific web content with your contacts.
This approach does not necessitate extensive coding. It simply utilizes the window.open function from JavaScript, along with the WhatsApp link and the specific data you wish to transmit.
For mobile WhatsApp
<button onclick="window.open('whatsapp://send?text=This is WhatsApp sharing example using button')"> Open WhatsApp </button>
For WhatsApp Web on desktop
<button onclick="window.open('https://web.whatsapp.com://send?text=This is whatsapp sharing example using button')"> Open WhatsApp </button>
Incorporate one of the following codes into your final code based on your preference for launching WhatsApp.
Example
Below is the code snippet designed for mobile devices to incorporate a WhatsApp sharing button into a webpage or website:
Copy Code
<html>
<head>
<title> Add a WhatsApp sharing button on a website </title>
</head>
<body>
<h3 style="color:brown"> WhatsApp sharing Link </h3>
<!-- create a button to open the WhatsApp onclick function -->
<button onclick="window.open('whatsapp://send?text=This is WhatsApp sharing example using button')"> Open WhatsApp </button>
</body>
</html>
Output on Mobile
Execute the aforementioned code on a mobile device, and it will present a compact HTML button on a webpage, as illustrated in the screenshot provided below:
To initiate sharing data with your contact, please click on the Open WhatsApp button, which will redirect you to your WhatsApp application. Below is a screenshot illustrating this on a mobile device:
Create a WhatsApp Sharing icon using image
In this approach, we will generate a WhatsApp icon by sourcing an image from the web and incorporating it into our webpage to serve as a sharing icon for WhatsApp. By clicking on this image/icon, users will be directed to the WhatsApp application, enabling them to share specific web content with their contacts.
For mobile WhatsApp
function openWhatsApp() {
window.open('whatsapp://send?text= https://www.youtube.com/watch?v=ohpCMpderow');
}
For WhatsApp Web
function openWhatsApp() {
window.open('https://web.whatsapp.com://send?text= https://www.youtube.com/watch?v=ohpCMpderow');
}
Key considerations for this illustration:
- In this case, we sourced the WhatsApp icon image directly from the web. Therefore, we included the URL for the WhatsApp image icon from the internet and established its height and width.
- Instead of a text message, we are providing a YouTube video link from our website. For this purpose, no special steps are required. You simply need to substitute the text with the link to the video in place of the WhatsApp link.
E.g. 'whatsapp://send? text= https://www.youtube.com/watch?v=ohpCMpderow'
Example
The code provided below will assist you in incorporating a WhatsApp sharing icon into your website. Please keep in mind that this code is designed exclusively for the WhatsApp mobile application. When accessed via a web browser, it will not display anything.
Copy Code
<html>
<head>
<title> Add a WhatsApp sharing image icon on a website </title>
</head>
<script>
//user-defined function to open and share web content on WhatsApp
function openWhatsApp() {
window.open('whatsapp://send?text= https://www.youtube.com/watch?v=ohpCMpderow');
}
</script>
<body>
<h3 style="color:brown"> WhatsApp sharing Link </h3>
<!-- create an image icon to open the WhatsApp onclick -->
<img src = "https://placehold.co/200x150/3498db/ffffff?text=Sample+Image" height="50" size="50" onclick="openWhatsApp()">
</body>
</html>
Output on Mobile
Execute the code provided above on a mobile device; this will display a small WhatsApp icon. Tap on this WhatsApp image icon to observe the output and see how it reacts:
By clicking on the WhatsApp image icon, you will receive the following output:
WhatsApp sharing link with user input
In this instance, we will demonstrate how to implement a WhatsApp sharing feature that includes an input field for user input. This approach allows us to capture the message that the user wishes to share via an input field and subsequently dispatch this message using JavaScript. To facilitate this, we will provide a sharing button that enables users to share their message with their contacts on the WhatsApp messaging platform.
In this illustration, we will create an input field that allows users to enter information, along with a button to submit that input, and a link for sharing via WhatsApp. This functionality will be implemented using JavaScript programming.
Examine the code that facilitates sharing on WhatsApp utilizing input provided by the user:
Example
Below is the full code required to incorporate a WhatsApp sharing icon into a webpage:
Copy Code
<html>
<head>
<title> Add a WhatsApp sharing link on a website </title>
<style>
/* To hide the button on large screens */
@media screen and (min-width: 1000px) {
.mobileShow {
display: none
}
}
</style>
</head>
<body>
<h3>Whatsapp sharing</h3>
<input class="mobileShow" type="text" name="message">
<button onclick="share()" class="mobileShow"> Share to WhatsApp </button>
<script src=
"https://placehold.co/400x300/3498db/ffffff?text=Sample+Image">
</script>
<script>
// User-defined function to share some message on WhatsApp
function share() {
// collet the user input
var message = $("input[name=message]").val();
// JavaScript function to open URL in new window
window.open( "whatsapp://send?text=" + message, '_blank');
}
</script>
</body>
</html>
Output
Upon running the code provided on a mobile device, you will see a text entry field designed for user input, along with a button that facilitates sharing that input directly to WhatsApp. Refer to the mobile screenshot illustrating the aforementioned program:
Enter the message in the text box and then click on the Share to WhatsApp button. This action will take you to your WhatsApp application, allowing you to share the message with your contacts on WhatsApp.