Penulis: Moch Adnan dipublikasikan: 13 Juli 2020
Tombol Order Via WhatsApp Untuk Blogger
Tombol Order Via WhatsApp Untuk Blogger
sobat blogger yang berbahagia, sepertinya penggunaan WhatsApp di era sekarang ini sudah tidak asing lagi bagi semua pengguna smartphone. Hampir semua orang sudah menggunakannya, mulai dari pelajar, mahasiswa, pebisnis, hingga ibu rumah tangga. Semua sudah menggunakan WhatsApp baik chat langsung maupun dalam beberapa grup. Dengan demikian WhatsApp atau sering disingkat WA adalah salah satu sosial media paling populer dan banyak digunakan. 

Peluang ini memberi kesempatan besar buat kamu yang tengah menjual produk secara online agar pemesan bisa langsung order dan chat ke akun WhatsApp kamu.

Keranjang belanja, checkout, form pembelian barang, adalah istilah-istilah yang kerap kita temui dalam sebuah toko online. Kata-kata tersebut sudah seperti jembatan yang menghubungkan kita dengan calon pembeli. Namun, seiring semakin populernya WhatsApp kini kita bisa mencoba menjadikan WhatsApp sebagai penghubung antara saya, kamu dan para pembeli produk toko online. Dengan menggunakan WhatsApp kita berarti melakukan cara mendekatkan Toko online dengan calon pembeli dengan menjadikan WhatsApp yang bisa digunakan untuk transaksi langsung. 

Kabar baiknya adalah pengguna blogger seperti saya dan kamu, kini bisa membuat sekaligus menerapkan tombol Order via WhatsApp di dalam halaman toko online tersebut. Ini semua berkat kebaikan hati seorang founder dan sekaligus pemilik Dunia Blanter yang sudah membagikan sebuah kode script order via WhatsApp yang dapat kita pasang kedalam halaman blog toko online kita. Penasaran seperti apa penampakannya? Silakan klik tombol demo dibawah ini: 


Cara memasang Formulir Order Via WhatsApp di blogger. 


Copy kode CSS dibawah ini. 

