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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" 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="https://api.whatsapp.com/send?phone=919876543210&text=Hello. What's Up." target="_blank"><i class="fab fa-whatsapp"></i></a>
    </div>

    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:

Comments

Post a Comment

Popular posts from this blog

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

     Great question! When it comes to practicing Data Structures and Algorithms (DSA), there's a plethora of websites to choose from. In the Indian context, GeeksForGeeks and Leetcode stand out as the most popular choices among undergraduate Computer Science students (and even those from other departments who are quickly catching on) for honing their DSA skills.      Whether you're a first-year student or just diving into coding during college, you've probably encountered the ubiquitous term 'DSA' and its significance in securing jobs within the IT industry. You might have seen numerous YouTube ads promoting live and 'free!!!' webinars, and there's a wealth of learning resources available on YouTube to grasp the fundamentals of DSA. However, while learning DSA is crucial, the real game-changer is practicing questions to cultivate that 'legend-level' confidence needed to tackle any given problem.      Now, here's where the confusion sets in. Y
Read Post

Random jokes generator using API (Free)

Image
           Today let's see how to create a random joke generator which will basically fetch the data from a free API. My main target is to show how to use API and put the data in HTML using javaScript.      Today we will use JokeApi website -  https://sv443.net/jokeapi/v2/  . You can read the documentation from here. We will send an fetch request to -  https://v2.jokeapi.dev/joke/Any?blacklistFlags=racist,sexist&type=single&idRange=0-319  . You can get this type of URL from JokeApi and any free API. You can replicate the same process for other APIs as well.      When we send request to this URL of the API, it will send back a response which is transformed into JSON format in JavaScript. Let's have a look on the sample JSON data -  { "error": false, "category": "Pun", "type": "single", "joke": "I bought some shoes from a drug dealer. I don't know what he laced them with, but I was trippi
Read Post