WhatsApp is the most popular messaging app. This article describes how you can add WhatsApp share button in your website.
Note: This will work only when website is open in mobile with WhatsApp installed.
Step 1: Design a simple webpage with a hyperlink on it. Sharing will be done when user click on this link.
HTML
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <title> How to add WhatsApp share button on website? </title> </head> <body> <h3>Whatsapp sharing</h3> <a>Share to whatsapp</a> </body> </html> |
Step 2: This will not work on desktop\laptop so let’s add CSS to hide it on large screens. To do so CSS @media query is used.
<style type="text/css">
@media screen and (min-width: 500px) {
a {
display: none
}
}
</style>
Example 1: This example is implemented using above two steps. Notice the href attribute specifies the location and this request is sent to WhatsApp application.
Syntax:
href="whatsapp://send?text=Your message here"
HTML
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <title> How to add WhatsApp share button on website? </title> <style type="text/css"> @media screen and (min-width: 500px) { a { display: none } } </style> </head> <body> <h3>Whatsapp sharing</h3> <a href= "whatsapp://send?text=GFG Example for whatsapp sharing" data-action="share/whatsapp/share" target="_blank"> Share to whatsapp </a> </body> </html> |
Save this file and open in mobile phone.
Output:
Example 2: In this example, we will take input from user and send that message using JavaScript. In this example, we have defined a class to show content only on mobile.
HTML
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <title> How to add whatsapp share button on website? </title> <style type="text/css"> /* To show on small size screen only */ @media screen and (min-width: 500px) { .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= </script> <script type="text/javascript"> // Function to share on whatsapp function share() { // Getting user input var message = $("input[name=message]").val(); // Opening URL window.open( "whatsapp://send?text=" + message, // This is what makes it // open in a new window. '_blank' ); } </script> </body> </html> |
Output:
HTML is the foundation of webpages, is used for webpage development by structuring websites and web apps.You can learn HTML from the ground up by following this HTML Tutorial and HTML Examples.
CSS is the foundation of webpages, is used for webpage development by styling websites and web apps.You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples.