<style type="text/css">
/* Default Whatsapp Form CSS by www.idblanter.com */ form.whatsapp-form {     box-shadow: 0 1px 6px rgba(32,33,36,.28);     border-radius: .5rem;     padding: 20px;     box-sizing: border-box;     color: #444;     font-size: 14px;     line-height: 1.5; }  .whatsapp-form a.send_form {     color: #fff;     background: #21a51f;     text-decoration: none;     display: inline-block;     padding: 10px 25px;     border-radius: .3rem;     font-weight: 700;     letter-spacing: .5px;     font-size: 15px; } #text-info span {     display: block;     padding: 10px 15px;     text-align: center;     font-weight: 700;     margin: 15px 0;     border-radius: .5rem; } #text-info span.yes {     background: #c6ffc5;     color: #0ea904; } #text-info span.no {     background: #ffc5c5;     color: #ce0404; } /* Input Field CSS */ .datainput{position:relative;margin:5px 0 20px}.datainput p{font-size:12px;background:#eee;display:inline-block;padding:5px 15px;border-radius:.5rem}.whatsapp-form textarea{min-height:120px}.datainput select{padding:12px 0;color:#555;font-size:14px;width:100%;border:0;border-bottom:1px solid #ddd;outline:none;background:#fff}.datainput input,.datainput textarea{font-size:15px;padding:15px 0;display:block;width:100%;border:none;border-bottom:1px solid #ddd}.datainput input:focus,.datainput textarea:focus{outline:none}.datainput label{color:#999;font-size:14px;font-weight:400;position:absolute;pointer-events:none;left:0;top:18px;transition:.2s ease all}.datainput input:focus~label,.datainput input:valid~label,.datainput textarea:focus~label,.datainput textarea:valid~label{top:-10px;font-size:14px;color:#21a51f}#notif-license span{font-size:40px}#notif-license{display:none;position:fixed}.bar{position:relative;display:block;width:100%}.bar:before,.bar:after{content:'';height:2px;width:0;bottom:1px;position:absolute;background:#21a51f;transition:.2s ease all}.bar:before{left:50%}.bar:after{right:50%}.datainput input:focus~.bar:before,.datainput input:focus~.bar:after,.datainput textarea:focus~.bar:before,.datainput textarea:focus~.bar:after{width:50%}.indigox{background:#3f51b5}.orangex{background:#ff9800}.pinkx{background:#e91e63}.bluex{background:#2196F3}.purplex{background:#9c27b0}.redx{background:#F44336}.greenx{background:#4CAF50}.highlight{position:absolute;height:50%;width:100px;top:25%;left:0;pointer-events:none;opacity:.5}.datainput input:focus~.highlight,.datainput textarea:focus~.highlight{animation:inputHighlighter .3s ease}.datainput input:focus~label,.datainput input:valid~label,.datainput textarea:focus~label,.datainput textarea:valid~label{top:-10px;font-size:13px;color:#21a51f} </style>
<form class="whatsapp-form"> 
<div class="datainput"> <input class="validate" id="wa_name" name="name" required="" type="text" value=''/> <span class="highlight"></span><span class="bar"></span> <label>Your Name</label> </div>
<div class="datainput"> <input class="validate" id="wa_email" name="email" required="" type="email" value=''/> <span class="highlight"></span><span class="bar"></span> <label>Email Address</label> </div>
<div class="datainput"> <select id="wa_select">   <option hidden='hidden' selected='selected' value='default'>Select Option</option>   <option value="1">List Option 1</option>   <option value="2">List Option 2</option>   <option value="3">List Option 3</option> </select> </div>
<div class="datainput"> <input class="validate" id="wa_number" name="count" required="" type="number" value=''/> <span class="highlight"></span><span class="bar"></span> <label>Input Number</label> </div>
<div class="datainput"> <input class="validate" id="wa_url" name="url" required="" type="url" value=''/> <span class="highlight"></span><span class="bar"></span> <label>URL/Link</label> <p>Link blog Anda, gunakan http:// atau https://</p> </div>
<div class="datainput"> <textarea id='wa_textarea' placeholder='' maxlength='5000' row='1' required=""></textarea> <span class="highlight"></span><span class="bar"></span> <label>Description</label> </div>
 <a class="send_form" href="javascript:void" type="submit" title="Send to Whatsapp">Send to Whatsapp</a> <div id="text-info"></div> </form>
Tips : Merubah dan meyesuaikan pada masing-masing kolom dengan cara melakukan pengeditan pada bagian kode yang sengaja saya warnai merah 

Gabungkan code Javascript dibawah ini, kedalam kode CSS diatas. 

<script type="text/javascript"> //<![CDATA[ $(document).on('click','.send_form', function(){ var input_blanter = document.getElementById('wa_email'); /* Whatsapp Settings */ var walink = 'https://web.whatsapp.com/send',     phone = '+6281977094280',     walink2 = 'Halo saya ingin ',     text_yes = 'Terkirim.',     text_no = 'Isi semua Formulir lalu klik Send.'; /* Smartphone Support */ if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) { var walink = 'whatsapp://send'; } if("" != input_blanter.value){  /* Call Input Form */ var input_select1 = $("#wa_select :selected").text(),     input_name1 = $("#wa_name").val(),     input_email1 = $("#wa_email").val(),     input_number1 = $("#wa_number").val(),     input_url1 = $("#wa_url").val(),     input_textarea1 = $("#wa_textarea").val(); /* Final Whatsapp URL */ var blanter_whatsapp = walink + '?phone=' + phone + '&text=' + walink2 + '%0A%0A' +     '*Name* : ' + input_name1 + '%0A' +     '*Email Address* : ' + input_email1 + '%0A' +     '*Select Option* : ' + input_select1 + '%0A' +     '*Input Number* : ' + input_number1 + '%0A' +     '*URL/Link* : ' + input_url1 + '%0A' +     '*Description* : ' + input_textarea1 + '%0A'; /* Whatsapp Window Open */ window.open(blanter_whatsapp,'_blank'); document.getElementById("text-info").innerHTML = '<span class="yes">'+text_yes+'</span>'; } else { document.getElementById("text-info").innerHTML = '<span class="no">'+text_no+'</span>'; } }); //]]> </script>

Tips : Ubah nomor whatApp seperti ini +6281977094280dengan nomor WA sobat

Seperti biasa setelah berada dalam dasbor blogger, buat "Halaman baru" kemudian paste kan  kode CSS dan script diatas gabung kedalam satu halaman, klik 'pratinjau halaman' jika sudah dirasa cukup kemudian pilih "publikasikan" dan selesai.
 

Tombol Order Via WhatsApp Untuk Blogger
Formulir Order Via WhatsApp Untuk Blogger

Usahakan nomor WhatsApp kita jangan sampai salah penulisannya harus dimulai dengan +628xxxxx supaya begitu seseorang mengklik "Order Sekarang" tidak sampai keluar kata "WhatsApp tidak diketahui" sehingga kita pun terhindar dari resiko kehilangan pembeli. Selain itu, kita hanya tinggal membuat halaman 'Komfirmasi pembayaran' halaman 'cek ongkos kirim' dan menambahkan halaman 'syarat dan ketentuan' jika di rasa perlu, kemudian menggabungkannya dalam toko online kita. 

Baca juga :

Insyaallah next artikel kita bisa berjumpa lagi dengan artikel yang membahas tentang ketiga soal diatas, agar supaya secepatnya website toko online kita langsung online dan mampu menggaet banyak pembeli. Demikian saja artikel kali ini, jangan lupa share, like, dan komennya ya sob...