How to add WhatsApp share button in a website using JavaScript ?

Last Updated : 09 Feb, 2022

WhatsApp is the most popular messaging app. This article describes how you can add the WhatsApp share button to your website. In this example we make a simple website that uses a Whatsapp share button when you click on it will open on the Whatsapp app on your system and your message was already printed there.

Note: This will work only with WhatsApp installed in your system (desktop/laptop)

Example: Create a simple webpage using the function, Sharing will be done when the user clicks on its button.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0"> 
    <link rel="stylesheet" href= 
"https://use.fontawesome.com/releases/v5.15.4/css/all.css"
        integrity= 
"sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm"
    crossorigin="anonymous"> 
  
    <style> 
        button { 
            width: 170px; 
            height: 50px; 
            background-color: #4ECC5B; 
            color: #fff; 
            border: 1px solid white; 
            font-size: 1rem; 
            cursor: pointer; 
        } 
  
        button:hover { 
            background-color: #3ae04b; 
        } 
    </style> 
</head> 
  
<body> 
    <div> 
        <nav class="navbar background"> 
            <ul class="nav-list"> 
                <div class="logo"> 
                    <img src= 
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210420155809/gfg-new-logo.png" /> 
                </div> 
            </ul> 
        </nav> 
        <section class="section"> 
            <div class="box-main"> 
                <div class="firstHalf"> 
                    <h1 class="text-big"> 
                        7 Best Tips To Speed Up Your 
                        Job Search in 2022 
                    </h1> 
                    <p class="text-small"> 
                        Hunting down a relevant job requires 
                        proper techniques for showcasing your 
                        potential to the employer. <br> But with 
                        the advent of COVID-19, it has become 
                        a bit challenging and competitive to 
                        reach out for your dream job. <br> Many 
                        individuals have lost their jobs 
                        during these times, and on the other 
                        hand, freshers are facing difficulties 
                        while applying for a new job. <br> But 
                        there is no need for panic, you can 
                        change your ways and streamline things 
                        in a way that you get a proper result. 
                    </p> 
  
                    <button class="fab fa-whatsapp" 
                        onclick="whatsapp()"> 
                        Share on Whatsapp 
                    </button> 
                </div> 
            </div> 
        </section> 
    </div> 
</body> 
<script type="text/javascript"> 
    function whatsapp() { 
        window.open 
('whatsapp://send?text=Hello folks, GeekforGeeks giving 40% Off on DSA course') 
    } 
</script> 
  
</html> 