Cara Membuat widget chatbox terkirim ke email otomatis

Hallo sobat Okayim.com , pada kesempatan kali ini saya akan membuat artikel CARA MEMBUAT CHAT BOX EMAIL yang bisa terkirim secara otomatis ke email saat pengunjung mengirimkan pesan chat box nya.

Jika sobat sedang mencari artikel yang membahas Cara Membuat Chatbox Email. Maka sobat okayim mengunjungi artikel yang sangat tepat sekali. Karena saya akan memberikan tutorialnya secara gratis.

Widget Chatbox Email ini sangat cocok untuk sobat yang memiliki website jualan seperti toko online maupun Web landing page. Selain untuk mempercantik blog milik sobat dengan adanya Chatbox di email akan membuat website sobat terlihat lebih profesional dan tentunya bisa mempermudah pengunjung menghubungi sobat selaku pemilik website.

Cara Membuat Chatbox Terkirim Ke Email Otomatis Menggunakan Html CSS Javascript 

Langkah pertama untuk membuat widget Chatbox Email di website / blog seperti biasa sobat masuk ke tema > pilih edit html > lalu pasangkan code dibawah ini tepat di atas code </head> atau &lt;!--</head>--&gt;&lt;/head&gt;

/* chat box email by okayim com */
.wc-bgDefault{background:#f89000} /* ubah warna di sini */
.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 sesuaikan classnya jika berbeda atau hapus bagian ini */
.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)}

Selanjutnya sobat okayim pasang code html di bawah ini bebas mauikanapun. Namun saya sarankan di atas code footer agar tampilanya nanti menjadi lebih rapih.

<div class='wcChatBoxMail'>
<div class='wcChatBoxHeader'><span class='wcChatTitle wc-bgDefault'>Customer Service</span>
<div class='wcChatDesc'>Silahkan beritahu apa yang bisa kami bantu dan kami akan menjawab pertanyaan Anda.</div></div>
<div class='wcChatAdm'><span class='waChatMAil'>Halo, ada yang bisa kami bantu?</span></div>
<div class='wcChatInput'><input id='wcInputBox' placeholder='Tulis pesan Anda disini...' 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>

Langkah terakhir silahkan pasang code jQuery / javascript dibawah ini tepat di atas code </body> atau &lt;!--</body>--&gt;&lt;/body&gt;

Oia bagian yang sudah saya tandai jangan lupa diganti, sobat bisa menyesuaikan dengan kebutuhan sobat.

<script>
//<![CDATA[
//jQuery Widget Chat Box Email By Wendy Code
$('.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 = 'okayimcom@gmail.com', //Alamat Email Anda
        mailsubject = '&subject=kunjungi OKAYIM.COM ', //Subjek Email Namun Hanya Muncul Di SmartPhone Saja
        wcmaillink1 = '',
        wcmaillink2 = '&body= ',
        jarak = '';
    if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
       var wcmaillink = 'mailto:',
       jarak ='<br>';
       wcmaillink1 = '?cc=&bcc=';
    }
    var wcinputchat = $('#wcInputBox').val(), //Mengambil Input Pesan User
        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>

Oke sobat, sekian cara membuat Chatbox Terkirim ke email otomatis di blogger yang bisa saya bagikan untuk sobat.

Jika Sobat Ingin Melihat demo dari Chatbox yang saya bagikan. Sobat okayim dapat mengklik tombol demo yang saya sediakan dibawah ini.

DEMO