How To Make a Chat Widget in Blogger

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.

View Demo

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.