Skip to content
Related Articles

Related Articles

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

View Discussion
Improve Article
Save Article
Like Article
  • 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=
        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:


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!