How to add whatsapp share button on a website ?

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.