widget chatbox email

cocok untuk kalian yang memiliki situs online shop

Hallo semua pada kesempatan kali ini saya akan membagikan cara membuat widget chatbox email.

pada postingan sebelumnya saya sudah pernah membagikan widget chatbox whatsapp jadi jika kalian ingin mencari widget chat kirim menuju whatsapp maka silakan cek postingan saya sebelumnya.

widget chatbox email ini sangat cocok sekali untuk kalian yang memiliki situs jualan seperti toko online maupun landing page.

selain dapat mempercantik tampilan situs kalian juga akan terkesan lebih profesional, dan calon pembeli juga akan lebih mudah saat ingin menghubungi kalian secara langsung.

ok jika kalian ingin membuatnya mari simak caranya di bawah ini.

Cara Membuat Widget Chatbox Email

pastikan template kalian sudah terpasang jQuery jika belum ada, bisa salin kode di bawah ini dan letakkan di atas kode </head> atau &lt;!--</head>--&gt;&lt;/head&gt;

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

lanjut salin css di bawah ini dan letakkan di atas kode ]]></b:skin> atau di atas kode </style>

/* chat box email by wendy code */
.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)}

lanjut letakkan html ini bisa di atas kode footer agar lebih rapih saja, sebenarnya bebas aja selama masih di dalam tag body.

<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>

dan terakhir letakkan jQuery di bawah ini di atas kode </body> atau &lt;!--</body>--&gt;&lt;/body&gt;, bagian yang saya tandai silakan di sesuaikan jika sudah jangan lupa untuk klik simpan.

<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 = 'yourmail@gmail.com', //Alamat Email Anda
        mailsubject = '&subject=Ingin Bertanya ', //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>

ok jadi sekian cara membuat chatbox email di blogger semoga bermanfaat dan terima kasih telah berkunjung.