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 you don't already have one, you can copy the code below and place it above the code </head> or <!--</head>--></head>
<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 Anand Nawal */
.an-bgDefault{background:#f89000} /* ubah warna di sini */
.anChatBoxMail{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;}.anChatBoxHeader,.anChatInput{padding:20px}span.anChatTitle{color:#fff;padding:8px 15px;margin:0 0 10px;display:inline-block;border-radius:20px}.anChatDesc{font-size:14px;line-height:1.8}.anChatAdm{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#anInputBox{border:none;outline:none;width:70%;padding:10px;margin:-10px}
a#anChatSendMail{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#anChatSendMail:hover{opacity:.8}
.anMailChatMenu:checked + .anChatBtnMail{-webkit-transform: rotate(360deg);transform: rotate(360deg)}
.anMailChatMenu:checked + .anChatBtnMail svg.svg-1{display:none}
.anMailChatMenu:checked + .anChatBtnMail svg.svg-2{display:block}
svg{width:22px;height:22px;vertical-align:middle;fill:#fff}
.anMailChatMenu,.anChatBtnMail .svg-2{display:none}
.anChatBtnMail{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}
.anChatBtnMail svg{margin:auto;fill:#fff}
.anChatBtnMail svg.svg-2{display:none}
/* CSS darkmode sesuaikan classnya jika berbeda atau hapus bagian ini */
.darkMode .anChatBoxMail .anChatBoxHeader{background:#2d2d30;color:#fefefe}
.darkMode .anChatAdm,.darkMode .anChatBoxMail{background:#252526;color:#fefefe}
.darkMode span.anChatMail,.darkMode #anChatSendMail,.darkMode #anInputBox{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='anChatBoxMail'>
<div class='anChatBoxHeader'><span class='anChatTitle an-bgDefault'>Customer Service</span>
<div class='anChatDesc'>Silahkan beritahu apa yang bisa kami bantu dan kami akan menjawab pertanyaan Anda.</div></div>
<div class='anChatAdm'><span class='waChatMAil'>Halo, ada yang bisa kami bantu?</span></div>
<div class='anChatInput'><input id='anInputBox' placeholder='Tulis pesan Anda disini...' type='text'/><a class='an-bgDefault' href='javascript:void;' id='anChatSendMail'>Kirim</a></div>
</div>
<input class='anMailChatMenu hidden' id='offanMailChatMenu' type='checkbox'/>
<label class='anChatBtnMail tombol-bukatutup an-bgDefault' for='offanMailChatMenu'>
<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 finally put the jQuery below above the code </body> or <!--</body>--></body> , the part that I marked please be adjusted if it's done don't forget to click save.
<script>
//<![CDATA[
//jQuery Widget Chat Box Email By Anand Nawal
$('.tombol-bukatutup').click(function(){
$('.anChatBoxMail').slideToggle()});
$('#anChatSendMail').click(anboxchat);
function anboxchat() {
var anmaillink = 'https://mail.google.com/mail/u/0/?view=cm&fs=1&tf=1&to=',
email = 'yourmail@gmail.com', //Alamat Email Anda
mailsubject = '&subject=Ingin Bertanya ', //Subjek Email Namun Hanya Muncul Di SmartPhone Saja
anmaillink1 = '',
anmaillink2 = '&body= ',
jarak = '';
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
var anmaillink = 'mailto:',
jarak ='<br>';
anmaillink1 = '?cc=&bcc=';
}
var aninputchat = $('#anInputBox').val(), //Mengambil Input Pesan User
input_viaUrl = location.href;
var an_email_chat = anmaillink + email + anmaillink1 + mailsubject + anmaillink2 + aninputchat + '%0A%0A' + jarak + jarak + 'Di kirim via : ' + input_viaUrl;
window.open(an_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.
