Open In App
Related Articles

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

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

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=
        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=
                </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>

                    

Output:



Last Updated : 09 Feb, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads