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

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

Last Updated : 29 Jul, 2024

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>
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
        }

        .navbar {
            width: 100%;
            display: flex;
            justify-content: center;
        }

        .logo img {
            max-width: 100px;
        }

        .section {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
        }

        .box-main {
            max-width: 600px;
            padding: 20px;
        }

        button {
            width: 170px;
            height: 50px;
            background-color: #4ECC5B;
            color: #fff;
            border: 1px solid white;
            font-size: 1rem;
            cursor: pointer;
            margin-top: 20px;
        }

        button:hover {
            background-color: #3ae04b;
        }
    </style>
</head>

<body>
    <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">
                    Hello GFG 
                </p>

                <button class="fab fa-whatsapp" onclick="whatsapp()">
                    Share on Whatsapp
                </button>
            </div>
        </div>
    </section>
    <script type="text/javascript">
        function whatsapp() {
            window.open(
'whatsapp://send?text=Hello folks, GeekforGeeks giving 40% Off on DSA course');
        }
    </script>
</body>

</html>

Output:

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

G

gurjeetsinghvirdee

Improve

Article Tags :

Similar Reads

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

How to show Image in an Alert Box using JavaScript ?

Adding images in JavaScript alerts can make messages more eye-catching and easier to understand. It's a way to attract your attention and make the alerts more attractive. We will show the steps on how to put images in our JavaScript alerts and make your notifications clearer and more engaging for us

How to add Share button in React Native ?

React Native is an open-source UI software framework created by Meta Platforms, Inc. It is used to develop applications for Android, Android TV, iOS, macOS, tvOS, Web, Windows, and UWP by enabling developers to use the React framework along with native platform capabilities.In this article, we will

How to Add JavaScript in WordPress Page and Post?

WordPress doesnâ€™t allow you to directly add JavaScript code to your site, you can achieve this by using plugins or manual methods. JavaScript is a popular programming language that allows you to add interactive features to your website. Learning how to add JavaScript to your WordPress site can help

How to add Social Share Buttons in NextJS ?

In this article, we are going to learn how we can add Social Share buttons in NextJs. Using the social share button user can share your content in different social media sites.NextJS is a React-based framework. It has the power to Develop beautiful Web applications for different platforms like Windo