Share to WhatsApp link button from Website using Javascript: 3 Ways
Given WhatsApp’s status as the leading messaging application, many websites find it essential to include a WhatsApp sharing feature. Adding a WhatsApp share button to your website can indeed enhance the user experience and promote content sharing. To implement a social media sharing feature on your website, you can use the WhatsApp API or Web URL. In this article, we’ll show you the steps to add a WhatsApp share text link to your website using JavaScript.
Add ‘Share to WhatsApp’ link to Your Website
The web developer needs to meet this requirement by integrating the WhatsApp sharing option into their website to enhance user efficiency. This allows users to effortlessly share information directly from the website using the dedicated sharing option, eliminating the need for manual copying and pasting. Usually, 3 ways to do it and they are;
Different Ways to share Whatsapp message links
| Different Ways | Links | Mobile App | Desktop App | Browser (New Tab) |
|---|---|---|---|---|
| Method 1 | api.whatsapp.com/send | ✅ | ✅ | ❌ |
| Method 2 | whatsapp://send | ✅ | ✅ | ❌ |
| Method 3 | web.whatsapp.com/send | ❌ | ❌ | ✅ |
Regardless of the method chosen, the user needs to be either logged into the WhatsApp application or linked to a device to share text links with individuals listed in their contacts because WhatsApp facilitates private sharing, ensuring that content is shared among a select group of individuals rather than with the public at large.
Let’s explore all the methods one by one;
Method 1 – Using WhatsApp API link recommended
Using the WhatsApp API approach is recommended for sharing text messages and links from the user’s WhatsApp application on either Mobile or Desktop.
example: https://api.whatsapp.com/send?text=YourTextHere
To create a WhatsApp share button or link that works on both mobile and Desktop, you can use the below code that will work on both platforms.
window.open(`https://api.whatsapp.com/send?text=${encodeURIComponent(shareMessage)}`, '_blank');html code to send whatsapp message
<!DOCTYPE html>
<html>
<head>
<title>WhatsApp Share Button</title>
</head>
<body>
<br>
<h1>Method 1 - Sharing WhatsApp text using API</h1>
<br>
<button id="whatsapp-btn1">Share on WhatsApp</button>
<script>
// Function to open WhatsApp with pre-filled message
function shareOnWhatsApp1() {
// Replace 'YourShareMessage' and 'YourShareURL or Text' with your own message and URL
const shareMessage = 'Check out this awesome website: https://www.codeindotnet.com/';
// Invoke WhatsApp Application
window.open(`https://api.whatsapp.com/send?text=${encodeURIComponent(shareMessage)}`, '_blank');
}
// Attach the shareOnWhatsApp function to the button click event
document.getElementById('whatsapp-btn1').addEventListener('click', shareOnWhatsApp1);
</script>
</body>
</html>
In the above example, a button is used to launch the WhatsApp application, but alternatively, you can use a hyperlink(anchor <a> tag) or an Image link as well to share content.
<a href="https://api.whatsapp.com/send?text=YourTextHere" target="_blank">Share to Whatsapp</a>Method 2: Using URL – Alternative to WhatsApp API
This method functions similarly to the previous one – the only difference is instead of the API, a WhatsApp URL can be utilized.
example: whatsapp://send?text=YourTextLinkHere
window.location.href = `whatsapp://send?text=${encodeURIComponent(shareMessage)}`;whatsapp share javascript code
<!DOCTYPE html>
<html>
<head>
<title>WhatsApp Share Button</title>
</head>
<body>
<br>
<h1>Method 2 - Sharing WhatsApp text using URL</h1>
<br>
<button id="whatsapp-btn2">Share on WhatsApp</button>
<script>
function shareOnWhatsApp2() {
const shareMessage = 'Check out this awesome website: https://www.codeindotnet.com/';
window.location.href = `whatsapp://send?text=${encodeURIComponent(shareMessage)}`;
}
document.getElementById('whatsapp-btn2').addEventListener('click', shareOnWhatsApp2);
</script>
</body>
</html>
Screenshots:
When you run the provided code, it will display a button to share defined text or links to WhatsApp.
Click on the “Share to WhatsApp” button.
On a desktop device, a popup box will appear asking for permission to open the WhatsApp application.
Click on ‘Open WhatsApp‘ and this action will redirect to the user’s WhatsApp application, as shown in the screenshot.
Note: On a mobile device, WhatsApp will open directly without a pop-up.
Once the app is opened, it allows users to share messages or text links with existing WhatsApp contacts (same as forwarding messages to multiple contacts).
Method 3: Using WhatsApp Web Link
In this approach, the WhatsApp Web link will open exclusively in the browser, prompting you to link the device in order to share messages with the user’s contact list.
example: https://web.whatsapp.com/send?text=YourTextMessageHere
window.open(`https://web.whatsapp.com/send?text=${encodeURIComponent(shareMessage)}`, '_blank');share link text from whatsapp javascript code
<!DOCTYPE html>
<html>
<head>
<title>WhatsApp Share Button</title>
</head>
<body>
<br>
<h1>Method 3 - Using 'web.whatsapp.com' URL</h1>
<br>
<button id="whatsapp-btn3">Share on WhatsApp</button>
<script>
function shareOnWhatsApp3() {
const shareMessage = 'Check out this awesome website: https://www.codeindotnet.com/';
window.open(`https://web.whatsapp.com/send?text=${encodeURIComponent(shareMessage)}`, '_blank');
}
document.getElementById('whatsapp-btn3').addEventListener('click', shareOnWhatsApp3);
</script>
</body>
</html>
Whether on mobile or desktop, the web.whatsapp.com link will only open in the browser tab, as shown below.
‘if’ condition – optional code
If you want to add specific code based on the device, use an if condition to execute your logic.
function shareOnWhatsApp() {
// Replace 'YourShareMessage' and 'YourShareURL' with your own message and URL
const shareMessage = 'Check out this awesome website: https://www.codeindotnet.com/';
if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
// Mobile device, open WhatsApp with pre-filled message
const whatsappLink = `whatsapp://send?text=${encodeURIComponent(shareMessage)}`;
window.location.href = whatsappLink;
}
else {
// Desktop device, provide a WhatsApp Web link
const whatsappWebLink = `https://web.whatsapp.com/send?text=${encodeURIComponent(shareMessage)}`;
window.open(whatsappWebLink, '_blank');
}
}
In this example, if you’re on a mobile device, the code ‘whatsapp://send‘ will run, and if it is a desktop device, the code ‘web.whatsapp.com/send‘ will be executed.