--> -->

WhatsApp chat button on website HTML code | WhatsApp chat widget | Tech Mahesh

Hello,  Welcome to Tech Mahesh. Today, We are going to see how to create a WhatsApp widget in our blogger template. I will explain everything in a simple step. 

You create a WhatsApp widget. Apply a beautiful widget on your blogger template. 



How to make a WhatsApp chat widget on blogger 

WhatsApp chat widget on blogger


WhatsApp widget

WhatsApp widget is a tool for your blogger templates that shows everywhere on your widget. With the help of this widget, users contact you through WhatsApp. 


Advantages

WhatsApp widget on your website is advantageous for you because it can be helpful to contact your users. With the help of the WhatsApp widget. You easily interact with your user and hear them. It will help to create a strong bond between you and your user. 


Disadvantages

I don't see any disadvantages. have a WhatsApp widget on your website. WhatsApp widget has no JavaScript. Applying it to your website will not slow your website's loading. You can use this WhatsApp widget. 


Create a WhatsApp widget

It is a simple step. Easy to apply the WhatsApp widget on your blogger website on your website. You follow a simple process.

  

Where are going to co complete to eat into two Steps, so follow these steps very carefully: 

Video Customization Tutorial

Step.01 Go to blogger.com 

Step.02 Click on a theme 

Step.03 Click on Arrow or edit HTML 

Free WhatsApp Chat Widget for your website







Step.04 Then find this code 

]]></b:skin> 


How do I create a chat widget on WhatsApp?



Adding CSS code

 Then copy and paste the CSS given below about it. 

 
