Add a WhatsApp chat button to your website using HTML + CSS

You must have read that using WhatsApp Business can keep you in touch with more than 1.5 billion people worldwide, but the truth is that to attract these potential customers, you must use all available channels to inspire them to contact your company through WhatsApp. If you keep in mind that current mobile devices generate almost half of your website’s traffic, then your website may be one of the best sources of WhatsApp conversations.

We want to share a simple and enticing way to put the click-to-chat button on your website, which will allow your visitors to contact you with just one click. For this, you must have access to the code of the website and basic knowledge of network programming or a programmer to help you.

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
    <style type="text/css">
        .wa-float{
            position:fixed;
            width:60px;
            height:60px;
            bottom:40px;
            right:40px;
            background-color:#25d366;
            color:#FFF;
            border-radius:50px;
            text-align:center;
          font-size:30px;
            box-shadow: 2px 2px 3px #999;
          z-index:100;
        }

        .my-float{
            margin-top:16px;
        }
    </style>
</head>
<body>
    <a
        href="https://api.whatsapp.com/send?phone=62895391582231&text=Halo" class="float" target="_blank">
        <i class="fa fa-whatsapp my-float"></i>
    </a>
</body>
</html>

That’s All. I hope it helps you.

Leave a Comment