How to Make a Whatsapp Chat Widget Button

This widget is optional you can choose to add it or not. Some bloggers may choose to keep their WhatsApp privacy, but there are also some who actually write down their WhatsApp number or contact that is easy to contact for business and so on.

That's why we made this tutorial maybe you need this widget. One of the advantages of this widget is that it is easier to customize, you can change the color and width of the widget easily. See how to create a Whatsapp chat widget below:

Demo

To see firsthand how this widget looks, you can directly see it at the link below:

Demo Widget

First Step - Adding CSS Code

The first thing you have to do is go to the Edit HTML template menu and add the CSS code below to the CSS code group on your blog.

/* WhatsApp Chatbox by www.subarna.in */
:root {
  --bottom-position: 0px;
  --side-position: 20px;
  --width: 300px;
  --botton-width: 50px;
  --z-index: 19;
  --corner-radius: 10px;
  --main-background: #fffdfc;
  --chat-background: #dcd8c7;
  --text-color: #08102b;
  --link-color: #72621d;
  --button-background: #9c8321;
  --button-color: #fffdfc;
  --border-color: #eceff3;
  --transition-timing: 0.1s;
  --text-chat-first-line: "Hi! How Can We Help You?";
  --text-chat-second-line: "";
  --text-online: "Our Team Is Online";
  --text-link: "Chat Now!";
}
.liveC {
  line-height: 1.5em;
  color: var(--text-color);
}
.chatB {
  position: fixed;
  bottom: calc(var(--bottom-position) + 75px);
  /* Change 'right' to 'left' to change position */
  right: var(--side-position);
  width: var(--width);
  z-index: var(--z-index);
  background: var(--main-background);
  box-shadow: 0 5px 25px 2px rgb(0 0 0 / 12%);
  border-radius: var(--corner-radius);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: bottom var(--transition-timing) ease-in, opacity var(--transition-timing) ease-in, visibility var(--transition-timing) ease-in;
}
.chT {
  display: flex;
  flex-direction: column;
  padding: 20px;
  font-size: 13px;
}
.chT::after {
  content: var(--text-online);
  font-size: 11px;
  opacity: 0.7;
  text-indent: 16px;
}
.chT span {
  display: inline-block;
  padding: 10px 10px 10px 16px;
  border-radius: 2px 15px 15px;
  background: var(--chat-background);
  color: inherit;
  line-height: 1.5em;
}
.chT span::before {
  content: var(--text-chat-first-line);
  display: block;
}
.chT span::after {
  content: var(--text-chat-second-line);
}
a.chB {
  display: block;
  position: relative;
  padding: 15px 20px;
  text-align: center;
  font-size: 14px;
  color: var(--link-color);
}
a.chB::before {
  content: "";
  position: absolute;
  top: 0;
  left: 20px;
  right: 20px;
  border-top: 1px solid var(--border-color);
}
a.chB::after {
  content: var(--text-link);
}
.chatT {
  position: fixed;
  bottom: calc(var(--bottom-position) + 20px);
  /* Change 'right' to 'left' to change position */
  right: var(--side-position);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--botton-width);
  height: var(--botton-width);
  border-radius: 50%;
  z-index: var(--z-index);
  overflow: hidden;
  background: var(--button-background);
  color: var(--button-color);
  transition: transform var(--transition-timing) ease-in;
}
.chatT::after {
  content: "\2715";
  line-height: 18px;
  font-size: 14px;
  display: none;
}
.chatT svg:not(.line) {
  fill: var(--button-color);
}
.chatI:checked ~ .chatT {
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
}
.chatI:checked ~ .chatT svg {
  display: none;
}
.chatI:checked ~ .chatT::after {
  display: block;
}
.chatI:checked ~ .chatB {
  bottom: calc(var(--bottom-position) + 85px);
  opacity: 1;
  visibility: visible;
}
  

Information:-
In the :root{...} section you can change the color of the header, icon and width of the widget as you wish. Also replace the left text which has been marked with right to change the position of the widget so that it is on the right.

Second Step - Writing HTML Code

There are two options for placing this HTML code, the first is the easiest on the Blogger Layout menu, add a new HTML widget in the sidebar and paste all the HTML code below. The second is to paste all the HTML code below before the </body> tag, it's all the same, it's up to you which way you want to choose.

<div class="liveC" style="font-family:var(--fontB)">
  <input class="chatI hidden" id="forChat" type="checkbox"/>
  <label class="chatT" for="forChat">
    <svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
      <path d="M6.9,48.4c-0.4,1.5-0.8,3.3-1.3,5.2c-0.7,2.9,1.9,5.6,4.8,4.8l5.1-1.3c1.7-0.4,3.5-0.2,5.1,0.5 c4.7,2.1,10,3,15.6,2.1c12.3-1.9,22-11.9,23.5-24.2C62,17.3,46.7,2,28.5,4.2C16.2,5.7,6.2,15.5,4.3,27.8c-0.8,5.6,0,10.9,2.1,15.6 C7.1,44.9,7.3,46.7,6.9,48.4z M21.3,19.8c0.6-0.5,1.4-0.9,1.8-0.9s2.3-0.2,2.9,1.2c0.6,1.4,2,4.7,2.1,5.1c0.2,0.3,0.3,0.7,0.1,1.2 c-0.2,0.5-0.3,0.7-0.7,1.1c-0.3,0.4-0.7,0.9-1,1.2c-0.3,0.3-0.7,0.7-0.3,1.4c0.4,0.7,1.8,2.9,3.8,4.7c2.6,2.3,4.9,3,5.5,3.4 c0.7,0.3,1.1,0.3,1.5-0.2c0.4-0.5,1.7-2,2.2-2.7c0.5-0.7,0.9-0.6,1.6-0.3c0.6,0.2,4,1.9,4.7,2.2c0.7,0.3,1.1,0.5,1.3,0.8 c0.2,0.3,0.2,1.7-0.4,3.2c-0.6,1.6-2.1,3.1-3.2,3.5c-1.3,0.5-2.8,0.7-9.3-1.9c-7-2.8-11.8-9.8-12.1-10.3c-0.3-0.5-2.8-3.7-2.8-7.1 C18.9,22.1,20.7,20.4,21.3,19.8z"/>
    </svg>
  </label>
  <div class="chatB">
    <div class="chT">
      <span><span/>
    </div>
    <!--[ You can add onclick='window.open(this.href, "_blank", "width=640,height=430");return false;' attribute to open new windows ]-->
    <a aria-label="Chat Now" class="chB" href="https://wa.me/+6280000000000" onclick='window.open(this.href, "_blank", "width=640,height=430");return false;' rel="noopener" role="button" target="_blank"/>
  </div>
</div>
  

Information:-
Change the part marked with your Whatsapp number.

To change the default text "Hi! How Can We Help You?" on Whatsapp chat with the text you want, you can use this url encoder. Copy the result from the encode and paste it in the marked section.

Source : www.jagodesain.com