Di Jaman yang serba cepat seperti saat ini kebanyakan orang ingin serba cepat termasuk dalam perihal Belanja Online. Dalam kesempatan ini kami ingin berbagi sedikit pengetahuan dalam perihal Widget Popup Form Order Menggunakan jejaring sosial WhatsApp yang banyak digunakan oleh kalangan kecil hingga kalangan Atas, dan perta kami akan membahas kegunaan WhatsApp untuk para pembisnis sebelum membahas bagaimana Cara Membuat dan Memasang Popup Form Order Kirim Langsung ke WhatsApp.
Aplikasi WhatsApp terbagi dalam dua jenis yaitu?
- WhatsApp biasa
- WhatsApp Business
WhatsApp biasa kita tidak perlu bahas disini karena sudah banyak yang tahu fitur yang di gunakan dan kita lanjut ke WhatsApp Business.
WhatsApp Business adalah aplikasi yang dapat diunduh secara gratis dan dirancang khusus untuk memenuhi kebutuhan bisnis kecil. Aplikasi ini mempermudah Anda berkomunikasi dengan pelanggan secara pribadi, mempromosikan produk dan layanan, serta menjawab pertanyaan selama pengalaman berbelanja mereka. Anda juga dapat membuat katalog untuk menampilkan produk dan layanan Anda, sekaligus menggunakan fitur khusus untuk mengotomatiskan, menyortir, dan merespons pesan dengan cepat.
WhatsApp juga dapat membantu bisnis menengah dan besar menyediakan dukungan pelanggan dan mengirim notifikasi penting ke pelanggan Anda. Pelajari selengkapnya mengenai API WhatsApp Business. Selengkapnya kunjungi WhatsApp Business. Lanjut ke pembahasan Cara pembuatan dan memasang Popup WhatsApp.
Cara Membuat dan Memasang Popup Form Order Kirim Langsung ke WhatsApp.
Dalam pembuatan Popup WhatsApp ada beberapa langkah yang perlu dilakukan, Dari pemasangan higga cara menggunakan Popup Form Order ke WhatsApp, Tahapan pembuatan atau pemasangan sebagai berikut.
1. Cara Membuat dan Memasang CSS Popup Form Order WhatsApp
- Masuk ke blogger Anda
- Pilih web/ Blog yang ingin anda pasang Popup Form Order WhatsApp
- Pilih Tema
- Pilih Navigasi Down
- Pilih Edit HTML
- Lihat Contoh gambar di bawah.
2. Pasang CSS Popup Form Order WhatsApp
Salin / Copy CSS Popup Form Order WhatsApp sebagai berikut.
[code type="CSS"] <link href='//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css' rel='stylesheet'/> <link href='//dl.dropboxusercontent.com/s/xsb3qfnasnmd9ib/WhatsApp.css' rel='stylesheet'/>[/code]
[code type="JQuery"] <script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>[/code]
3. Letakan CSS Popup Form Order WhatsApp
Cara meletakan WhatsApp.css dan JQuery, Silahkan cari code <head> dan leyakan CSS tepat di bawah <head> seperti contoh di gambar berikut lalu simpan dahulu Tema. Untuk tambahan bila anda ingin menyimpan JQuery secara terpisah Anda bisa menyimpan JQuery tersebut tepat di atas Code </body>.
4. Cara Pemasangan JavaScript Popup Form Order WhatsApp
Cara Masangan JavaScript Popup Form Order WhatsApp, Cari code </body> dengan cara tekan CTRL+F di Tema anda lalu masukan ke kotak pencarian tags yang ada di tema dan Enter.
Contoh Masangan JavaScript Popup Form Order WhatsApp
JavaScript Popup Form Order WhatsApp
[code type="JavaScript"] <script type='text/javascript'> /*! Name: JS Tombol klik untuk Order Via WhatsApp V2.0.0 | Version: 2.0.0 (Oktober 2020) | Author: Indra LKM (B575ID) | Author URL 1: https://www.b575.co.id/ | Author URL 2: https://jasa.b575.co.id/ */ function openForm() { document.getElementById("myWA").style.display = "block"; } function closeForm() { document.getElementById("myWA").style.display = "none"; }; $('.whatsapp-btn').click(function(){ $('#whatsapp').toggleClass('toggle'); }); // Onclick Whatsapp Sent! $('#whatsapp .submit').click(WhatsApp); $("#whatsapp input, #whatsapp textarea").keypress(function() { if (event.which == 13) WhatsApp(); }); var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/; function WhatsApp() { var ph = ''; if ($('#whatsapp .nama').val() == '') { // Cek Nama ph = $('#whatsapp .nama').attr('placeholder'); alert('Silahkan tulis ' + ph); $('#whatsapp .nama').focus(); return false; } else if ($('#whatsapp .alamat').val() == '') { // Cek Alamat ph = $('#whatsapp .alamat').attr('placeholder'); alert('Silahkan tulis ' + ph); $('#whatsapp .alamat').focus(); return false; } else if ($('#whatsapp .nomor').val() == '') { // Cek Nomor ph = $('#whatsapp .nomor').attr('placeholder'); alert('Silahkan tulis ' + ph); $('#whatsapp .nomor').focus(); return false; } else if ($('#whatsapp .paket').val() == '') { // Cek Paket ph = $('#whatsapp .paket').attr('placeholder'); alert('Silahkan tulis ' + ph); $('#whatsapp .paket').focus(); return false; } else if ($('#whatsapp .pesan').val() == '') { // Cek Pesan ph = $('#whatsapp .pesan').attr('placeholder'); alert('Silahkan tulis ' + ph); $('#whatsapp .pesan').focus(); return false; } else { if (!confirm("Klik oke untuk kirim pesan via WhatsApp ke Kami")) { window.open("https://www.whatsapp.com/download/"); } else { // Check Device (Mobile/Desktop) var url_wa = 'https://web.whatsapp.com/send'; if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) { url_wa = 'whatsapp://send/'; } // Get Value var tujuan = $('#whatsapp .tujuan').val(), via_url = location.href, nama = $('#whatsapp .nama').val(), alamat = $('#whatsapp .alamat').val(), nomor = $('#whatsapp .nomor').val(), paket = $('#whatsapp .paket').val(), pesan = $('#whatsapp .pesan').val(); $(this).attr('href', url_wa + '?phone=62 ' + tujuan + '&text=Hey Admin.%0ASaya: ' + nama + ' %0AAlamat:%20' + alamat +' %0ANo.tlp:%20'+ nomor +'%0AOrder:%20'+ paket + '%0APesan%20Lengkap:%20' + pesan + '%0AMohon di proses Terimakasih.'+ '%0Avia ' + via_url); var w = 960, h = 540, left = Number((screen.width / 2) - (w / 2)), tops = Number((screen.height / 2) - (h / 2)), popupWindow = window.open(this.href, '', 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=1, copyhistory=no, width=' + w + ', height=' + h + ', top=' + tops + ', left=' + left); popupWindow.focus(); return false; } } } </script> [/code]
Letakan JavaScript di atas tepat di atas code </body> lalu simpan Tema.
5. Cara Pemasangan Widget Popup Form Order WhatsApp
Dalam hal ini kita bisa memasang Widget Popup Form Order WhatsApp dengan dua cara, Yaitu dengan cara memasang Script HTML di Tema dan bisa juga di pasang dalam Widget Tata Letak ( Layout ) Widget HTML. Kali ini kita akan bahas kedua cara tersebut / kita jelaskan kedua cara tersebut.
1.5 Cara Masangan Popup Form Order WhatsApp di HTML / dalam Tema.
Cari Code </body> dengan cara tekan CTRL+F di Tema anda lalu masukan ke kotak pencarian tags yang ada di tema dan Enter.
[code type="HTML"] <div class="chat-popup" id="myWA"> <div class="form-container"> <div class="wa-title"><i class="fa fa-whatsapp fa-1x"></i> WhatsApp</div> <div id="whatsapp" class="toggle"> <input class="tujuan" type="hidden" value="081222xxxxxx" /> <!-- No. WhatsApp --> <label><i class="fa fa-user-secret"> Nama Lengkap</i> <input class="nama" placeholder="" type="text" /> </label> <label><i class="fa fa-map-marker"> Alamat</i> <input class="alamat" placeholder="" type="alamat" /> </label> <label><i class="fa fa-mobile"> No. WA</i> <input class="nomor" placeholder="" type="nomor" /> </label> <label><i class="fa fa-opencart"> Order</i> <select class="paket" id="paket"> <optgroup label="Optgroup 1"> <option value="Option_1">Option_1 </option><option value="Option_2">Option_2 </option><option value="Option_3">Option_2 </option> </optgroup> <optgroup label="Optgroup 2"> <option value="Option_2-1">Option_2-1 </option><option value="Option_2-2">Option_2-2 </option><option value="Option_2-3">Option_2-3 </option> </optgroup> </select> </label> <label><i class="fa fa-calculator"> Pesan Lengkap</i> <textarea class="pesan" placeholder=""></textarea> </label> <a class="submit"><i class="fa fa-paper-plane fa-1x"> <b>Kirim Pesan</b></i></a> </div> <button type="button" class="btn cancel" onclick="closeForm()">Tutup</button> </div> </div> <button class="open-button" onclick="openForm()"><i class="fa fa-whatsapp fa-3x" title="Kirim Formulir Orderan Anda dan Kami akan segera Memproses orderan Anda"></i></button> [/code]
2.5 Cara Masangan Popup Form Order WhatsApp di Tata Letak (Layout) Widget HTML
- Klik Tata Letak / (Layout)
- Cari Widget Footer
- Tambahkan Gadget
- Tambahkan Widget HTML / JavaScript
- Masukan Script HTML di di atas lalu simpan.
6. Cara Menggunakan Popup Form Order WhatsApp
- Ganti Nomber : Cari <input class="tujuan" type="hidden" value="081222xxxxxx"> di Script HTML No 5, Lalu yang warna merah Ganti dengan Nomor kontak WhatsApp Anda.
- Ganti Paket : Cari <select class="paket" id="paket"> di Script HTML No 5, Lalu Ubah <optgroup label="Optgroup 1"> dengan produk yang anda miliki.
Tentang Select Optgroup
Posting Komentar