How to Add Custom Material Design Box In Your Blog

So friends, in today's article, I am going to tell you how you can install the animated WhatsApp button on the blogger website, which is for chat support and for joining WhatsApp group. I will tell you complete step by step. Here you people do not need to do anything separately, today I will tell you all the codes and steps to be followed in this very thing. So friends, let us start today's article.

This feature is trending very much, here you can add WhatsApp chat support button in your blogger's website, this is a very easy way by which you can support your users if they ask anything. If you have any questions or answers, they can connect directly to your WhatsApp and talk to you with the help of this support button.

Table of Contents

With the help of this article, we will learn step by step how to install WhatsApp chat button. With this, you can engage your audience in a new way, that is, you can call them, so let us start and give your website a more unique way by adding a WhatsApp button so that users can ask any question or answer any question directly. You can talk to us by contacting us on WhatsApp, for this we will install WhatsApp support button. Let's start today's article. With its help, you can also add animated chat support button on Telegram and also add chat support button on any other social media platform.

What is WhatsApp floating button

See this animated floating whatsapp button is a way developed which is done in the layout area of our blogger to connect us to each other mister who comes to our site on which we People share their content or posts and if our customers want to ask anything else or the business wants to ask anything then they can talk to us by clicking on our WhatsApp button and can ask us the answers to whatever questions they have. With this, we can attract a good number of customers and if we have something to sell to them like a theme or a product, we can contact them as well. We can talk to each other directly through WhatsApp.

This animated protein button for blogger website is of WhatsApp or it is a very good way by which we can support a good number of users on our website. With this, we can further improve our website and improve the performance of our website. Ranking can also be improved significantly. With this, we can engage a good number of customers, give a good response to our business and it also becomes easier for us to communicate with the customers. You people can see its advantages and disadvantages, both of which are given below. If you want to ask anything, you can talk to us directly by clicking on the WhatsApp button or any of our Telegram buttons.

We have given below the advantages and disadvantages of WhatsApp buttons, their advantages and disadvantages.

Some benefits of WhatsApp floating buttons

Advantages

1. Our customers and clients can easily communicate with us about our company and us.
2. We have our content and posts, we can give them more easily, we can provide them, we can give them support through our WhatsApp which helps us in making good customers.
3. This is our WhatsApp support system or automatic features, but to use it, our phone or we need to be there because no one can do it by logging in because here only one device has one. Only once can there be people.
4. With this, you can easily stay in touch with your customers, talk to others and help them and this makes their relationship with our brand or site very good.

Some disadvantages of WhatsApp floating button

Disadvantages

1. You can respond or communicate with your customers from WhatsApp app itself or WhatsApp web application. If you have more than 5 employees or more than one employee, then this strategy is not possible for them. Telegram will be best.
2. And if you make other people admin then it is not right here because it becomes a very risky thing.

About Floating Whats's App Button

Now you people must have been careful about what are the disadvantages and advantages of this WhatsApp floating button, so now it is the turn to learn how we can put WhatsApp animated floating button in blogger website and in which way, here you people. To place the button on your website, you will have to follow some steps and some producers, which I will tell you.

We are going to add WhatsApp animated floating button in blogger website in only two easy ways, you just have to follow my steps.

Step To Follow What'sapp floating Button

1. You will see an HTML code below in a box which you have to add in the  </footer>/</body>  tag so that our floating button will become sticky, and it will start floating.

     <a class='whatsapp-float' href='https://api.whatsapp.com/send?phone=+919999999999' target='_blank'>
		<div class='whatsapp-icon'>
        <svg viewBox="0 0 32 32" class="whatsapp-ico"><path d=" M19.11 17.205c-.372 0-1.088 1.39-1.518 1.39a.63.63 0 0 1-.315-.1c-.802-.402-1.504-.817-2.163-1.447-.545-.516-1.146-1.29-1.46-1.963a.426.426 0 0 1-.073-.215c0-.33.99-.945.99-1.49 0-.143-.73-2.09-.832-2.335-.143-.372-.214-.487-.6-.487-.187 0-.36-.043-.53-.043-.302 0-.53.115-.746.315-.688.645-1.032 1.318-1.06 2.264v.114c-.015.99.472 1.977 1.017 2.78 1.23 1.82 2.506 3.41 4.554 4.34.616.287 2.035.888 2.722.888.817 0 2.15-.515 2.478-1.318.13-.33.244-.73.244-1.088 0-.058 0-.144-.03-.215-.1-.172-2.434-1.39-2.678-1.39zm-2.908 7.593c-1.747 0-3.48-.53-4.942-1.49L7.793 24.41l1.132-3.337a8.955 8.955 0 0 1-1.72-5.272c0-4.955 4.04-8.995 8.997-8.995S25.2 10.845 25.2 15.8c0 4.958-4.04 8.998-8.998 8.998zm0-19.798c-5.96 0-10.8 4.842-10.8 10.8 0 1.964.53 3.898 1.546 5.574L5 27.176l5.974-1.92a10.807 10.807 0 0 0 16.03-9.455c0-5.958-4.842-10.8-10.802-10.8z" fill-rule="evenodd"></path></svg>
</div>
</a>
  

You guys have to change one link because I have marked to  yellow  color which is the link of the contact WhatsApp group or channel.

2. Now we have to give some style and animation to our protein button, which we will give through our CSS code. You guys have to copy the CSS code given below and paste it above the  </head>  tag.

     <style>
  .whatsapp-float {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
  }

  .whatsapp-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #4dc247;
    display: flex;
    justify-content: center;
    align-items: center;
    animation-name: pulse;
    animation-duration: 1.5s;
    animation-timing-function: ease-out;
    animation-iteration-count: infinite;
  }

  @keyframes pulse {
    0% {
      box-shadow: 0 0 0 0 rgba(21, 146, 69, 0.5);
    }
    80% {
      box-shadow: 0 0 0 14px rgba(0, 136, 204, 0);
    }
  }

  .whatsapp-icon svg {
    fill: #fff;
    width: 30px;
    height: 30px;
  }
</style>
  

3. Now you people have to click on the button and if you do it carefully then your or animated floating WhatsApp button will be installed on your blogger website easily. If you people face any problem then you can solve it by talking to us. Do it through our Telegram channel and enjoy and happy blogging.

Conclusion

I hope that you guys would have liked today's article very much on how you guys can add animated floating WhatsApp button in your website. If you guys face any problem then you guys can join our Telegram channel. You can ask us your questions and answers. If you face any kind of problem or face any problem with the tutorial, then you can talk to us directly by commenting or you can contact us directly by clicking on the contact page.

© Tech Shreyansh

Go to Link