How To Add Stylish WhatsApp Chat Button On Blogger

In This Post, I Am Going To Show You How To Add A Stylish WhatsApp Chat Button In Your Blogger Website. This WhatsApp Chat Button Is Much Important To Your Website As It Allows You To Connect To The Audience And Know Their Needs. We Will Go Through The Step-By-Step Process Of Installing The WhatsApp Chat Button On Blogger.

Why Should I Add WhatsApp Chat Button?

One Must Add WhatsApp Chat Button Because Of The Following Reasons:

  • Real-time Support: Users Can Get Immediate Answers To Their Questions, Improving Customer Satisfaction.
  • Personalized Interaction: Engaging Directly With Customers Through WhatsApp Can Create A More Personalized Experience, Building Stronger Relationships.
  • Higher Engagement Rates: Messaging Apps Typically Have Higher Engagement Rates Compared To Email Or Contact Forms.
  • Mobile-friendly: With The Majority Of Internet Users Accessing Websites Through Mobile Devices, A WhatsApp Chat Button Integrates Seamlessly With Their Mobile Experience.
  • Broadcast Messages: Share Updates, Promotions, And News Directly With Your Customers Who Have Opted In For Such Communications.
  • Feedback Loop: Continuous Communication Can Serve As A Feedback Loop, Allowing For Ongoing Improvements Based On Customer Input.

In Nutshell We Can Say That WhatsApp Chat Button Can Be A Best Way To Contact To Your Audience And To Provide Them The Best Customer Support Possible.

Also Read: How To Add Stylish Hero Header In Your Blogger Website.

How To Add Stylish WhatsApp Chat Button On Blogger?

Follow The Below Steps One To Add Stylish WhatsApp Chat Button On Blogger, Make Sure To Follow The Steps In Sequence And Change The Required Data:

  • Step 1: First Of All Go To The Blogger Dashboard And Login Into Your Blog.
How To Add Stylish WhatsApp Chat Button
  • Step 2: Now Go To The Theme Section And Go To The Customize. On The Dropdown, Click On Edit HTML.
  • Step 3: Now Scroll Down To  </style> Or ]]></b:skin> Tag And Add This CSS Code Above It.
