-min.png)
Hello There Friend!
Hope You All Are Fine, In Today's Post I Am Going To Tell You How To Set Up A Floating WhatsApp Chat Button On Your Blog Through Which Users Can Easily Message You On Your WhatsApp. First Of All We Will See Is It Necessary To Add WhatsApp Widget In Your Blogger Template.
Is It Necessary To Add WhatsApp Chat Button On Your Blogger?
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. That Is The Reason We Have Shown Whatsapp Talk Through This Instructional Exercise, Perhaps A Portion Of My Bloggers Need This Gadget. One Of The Upsides Of This Gadget Is That It Is Extremely Simple To Modify, You Can Without Much Of A Stretch Change The Variety And Width Of The Gadget As Per Your Own Requirements.
How To Add Stylish WhatsApp Chat Button In Your Blog?
Follow The Given Steps One By On To Add WhatsApp Chat Button In Your Blog
- Step 1 : Adding CSS.
CSS
/* 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 2 : Now We Will Add HTML Script.
HTML
<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=Assalamualaikum,%20Saya%20ingin%20bertanya' 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>Please Replace 9876543210 With Your Own Number.
Now We Have Completed Adding The WhatsApp Button You Can Also Eidt The Messages Like "Assalamualaikum, Saya%ingin%bertanya" And "Hello, how can we help you?".
Hope You Have Enjoyed It. If You Have Any Problem Regarding Adding WhatsApp Chat Button In Your Blog Please Tell Me In The Comment Section, I Will Fully Try To Resolve It.
Thanks For Reading.
-min.png)