How to add whatsapp share button on a website ? - GeeksforGeeks

30 Jul, 2021
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="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js">    </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.
CSS-Misc
HTML-Misc
CSS
HTML
JavaScript
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Design a web page using HTML and CSS
Create a Responsive Navbar using ReactJS
How to set div width to fit content using CSS ?
Making a div vertically scrollable using CSS
How to set fixed width for <td> in a table ?
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
Hide or show elements in HTML using display property
How to Insert Form Data into Database using PHP ?
REST API (Introduction)