How to create a floating WhatsApp call to action button for website (No Plugin) ?


      Today in this post I will share with you how to create a floating WhatsApp call to action button for your website. This call to action button will help your website visitors to send you a message through WhatsApp instantly from any page of your site. This button will float at any position of your website viewport as you wish, maybe in the bottom left or bottom right etc.

Benefits of WhatsApp CTA button

If your website has a WhatsApp CTA button, website visitors will be able to contact you easily whenever they want and it also gives your website a nice look. 

Coding for WhatsApp CTA button

Let's begin the coding part. In this case to get the WhatsApp icon we will use the font awesome. So at the very beginning let's paste the font awesome CDN link in the head section of your webpage. The CDN link is given below.

<link crossorigin="anonymous" href="" integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" referrerpolicy="no-referrer" rel="stylesheet" />

Let's now jump into the HTML code. For the HTML you have to remember that you can paste it anywhere inside the <body> of your webpage as we will make it position fixed, better to paste it after opening body tag or closing body tag. Please note the link of the anchor tag. There you have to provide your contact number with the country code(must).  Here is the code for HTML..

 <div class="whatsapp-cta-container">
        <a href=" What's Up." target="_blank"><i class="fab fa-whatsapp"></i></a>

    Now let's see the CSS code. here you will see that the position of the WhatsApp share button is fixed and I am keeping it in the bottom right corner, you can change its position according to your need. Also make sure to check the z-index, it should be more than any other element of your page, to show it at the top of all elements. Also whenever someone hovers this WhatsApp button, it will be scaled up a little bit and rotate a little. To make the transformation smooth we have given the transition value. The CSS code is given...

       .whatsapp-cta-container {
            position: fixed;
            bottom: 20px;
            right: 25px;

        .whatsapp-cta-container * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;

        .whatsapp-cta-container a {
            position: relative;
            text-decoration: none;
            font-size: 25px;
            color: #50f366;
            display: inline-flex;
            height: 50px;
            width: 50px;
            border-radius: 50%;
            align-items: center;
            justify-content: center;
            background: #000;
            box-shadow: 0 0 10px #000a;
            border: 2px solid #50f366;
            z-index: 9999; /*should be greater than all other elements of webpage*/
            transition: 0.3s;

        .whatsapp-cta-container a:hover {
            transform: scale(1.1) translate(-2px, -3px) rotateZ(-10deg);

That's all, now you can check or apply this codes to your website. If you have any doubts or suggestions you can tell me in the comment section. You may share this post also. If you like this post, just comment your country name below it's an inspiration for me. Thank you very much. Have a nice day, Bye..

Imon Raj

Software, Web & Android Developer

My Skills:


Post a Comment

Popular posts from this blog

Which one is better ? GeeksForGeeks or Leetcode ? How many questions to solve ?

Random jokes generator using API (Free)