/* Whatsapp Chatbox */
:root {
--color-background: #4dc247; /*The background color of the chat button and header*/
  --color-bg-chat: #f0f5fb;
  --color-icon: #fff; /* Chat icon color */
  --color-text: #505050;
  --color-text-alt: #989b9f;
  --chatbox-width: 320px ;
}
.sticky-button{position:fixed;background-color:var(--color-background);bottom:20px;left:20px;width:55px;height:55px;border-radius:50px;box-shadow:0 2px 5px 0 rgba(0,0,0,.1);z-index:20;overflow:hidden;}
.sticky-button a, .sticky-button label{display:flex;align-items:center;width:55px;height:55px;-webkit-transition:all .3s ease-out;transition:all .3s ease-out;}
.sticky-button a svg, .sticky-button label svg{margin:auto;fill:var(--color-icon)}
.sticky-button label svg.svg-2{display:none}
.sticky-chat{position:fixed;bottom:70px;left:20px;width:var(--lebar-chatbox);-webkit-transition:all .3s ease-out;transition:all .3s ease-out;
z-index:21;opacity:0;visibility:hidden;line-height:normal}
.sticky-chat .chat-content{border-radius:10px;background-color:#fff;box-shadow:0 2px 5px 0 rgba(0,0,0,.05);overflow:hidden}
.sticky-chat .chat-header{position:relative;display:flex;align-items:center;padding:15px 20px;background-color:var(--color-background);overflow:hidden}
.sticky-chat .chat-header:after{content:'';display:block;position:absolute;bottom:0;right:0;width:70px;height:65px;background:rgba(0,0,0,.040);border-radius:70px 0 5px 0;}
.sticky-chat .chat-header svg{width:35px;height:35px;flex:0 0 auto;fill:var(--color-icon)}
.sticky-chat .chat-header .title{padding-left:15px;font-size:14px;font-weight:600;font-family:'Roboto', sans-serif;color:var(--color-icon)}
.sticky-chat .chat-header .title span{font-size:11px;font-weight:400;display:block;line-height:1.58em;margin:0;}
.sticky-chat .chat-text{display:flex;flex-wrap:wrap;margin:25px 20px;font-size:12px;color:var(--color-text)}
.sticky-chat .chat-text span{display:inline-block;margin-right:auto;padding:10px 10px 10px 20px;background-color:var(--color-bg-chat);border-radius:3px 15px 15px}
.sticky-chat .chat-text span:after{content:'Just now';display:inline-block;margin-left:15px;font-size:9px;color:var(--color-text-alt)}
.sticky-chat .chat-text span.typing{margin:15px 0 0 auto;padding:10px 20px 10px 10px;border-radius:15px 3px 15px 15px}
.sticky-chat .chat-text span.typing:after, .chat-menu{display:none}
.sticky-chat .chat-text span.typing svg{height:14px;fill:var(--color-text-alt)}
.sticky-chat .chat-button{display:flex;align-items:center;margin-top:15px;padding:12px 20px;border-radius:10px;background-color:#fff;box-shadow:0 2px 5px 0 rgba(0,0,0,.05);overflow:hidden;font-size:12px;color:var(--color-text)}
.sticky-chat .chat-button svg{width:20px;height:20px;fill:var(--color-text-alt);margin-left:auto;transform:rotate(40deg);-webkit-transform:rotate(40deg)}
.chat-menu:checked + .sticky-button label{-webkit-transform: rotate(360deg);transform: rotate(360deg);}
.chat-menu:checked + .sticky-button label svg.svg-1{display:none}
.chat-menu:checked + .sticky-button label svg.svg-2{display:table-cell}
.chat-menu:checked + .sticky-button + .sticky-chat{bottom:90px;opacity:1;visibility:visible}
  • Step 4: Now Scroll Down To The  </body> Tag And Add The HTML Code Above The </body> Tag.
<input class='chat-menu hidden' id='offchat-menu' type='checkbox' />
<div class='sticky-button' id='sticky-button'>
  <label for='offchat-menu'>
    <svg class='svg-1' viewBox='0 0 32 32'><path d='M16,3A13,13,0,0,0,4.53,22.13L3,27.74a1,1,0,0,0,.27,1A1,1,0,0,0,4,29a.84.84,0,0,0,.27,0l5.91-1.65a1,1,0,0,0-.53-1.93L5.42,26.56l1.15-4.3a1,1,0,0,0-.1-.76A11,11,0,1,1,16,27a11.23,11.23,0,0,1-1.84-.15,1,1,0,0,0-1.15.82,1,1,0,0,0,.82,1.15A13,13,0,1,0,16,3Z'></path><path d='M15,11.21l-1.16-1.6a2.06,2.06,0,0,0-1.5-.84,2.08,2.08,0,0,0-1.62.6l-1.2,1.2a2.81,2.81,0,0,0-.8,2.08c0,1.77,1.36,4,4,6.6,3.09,3,5.23,4,6.69,4a2.7,2.7,0,0,0,2-.81l1.2-1.2a2,2,0,0,0-.24-3.11L20.8,17a2.09,2.09,0,0,0-1.83-.3l-1.49.47a.53.53,0,0,1-.26-.09,11.42,11.42,0,0,1-2.35-2.26.31.31,0,0,1,0-.11c.13-.44.35-1.15.5-1.64A2,2,0,0,0,15,11.21Zm1.29,7.63a2.33,2.33,0,0,0,1.75.2l1.54-.46,1.61,1.25L20,21c-.48.47-2.25.33-5.86-3.21-3-2.91-3.41-4.5-3.41-5.18A.89.89,0,0,1,11,12l1.28-1.19,1.18,1.65c-.16.49-.39,1.22-.51,1.65A2.12,2.12,0,0,0,13,15.51,11.24,11.24,0,0,0,16.33,18.84Z'></path></svg>
    <svg class='svg-2' viewbox='0 0 512 512'>
      <path d='M278.6 256l68.2-68.2c6.2-6.2 6.2-16.4 0-22.6-6.2-6.2-16.4-6.2-22.6 0L256 233.4l-68.2-68.2c-6.2-6.2-16.4-6.2-22.6 0-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3l68.2 68.2-68.2 68.2c-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3 6.2 6.2 16.4 6.2 22.6 0l68.2-68.2 68.2 68.2c6.2 6.2 16.4 6.2 22.6 0 6.2-6.2 6.2-16.4 0-22.6L278.6 256z'></path>
    </svg>
  </label>
</div>
<div class='sticky-chat'>
  <div class='chat-content'>
    <div class='chat-header'>
      <svg viewbox='0 0 32 32'><path d='M24,22a1,1,0,0,1-.64-.23L18.84,18H17A8,8,0,0,1,17,2h6a8,8,0,0,1,2,15.74V21a1,1,0,0,1-.58.91A1,1,0,0,1,24,22ZM17,4a6,6,0,0,0,0,12h2.2a1,1,0,0,1,.64.23L23,18.86V16.92a1,1,0,0,1,.86-1A6,6,0,0,0,23,4Z'></path><rect height='2' width='2' x='19' y='9'></rect><rect height='2' width='2' x='14' y='9'></rect><rect height='2' width='2' x='24' y='9'></rect><path d='M8,30a1,1,0,0,1-.42-.09A1,1,0,0,1,7,29V25.74a8,8,0,0,1-1.28-15,1,1,0,1,1,.82,1.82,6,6,0,0,0,1.6,11.4,1,1,0,0,1,.86,1v1.94l3.16-2.63A1,1,0,0,1,12.8,24H15a5.94,5.94,0,0,0,4.29-1.82,1,1,0,0,1,1.44,1.4A8,8,0,0,1,15,26H13.16L8.64,29.77A1,1,0,0,1,8,30Z'></path></svg>
      <div class='title'>Please chat with our team <span>Admin will reply within minutes</span></div>
    </div>
    <div class='chat-text'>
      <span>Hello, how can we help you?</span>
      <span class='typing'><svg viewbox='0 0 512 512'><circle cx='256' cy='256' r='48'></circle><circle cx='416' cy='256' r='48'></circle><circle cx='96' cy='256' r='48'></circle></svg></span>
    </div>
  </div>
  <a class='chat-button' href='https://api.whatsapp.com/send?phone=98576543210&text=Hello' rel='nofollow noreferrer' target='_blank'>
    <span>Start chat...</span>
    <svg viewBox='0 0 32 32'><path class='cls-1' d='M19.47,31a2,2,0,0,1-1.8-1.09l-4-7.57a1,1,0,0,1,1.77-.93l4,7.57L29,3.06,3,12.49l9.8,5.26,8.32-8.32a1,1,0,0,1,1.42,1.42l-8.85,8.84a1,1,0,0,1-1.17.18L2.09,14.33a2,2,0,0,1,.25-3.72L28.25,1.13a2,2,0,0,1,2.62,2.62L21.39,29.66A2,2,0,0,1,19.61,31Z'></path></svg>    
  </a>
</div>
  • Step 5: Now Click On The Save And Publish Button And Check Your Blog With A Stylish WhatsApp Chat Button On The Below Corner.

We Have Successfully Added A Stylish WhatsApp Chat Button In Our Blogger Website. If You Find Any Difficulty While Adding A Stylish WhatsApp Chat Button In Your Blogger Website. You Can Comment In The Section Below.

Conclusion:

In Spite Of The Fact That It Isn’t Required To Add Whatsapp Gadget, You Can Add It Or Not It Relies Upon You. A Few Bloggers Don’t Utilize It To Keep Up With Their WhatsApp Protection, Yet There Are Likewise A Few Bloggers Who Use WhatsApp Numbers Or Contacts To Advance Their Business And Items. Since It Turns Out To Be Extremely Simple To Reach It.

What Is A WhatsApp Chat Button?

It Is Floating Button On Your Website That Can Be Used To Chat With The User On WhatsApp.

Why Does One Need A WhatsApp Chat Button?

This Maybe The Best Option To Connect With The Users And For The Feedback Options.

Does WhatsApp Chat Button Works On PC As Well.

As Long As One Can Login Their WhatsApp Account In Their PC, It Will Work On That Also.

Dive Into The World Of Tech With Me.

Leave a comment