Cara Membuat Contact From WhatsApp Keren Diblog atau Situs
Karena beragam fitur yang ada didalam aplikasi ini, semua orang merasa terbantu atas permasalahan atah kebutuhan orang sehari-hari. Terlebih lagi kalau kamu penjual produk online shop, pasti sangat membutuhkan sekali yang namanya WA.
Kalau kamu memiliki blog atau situs toko online, cara memasang widget whatsapp kali ini akan sangat membantu kamu ketika berjualan melalui toko online kamu. Widget whatsapp ini dibuat oleh para ahli programmer yang bertujuan untuk memudahkan masyarakat ketika berkomunikasi secara online.
Widget whatsapp ini juga sebenarnya sudah banyak sekali digunakan oleh berbagai sifus besar seperti halodoc dan lain-lain. Dengan memasangnya widget ini, para pembeli ditoko online kamu akan merasa nyaman dan lebih simpel tentunya.
Untuk cara pemasangan contact from WA ini sangatlah mudah. Bahkan kamu bisa memasang fitur ini ke situs kamu tanpa harus paham bahasa program atau membahayar orang lain untuk memasangnya.
Disini saya selaku penulis, saya akan berikan tutorial lengkap mengenai cara membuat contact from WA di blog atau situs kamu. Okeh langsung aja ke inti pembahasannya.
Cara Memasang Contact From WhastApp Di Blog atau Situs Toko Online
- Masuk ke Dashbord blogger kamu terlebih dahulu.
- Masuk ke menu Theme --> Edit HTML.
- Kemudian pastekan kode berikut ini diatas tag </head>.
<style type="text/css">
* {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
-o-box-sizing:border-box;
box-sizing:border-box;
outline:none;
margin:0;
padding:0;
}
.whatsapp-btn {
cursor:pointer;
position:fixed;
bottom:40px;
right:40px;
display:block;
width:50px;
height:50px;
border-radius:50px;
text-indent:-9999px;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHoLtVSCZINbexUkn7WCUUsZEYOsC7EG9quURyC4NQBNpT7LaGGtEqU-mav1qotVP63x9-XW3TBKDHB_ZUZYsnPItw3unkBkWrMq2b6bilH_Oa3ePUdXf9dg2G1Aqx19D23zE9f461ciC6/s300/Whatsapp.png) no-repeat center center;
background-size:50% auto;
box-shadow:0 20px 25px rgba(0,0,0,.05);
transition:.2s;
}
.whatsapp-btn:active {
bottom:35px;
}
#whatsapp {
position:fixed;
z-index:+100;
bottom:0px;
right:0px;
display:block;
background:#fff;
box-shadow:0 20px 25px rgba(0,0,0,.05);
max-width:300px;
font-family:Helvetica, sans-serif;
font-size:90%;
border-radius:4px;
visibility:hidden;
opacity:0;
transition:.3s;
}
#whatsapp.toggle {
bottom:110px;
right:40px;
visibility:visible;
opacity:1;
}
@media(max-width:320px) {
.whatsapp-btn {
bottom:10px;
right:10px;
}
#whatsapp.toggle {
bottom:80px;
right:10px;
visibility:visible;
opacity:1;
}
}
#whatsapp label,
#whatsapp a {
display:block;
margin:15px;
text-decoration:none;
}
#whatsapp input,
#whatsapp textarea {
display:block;
border:1px solid #eee;
box-shadow:inset 0 2px 5px #eee;
width:100%;
padding:15px;
border-radius:2px;
}
#whatsapp input.nama {
text-transform:capitalize;
}
#whatsapp input:focus,
#whatsapp textarea:focus {
border:1px solid #ddd;
}
#whatsapp textarea {
min-height:80px;
resize: none;
}
#whatsapp a {
cursor:pointer;
display:block;
padding:10px;
font-weight:bold;
text-align:center;
background:#25D366;
color:white;
border-radius:2px;
}
#whatsapp a:hover {
background:#20b558;
}
</style> - Kemudian pastekan juga jQuery dibawah ini tepat berada diatas Tag </body>.
- Kemudian klik simpan.
<script type="text/javascript">
$('.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 .email').val() == '') { // Cek Email
ph = $('#whatsapp .email').attr('placeholder');
alert('Silahkan tulis ' + ph);
$('#whatsapp .email').focus();
return false;
} else if (reg.test($('#whatsapp .email').val()) == false) { // Cek Validasi Email
alert('Alamat E-mail tidak valid.');
$('#whatsapp .email').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("Sudah menginstall WhatsApp?")) {
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(),
email = $('#whatsapp .email').val(),
pesan = $('#whatsapp .pesan').val();
$(this).attr('href', url_wa + '?phone=62 ' + tujuan + '&text=Halo, saya *' + nama + '* (' + email + ').. %0A%0A' + pesan + '%0A%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>
Sampai disini kamu sudah berhasil memasukan kode widget whatsappnya. Kemudian bagaimana cara memasangnya diblog agar bisa muncul? Caranya mudah banget, ikuti langkah dibawah ini.
Cara Menggunakan Kode Widget WA Untuk Memasangnya Diblog
- Masuk ke menu layout atau tata letak.
- Tambahkan Gadget HTML/Javascript(dimana saja).
- Kemudian masukan kode berikut ini kedalam kolom konten tersebut.
- Klik simpan dan lihat hasilnya!
<i class="whatsapp-btn">WhatsApp</i>
<div id="whatsapp">
<input class="tujuan" type="hidden" value="089618885066"> <!-- No. WhatsApp -->
<label>
<input class="nama" type="text" placeholder="Nama Lengkap..">
</label>
<label>
<input class="email" type="email" placeholder="Alamat E-mail..">
</label>
<label>
<textarea class="pesan" placeholder="Pesan.."></textarea>
</label>
<a class="submit">Kirim</a>
</div>
Jangan lupa untuk mengganti nomor WhatsAppnya dengan nomor kamu!
Nah, itulah tutorial singkat mengenai cara memasang widget Contact From WhatsApp diblog yang bisa saya sampaikan pada artikel kali ini. Jangan lupa di share kalau artikel ini dirasa bermanfaat buat kamu.