WhatsApp is a widely used messaging app that lets you send messages, photos, and videos to your friends and family. it’s one of the most popular messaging apps around.
Because WhatsApp is so popular, many websites want to make it easy for their visitors to share content via WhatsApp. To do this, web developers need to add a WhatsApp sharing option to their sites.
In this tutorial, we’ll show you how to add a WhatsApp sharing link or button to your website using JavaScript. We’ll cover different methods to create a WhatsApp sharing option, so you can choose the one that works best for your site.
How To Create A WhatsApp Sharing Link ?
Note: This will not work on large screens like laptops and computers. It will work perfectly on a Mobile phone.
Design a simple webpage having a hyperlink on it using HTML anchor tag.
We will use this as a WhatsApp sharing link let us see the html code first
<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> As, this method would not work on large screens (laptop/desktop/computer). So, we will add CSS to hide the sharing link on large screens. Let us use CSS code to hide the sharing link on large screens:
Use the CSS @media query for this.
CSS Code:
<style>
@media screen and (min-width: 500px) {
a {
display: none
}
}
</style> Above code will hide the link which we have created using the anchor tag as we have set the min-width of the screen to 500px. For the testing purpose, you can increase the min-width to 1000 and check the output on a laptop; it will not hide the link.
Now let us implement the above two steps with JavaScript to make the created hyperlink in working. So, when you click on this link, it will open WhatsApp directly from the current webpage.
href="whatsapp://send?text=Your message here" add the above code inside the <a> tag inside html code for mobile use.
Full Code:
<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:red"> 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> 
When you click on the link, your WhatsApp application will open in mobile phone and it will ask you to select the contacts to share the text with them. This will share the text provided in the text parameter (This is WhatsApp sharing example) inside the anchor tag.
Explanation of the above full code:
<html>: Indicates the start of an HTML document, which is the standard markup language for creating web pages.<head>: Contains meta-information about the document, such as its title and links to external resources like stylesheets and scripts.<title> Add a WhatsApp sharing link on a website </title>: Sets the title of the web page, which appears in the browser tab.<style>: Defines the style rules for the HTML document, in this case, to hide the WhatsApp sharing link on large screens.@media screen and (min-width: 1000px) { ... }: This is a media query that targets screens with a minimum width of 1000 pixels.a { display: none }: This CSS rule hides the anchor (<a>) element, which is used to create links, on screens wider than 1000 pixels.</style>: Closes the<style>tag.<body>: Contains the content of the web page that is visible to users.<h3 style="color:red"> WhatsApp sharing Link </h3>: Displays a heading (<h3>) with red text that says “WhatsApp sharing Link”.<a href="whatsapp://send?text=This is WhatsApp sharing example using link" data-action="share/whatsapp/share" target="_blank"> Share to WhatsApp </a>: Creates a link (<a>) that, when clicked, opens the WhatsApp app and allows the user to share the specified text.</body>: Closes the<body>tag.</html>: Indicates the end of the HTML document.
Now let us go for another way – WhatsApp sharing button
For Mobile Whatsapp
<button onclick="window.open('whatsapp://send?text=This is codemagnet')"> Open WhatsApp </button> For Desktop/Laptop:
<button onclick="window.open('https://web.whatsapp.com://send?text=This is codemagnet')"> Open WhatsApp </button> <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 codemagnet')"> Open WhatsApp </button>
</body>
</html>here in the above code the window.open() will work when you click on the button named ‘Open Whatsapp’ , it will open a new window in whch you can see your WhatsApp only if you are logged in to laptop/desktop and same with mobile as well.
How to Create WhatsApp Sharing icon using image ?
Here, will create a WhatsApp icon by taking an image from the internet and add it to the webpage to create a sharing icon of WhatsApp. When you click on this image/icon, it will redirect you to the WhatsApp application for sharing some web content with your contacts.
For Mobile:
<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://youtu.be/MUU8Bn1Q1jw?si=lfa2bWvxAPBFYqu2');
}
</script>
<body>
<h3 style="color:brown"> WhatsApp Button </h3>
<!-- create an image icon to open the WhatsApp onclick -->
<img src = "https://image.freepik.com/free-vector/whatsapp-icon-design_23-2147900927.jpg" height="50" size="50" onclick="openWhatsApp()">
</body>
</html>For Laptop:
<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=Check out this video: https://youtu.be/MUU8Bn1Q1jw');
}
</script>
<body>
<h3 style="color:brown"> WhatsApp Button </h3>
<!-- create an image icon to open the WhatsApp onclick -->
<img src="https://image.freepik.com/free-vector/whatsapp-icon-design_23-2147900927.jpg" height="50" onclick="openWhatsApp()">
</body>
</html>
the WhatsApp Web API or a third-party service that supports WhatsApp sharing you can also use these for your websites.
Adding a working WhatsApp share icon to a website using JavaScript is a great way to allow users to easily share content. By following a few simple steps, you can create a clickable icon that opens WhatsApp with a pre-populated message.
First, you need to create an icon image and place it on your website. Then, you can use JavaScript to open WhatsApp with the message you want to share. This makes it easy for users to share content with their friends and contacts on WhatsApp.
Overall, adding a WhatsApp share icon to your website can help increase engagement and make it easier for users to share your content with others.
Leave a Reply