Cara Pasang Popup Form Order Kirim Langsung ke WhatsApp V2 di Blogger

Cara Memasang Popup Form Order Kirim Langsung ke WhatsApp V2 di Blogger - Dalam pembuatan Popup WhatsApp ada beberapa langkah yang perlu dilakukan.

Cara Pasang Popup Form Order Kirim Langsung ke WhatsApp V2 di Blogger

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.

Cara Pasang Popup Form

DEMO 2


Aplikasi WhatsApp terbagi dalam dua jenis yaitu?

  1. WhatsApp biasa
  2. 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

  1. Masuk ke blogger Anda
  2. Pilih web/ Blog yang ingin anda pasang Popup Form Order WhatsApp
  3. Pilih Tema
  4. Pilih Navigasi Down
  5. Pilih Edit HTML
  6. Lihat Contoh gambar di bawah.

CSS Popup Form Order WhatsApp


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

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 + '&amp;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.


Letakan Script HTML di bawah tepat di atas Code </body>

[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

  1. Klik Tata Letak / (Layout)
  2. Cari Widget Footer
  3. Tambahkan Gadget
  4. Tambahkan Widget HTML / JavaScript
  5. Masukan Script HTML di di atas lalu simpan.

6. Cara Menggunakan Popup Form Order WhatsApp

Cara Menggunakan Popup Form Order WhatsApp Sangat mudah. Sebab Popup Form Order WhatsApp otomatis untuk semua halaman web / Blogger, sehingga anda tidak perlu khawatir pelanggan anda order di halaman yang mana atau di produk apa?.


Widget Popup Form Order WhatsApp tersebut sudah di optimalkan tidak memenuhi CSS di tema anda, Juga tidak akan kesulitan dalam mengedit fitur tersebut karena fitur tersebut hanya tinggal mengubah Nomber kontak WhatsApp dan fitur lain sebagai berikut.
  1. 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.
  2. Ganti Paket : Cari <select class="paket" id="paket"> di Script HTML No 5, Lalu Ubah <optgroup label="Optgroup 1"> dengan produk yang anda miliki.
    <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>

Tentang Select Optgroup

Select Optgroup ini memiliki batasan yang mana Anda harus mengubah sendiri Fitur tersebut dan untuk Select Option lainnya akan di posting dalam Versi sebelumnya yang belum sempat di posting. dan posting Popup Form Order WhatsApp ini adalah Posting Popup Form Order WhatsApp Versi 2.0.0


Contoh Hasil Akhir pemasangan

Pasang Popup Form Order



Apabila ada yang tidak di pahami silahkan sis kolom Komentar di Bawah. Terimakasih.

Post a Comment

[facebook]

MKRdezign

{facebook#YOUR_SOCIAL_PROFILE_URL} {twitter#YOUR_SOCIAL_PROFILE_URL} {google-plus#YOUR_SOCIAL_PROFILE_URL} {pinterest#YOUR_SOCIAL_PROFILE_URL} {youtube#YOUR_SOCIAL_PROFILE_URL} {instagram#YOUR_SOCIAL_PROFILE_URL}

Kontak

Name

Email *

Message *

Powered by Blogger.
Javascript DisablePlease Enable Javascript To See All Widget