/* Chatbox Whatsapp */
:root {
--warna-background: #4dc247;
--warna-bg-chat: #f0f5fb;
--warna-icon: #fff;
--warna-text: #505050;
--warna-text-alt: #989b9f;
--lebar-chatbox: 320px;
}
.sticky-button{
display: flex;
align-items: center;
justify-content: center;
position: fixed;
right: 20px;
bottom: 76px;
width: 45px;
height: 45px;
background-color: #fefefe;
border-radius: 20px;
box-shadow: 0 10px 20px 0 rgba(30,30,30,.1);
}
.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:#4dc247}
.sticky-button label svg.svg-2{display:none}
.sticky-chat{position:fixed;bottom:70px;right: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(--warna-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(--warna-icon)}
.sticky-chat .chat-header .title{padding-left:15px;font-size:14px;font-weight:600;font-family:'Roboto', sans-serif;color:var(--warna-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(--warna-text)}
.sticky-chat .chat-text span{display:inline-block;margin-right:auto;padding:10px 10px 10px 20px;background-color:var(--warna-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(--warna-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(--warna-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(--warna-text)}
.sticky-chat .chat-button svg{width:20px;height:20px;fill:var(--warna-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: 77px;
right: 81px;
opacity: 1;
visibility: visible;
} 

Adding HTML code 

Chat box WhatsApp

You can place this HTML code in two places.


First is the easiest one on the blogger layout, Just add a new HTML widget in the sidebar and paste all the HTML code below. 


Whatsapp Widget for website  WidgetWhats



Second is to paste all the HTML code above the </body> tag, 

How do I add a WhatsApp widget to my website?

everything will be the same, it's up to you which method to choose


 <input class='chat-menu hidden' id='offchat-menu' type='checkbox'/>

<div class='sticky-button' id='sticky-button'>

<label for='offchat-menu'>



<svg height="30px" viewBox="-1 0 511 512" width="30px" xmlns="http://www.w3.org/2000/svg"><path d="m435.1875 74.28125c-47.902344-47.898438-111.59375-74.28125-179.335938-74.28125-53.28125 0-104.277343 16.34375-147.472656 47.269531-4.492187 3.214844-5.527344 9.460938-2.3125 13.953125 3.21875 4.492188 9.464844 5.523438 13.953125 2.308594 39.78125-28.476562 86.75-43.53125 135.832031-43.53125 128.816407 0 233.617188 104.800781 233.617188 233.621094 0 128.816406-104.800781 233.617187-233.617188 233.617187-39.242187 0-78.050781-9.917969-112.230468-28.683593-2.269532-1.242188-4.929688-1.558594-7.421875-.886719l-111.320313 30.085937 30.351563-108.320312c.734375-2.617188.371093-5.417969-1.003907-7.757813-20.933593-35.671875-31.996093-76.492187-31.996093-118.054687 0-49.085938 15.054687-96.054688 43.53125-135.832032 3.214843-4.488281 2.179687-10.734374-2.308594-13.949218-4.492187-3.214844-10.738281-2.183594-13.953125 2.308594-30.925781 43.191406-47.269531 94.1875-47.269531 147.472656 0 43.683594 11.261719 86.617187 32.609375 124.460937l-33.96875 121.21875c-.972656 3.464844-.003906 7.183594 2.523437 9.738281 1.90625 1.917969 4.472657 2.960938 7.105469 2.960938.871094 0 1.746094-.113281 2.609375-.347656l124.464844-33.636719c36.238281 19.128906 77.042969 29.222656 118.273437 29.222656 67.746094 0 131.4375-26.378906 179.335938-74.285156 47.902344-47.898437 74.285156-111.589844 74.285156-179.335937 0-67.742188-26.378906-131.429688-74.28125-179.335938zm0 0"/><path d="m419.769531 374.839844c4.59375 3.066406 10.804688 1.828125 13.871094-2.765625 23.4375-35.117188 35.828125-76.078125 35.828125-118.457031 0-57.0625-22.21875-110.710938-62.5625-151.054688s-93.988281-62.5625-151.054688-62.5625c-57.066406 0-110.714843 22.21875-151.058593 62.5625s-62.5625 93.992188-62.5625 151.058594c0 38.007812 10.113281 75.328125 29.246093 107.929687l6.453126 11-19.550782 69.773438c-.972656 3.460937-.007812 7.179687 2.523438 9.734375 2.53125 2.554687 6.242187 3.554687 9.714844 2.617187l72.03125-19.46875 10.59375 5.816407c31.242187 17.152343 66.722656 26.214843 102.605468 26.214843 42.382813 0 83.34375-12.390625 118.457032-35.832031 4.59375-3.0625 5.832031-9.273438 2.765624-13.867188-3.066406-4.59375-9.273437-5.832031-13.867187-2.765624-31.816406 21.238281-68.9375 32.464843-107.355469 32.464843-32.527344 0-64.679687-8.210937-92.980468-23.746093l-14.125-7.757813c-2.265626-1.242187-4.925782-1.558594-7.421876-.886719l-58.9375 15.929688 15.953126-56.925782c.730468-2.617187.371093-5.417968-1.003907-7.757812l-8.609375-14.667969c-17.332031-29.535156-26.492187-63.355469-26.492187-97.808593 0-106.761719 86.859375-193.617188 193.621093-193.617188 106.761719 0 193.617188 86.855469 193.617188 193.621094 0 38.410156-11.226562 75.53125-32.464844 107.351562-3.066406 4.59375-1.828125 10.800782 2.765625 13.867188zm0 0"/><path d="m219.304688 222.902344.660156-.769532c8.957031-10.054687 6.695312-21.863281 3.21875-29.996093-5.136719-12.011719-18.574219-42.714844-19.847656-45.621094-1.984376-5.015625-8.605469-12.960937-21.921876-13.238281-10.382812-.210938-13.796874.082031-14.59375.179687-.082031.007813-.164062.019531-.242187.03125-1.53125.222657-37.546875 6.050781-43.765625 60.03125-2.859375 24.816407 8.632812 54.378907 34.15625 87.875 28.257812 37.082031 54.234375 59.164063 92.648438 78.75 19.128906 9.753907 47.070312 21.171875 73.082031 21.171875.84375 0 1.6875-.011718 2.523437-.039062 29.214844-.851563 44.816406-12.992188 52.757813-23.027344 8.429687-10.652344 10.191406-21.148438 10.445312-22.96875.167969-1.15625.574219-4.804688.832031-14.308594.359376-13.316406-7.265624-20.308594-12.179687-22.53125-2.777344-1.378906-31.410156-15.574218-43.148437-21.265625-7.925782-3.847656-19.578126-6.042969-30.066407 5.335938-.054687.058593-.105469.117187-.15625.167969-1.417969 1.238281-2.820312 3.085937-7.082031 8.789062-2.625 3.511719-7.863281 10.519531-10.089844 12.859375-4.703125.332031-20.429687-6.59375-42.722656-23.855469-14.050781-10.882812-29.054688-27.824218-37.355469-42.175781-.082031-.203125-.132812-.574219-.109375-.761719 3.441406-3.539062 9.042969-10.042968 12.957032-14.632812zm12.261718 73.382812c6.664063 5.160156 19.730469 14.773438 32.363282 21.183594 5.972656 3.027344 24.148437 12.25 35.355468 2.332031 3.09375-2.738281 7.488282-8.507812 13.355469-16.359375 1.691406-2.261718 3.769531-5.039062 4.574219-6 .523437-.476562.957031-.945312 1.351562-1.375 1.800782-1.953125 2.621094-2.84375 6.632813-.898437 12.046875 5.84375 42.101562 20.75 43.179687 21.28125.371094.371093.949219 1.578125.882813 3.980469-.222657 8.289062-.546875 11.285156-.613281 11.847656-.042969.207031-.023438.082031-.046876.308594-.117187.679687-1.375 7.382812-6.886718 13.964843-7.773438 9.289063-20.246094 14.246094-37.074219 14.734375-22.5.667969-48.269531-9.945312-65.941406-18.957031-35.953125-18.335937-59.214844-38.136719-85.828125-73.058594-21.96875-28.828125-32.410156-54.234375-30.195313-73.464843 4.171875-36.207032 24.015625-41.894532 26.675781-42.496094.9375-.058594 4.109376-.191406 11.648438-.035156 2.402344.050781 3.578125.6875 3.933594 1.074218.496094 1.132813 14.59375 33.335938 19.855468 45.648438 2.628907 6.152344 1.015626 7.964844.238282 8.835937-.140625.15625-.261719.296875-.367188.414063l-.574218.675781c-5.777344 6.769531-9.84375 11.375-12.085938 13.675781-7.382812 7.585938-6.683594 18.085938-2.902344 24.632813 9.617188 16.664062 26.289063 35.523437 42.46875 48.054687zm0 0"/><path d="m83.585938 91.351562c2.402343 0 4.8125-.859374 6.726562-2.601562 4.085938-3.714844 4.390625-10.039062.675781-14.125-3.71875-4.085938-10.039062-4.386719-14.128906-.671875l-.003906.003906c-4.085938 3.714844-4.382813 10.035157-.667969 14.125 1.972656 2.167969 4.679688 3.269531 7.398438 3.269531zm0 0"/><path d="m392.433594 390.871094-.003906.007812c-3.714844 4.085938-3.410157 10.40625.675781 14.121094 1.914062 1.742188 4.320312 2.601562 6.722656 2.601562 2.71875 0 5.429687-1.105468 7.402344-3.277343 3.71875-4.085938 3.414062-10.410157-.671875-14.125-4.085938-3.714844-10.410156-3.414063-14.125.671875zm0 0"/></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'> Tech Mahesh <span>Discuss about web designing & Tech</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=918432625538' 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>



Instructions: 

Find Tech Mahesh [marked with yellow] and replace it with your title 

find 8432625538 [marked with green] and replace it with your WhatsApp number.