Join our telegram group Join Now!

How To Make a Chat Widget in Blogger

This Widget will add a cool floating chat button in your blogger that will look very awesome
Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated

Introduction

Welcome to my blog SR7Themes!
Today the topic is How To Make a Chat Widget in Blogger Hope this post might be useful to you and please stay tuned to our blog for further updates. Remember the end contains surprises!


Chat Widget in Blogger


Hello all on this occasion I will share how to create an email chatbox widget.


This email chatbox widget is perfect for those of you who have sales sites such as online stores or landing pages.

Besides being able to beautify the appearance of your site, it will also seem more professional, and prospective buyers will also find it easier to contact you directly.

ok if you want to make it let's see how below.

How to Create an Email Chatbox Widget

make sure your template has jQuery installed, if it doesn't already exist, you can copy the code below and place it above the code </head> or &lt;!--</head>--&gt;&lt;/head&gt;

<script async='async' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'/>

further copy the css below and place it above the code ]]></b:skin>



/* chat box email by SR7Themes */
.wc-bgDefault{background:#f89000} /* code by SR7Themes.eu.org */
.wcChatBoxMail{position:fixed;z-index:97;display:none;background:#fff;color:#444;box-shadow:0px 4px 10px 2px rgba(0,0,0,.06);border:1px solid #eee;border-radius:10px;bottom:80px;right:28px;max-width:320px;}.wcChatBoxHeader,.wcChatInput{padding:20px}span.wcChatTitle{color:#fff;padding:8px 15px;margin:0 0 10px;display:inline-block;border-radius:20px}.wcChatDesc{font-size:14px;line-height:1.8}.wcChatAdm{height:200px;background:#f4f5f9;padding:20px}span.waChatMAil{background:#fff;border:1px solid #ddd;font-size:14px;padding:10px 25px;display:inline-block;border-radius:10px}input#wcInputBox{border:none;outline:none;width:70%;padding:10px;margin:-10px}
a#wcChatSendMail{color:#555;width:55px;margin:-10px;float:right;font-weight:700;font-size:14px;padding:10px;background:#f0f5fb;border-radius:15px 3px 15px 15px;text-decoration:none}
a#wcChatSendMail:hover{opacity:.8}
.wcMailChatMenu:checked + .wcChatBtnMail{-webkit-transform: rotate(360deg);transform: rotate(360deg)}
.wcMailChatMenu:checked + .wcChatBtnMail svg.svg-1{display:none}
.wcMailChatMenu:checked + .wcChatBtnMail svg.svg-2{display:block}
svg{width:22px;height:22px;vertical-align:middle;fill:#fff}
.wcMailChatMenu,.wcChatBtnMail .svg-2{display:none}
.wcChatBtnMail{position:fixed;bottom:20px;right:20px;border-radius:50px;z-index:20;overflow:hidden;display:flex;align-items:center;justify-content:center;width:50px;height:50px;-webkit-transition:all .2s ease-out;transition:all .2s ease-out}
.wcChatBtnMail svg{margin:auto;fill:#fff}
.wcChatBtnMail svg.svg-2{display:none}
  
/* CSS darkmode */
.darkMode .wcChatBoxMail .wcChatBoxHeader{background:#2d2d30;color:#fefefe}
.darkMode .wcChatAdm,.darkMode .wcChatBoxMail{background:#252526;color:#fefefe}
.darkMode span.waChatMAil,.darkMode #wcChatSendMail,.darkMode #wcInputBox{background:#2d2d30;color:#fefefe;border-color:rgba(255,255,255,.1)}

then put this html above the footer code to make it more neat, actually it's free as long as it's still in the body tag.

<div class='wcChatBoxMail'>
<div class='wcChatBoxHeader'><span class='wcChatTitle wc-bgDefault'>Customer Service</span>
<div class='wcChatDesc'>Please let us know what we can help you with and we'll answer your questions.</div></div>
<div class='wcChatAdm'><span class='waChatMAil'>Hello, ada yang bisa kami bantu?</span></div>
<div class='wcChatInput'><input id='wcInputBox' placeholder='Write your message here...' type='text'/><a class='wc-bgDefault' href='javascript:void;' id='wcChatSendMail'>Kirim</a></div>
</div>
<input class='wcMailChatMenu hidden' id='offwcMailChatMenu' type='checkbox'/>
<label class='wcChatBtnMail tombol-bukatutup wc-bgDefault' for='offwcMailChatMenu'>
<svg class='svg-1' viewBox='0 0 32 32'><g><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'/><rect x='19' y='9' width='2' height='2'/><rect x='14' y='9' width='2' height='2'/><rect x='24' y='9' width='2' height='2'/><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'/></g></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>

and lastly place the jQuery below above the code </body> or &lt;!--</body>--&gt;&lt;/body&gt;, the part that I marked please adjust if it's done don't forget to click save.



<script>
//<![CDATA[
//jQuery Widget Chat Box Email By SR7Themes
$('.tombol-bukatutup').click(function(){
$('.wcChatBoxMail').slideToggle()});
$('#wcChatSendMail').click(wcboxchat);
function wcboxchat() {
    var wcmaillink = 'https://mail.google.com/mail/u/0/?view=cm&fs=1&tf=1&to=',
        email = '[email protected]', //Your Email Address
        mailsubject = '&subject= Want to ask ', //Email Subject But Appears On Smartphone Only
        wcmaillink1 = '',
        wcmaillink2 = '&body= ',
        jarak = '';
    if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
       var wcmaillink = 'mailto:',
       distance ='<br>';
       wcmaillink1 = '?cc=&bcc=';
    }
    var wcinputchat = $('#wcInputBox').val(), //Taking User Message Input
        input_viaUrl = location.href;
    var wendy_email_chat = wcmaillink + email + wcmaillink1 + mailsubject + wcmaillink2 + wcinputchat + '%0A%0A' + jarak + jarak + 'Di kirim via : ' + input_viaUrl;
    window.open(wendy_email_chat, '_blank');
    window.location.href = input_viaUrl;
}
///]]>
  </script>

ok so that's how to make an email chatbox on blogger, hopefully it's useful and thank you for visiting.

Note: Don't Forget to save your theme.

Conclusion

I expressed my views on the topic 'How To Make a Chat Widget in Blogger'. Hope you are furnished my opinion. The post mustn't be copied without prior permission by emailing or telegram.

Source:
https://www.sr7themes.eu.org/2022/03/how-to-make-chat-widget-in-blogger.html?hl=ar

About the Author

Hey there! My name is Saim Rahmani aka Saim, a professional Web Designer, Graphic Designer, UI / Blogger as well as Content Creator. I love to Code

Buy Me A Coffee

إرسال تعليق

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.