Membuat widget Chatbox Email di Blog

 Halo semuanya, dalam konteks ini saya akan memberi tahu Anda cara membuat widget obrolan email.

 

 Pada postingan saya sebelumnya saya membagikan widget chat whatsapp jadi jika ingin mencari chat kirim whatsapp cek postingan saya sebelumnya. 

Widget obrolan email ini sangat cocok untuk mereka yang memiliki situs penjualan seperti toko online atau halaman arahan. 

 Selain mempercantik tampilan website Anda, juga terlihat lebih profesional dan memudahkan calon pembeli untuk menghubungi Anda secara langsung. 

oke jika ingin melakukannya, mari kita lihat caranya di bawah ini. 

Buat widget obrolan email 

Pastikan template Anda telah menginstal jQuery. Jika Anda belum memilikinya, Anda dapat menyalin kode di bawah ini dan meletakkannya di   </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'/>

terus salin css di bawah ini dan taruh ]]></b:skin>

/* chat box email by Think aHead */ .wc-bgDefault{background:#6232a8} /* 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)}

terus tambahkan kode html ini ke footer agar terlihat lebih bagus. Bahkan, gratis asalkan ada di 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 atas kode di bawah ini </body> atau &lt;!--</body>--&gt;&lt;/body&gt; branding saya bisa dikustomisasi, setelah selesai jangan lupa klik simpan.

<script> //<![CDATA[ //jQuery Widget Chat Box Email By think ahead $('.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 think_email_chat = wcmaillink + email + wcmaillink1 + mailsubject + wcmaillink2 + wcinputchat + '%0A%0A' + jarak + jarak + 'Di kirim via : ' + input_viaUrl; window.open(think_email_chat, '_blank'); window.location.href = input_viaUrl; } ///]]> </script>

Think a Head

subcriber • vidio

SUBSCRIBE •••

subscribe youtube channel saya juga ya teman terima kasih