Custom Floating WhatsApp Chat WordPress. Apakah Sobat teknologi[dot]visitklaten[dot]com ingin mencustom tampilan floating whatsapp dengan yang lebih keren, profesional dan powerfull?. Yap.. dalam kesempatan kali ini kami akan berbagi cara mencustom tampilan whatsapp melayang sehingga tidak hanya simbol whatsapp saja.
Tanpa plugin, dengan bermodal HTML, CSS dan JavaScript yang tidak terlalu rumit bisa membuat tampilan floating whatsapp menjadi lebih menarik. Dengan tampilan custom ini nanti bisa membuat tampilan WA menjadi lebih informatif dan lebih menarik.
Sebelumnya kami ucapkan terima kasih kepada para pengunjung teknologi[dot]visitklaten[dot]com yang rela meluangkan waktunya untuk mengunjungi website kami yang masih banyak kekurangan ini. Kami menerima segala masukkan dan kritikan agar web dan diri kami menjadi lebih baik lagi.
Floating WhatsApp atau whatsapp melayang ini akan sangat bermanfaat bagi website yang memerlukan interaksi dengan pengunjung seperti toko online, marketplace, website pulsa, website jualan online, website jasa, dll.
Dengan adanya whatsapp melayang ini akan memudahkan pengunjung untuk menghubungi pemilik website apalagi jika ditambah desainnya lebih menarik.
Yuk langsung saja berikut Cara Custom Floating WhatsApp Chat WordPress tanpa plugin. Untuk CSS saya menggunakan tambahan dari boostrap juga jadi nanti silakan disesuaikan saja.
Custom Floating WhatsApp Chat
HTML
Bisa diedit sesuai kebutuhan
<div class="position-relative">
<?php
if ( wp_is_mobile() ) {
$walink = 'https://wa.me/6282314116xxx';
} else {
$walink = 'https://web.whatsapp.com/send?phone=6282314116xxx';
}
?>
<div class="frame-wa">
<div class="frame-wa1">
<div class="frame-wa1a color-success p-md-3 p-2">
<div class="font-weight-bold">Ada yang bisa kami bantu</div>
</div>
<a href="<?php echo $walink; ?>"><div class="frame-wa1b row m-1 p-2 rounded">
<div class="col-2 p-1"> <img alt="logo WhatsApp" src="https://teknologi.visitklaten.com/wp-content/uploads/2020/07/wa.png"/></div>
<div class="col-8 p-1"> CS<br>Visit Klaten</div>
<div class="col-2 p-1"> <img alt="" src="https://teknologi.visitklaten.com/wp-content/uploads/2020/07/person.png" /></div>
</div></a>
<a href="<?php echo $walink; ?>"><div class="frame-wa1b row m-1 p-2 rounded">
<div class="col-2 p-1"> <img alt="logo WhatsApp" src="https://teknologi.visitklaten.com/wp-content/uploads/2020/07/wa.png"/></div>
<div class="col-8 p-1"> Support<br>VisitKlatenCom</div>
<div class="col-2 p-1"> <img alt="" src="https://teknologi.visitklaten.com/wp-content/uploads/2020/07/technical-support.png" /></div>
</div></a>
</div>
<div class="frame-wa2 text-right">
<button class="btn btn-success px-4 py-2 "><i class="fa fa-whatsapp fa-lg pr-2 " aria-hidden="true"></i><small>Hubungi Kami via WhatsApp</small></button>
</div>
</div>
</div>
Apabila ingin hanya waktu tertentu saja nomor aktif juga bisa disetting. Silakan lihat dibawah ini. untuk angka silakan diganti dengan jam yang diinginkan misal jam 16.00 WIB maka silakan ditulis 1600. Untuk waktu adalah wilayah jakarta.
<div class="position-relative">
<?php
date_default_timezone_set('Asia/Jakarta');
$now = date('Gi');
if ( wp_is_mobile() ) {
$walink = 'https://wa.me/6282314116xxx';
} else {
$walink = 'https://web.whatsapp.com/send?phone=6282314116xxx';
}
?>
<div class="frame-wa">
<div class="frame-wa1">
<div class="frame-wa1a bg-success text-white p-md-3 p-2">
<div class="font-weight-bold">Ada yang bisa kami bantu</div>
</div>
<?php if ($now >= 0800 && $now <= 1600) { ?>
<a href="<?php echo $walink; ?>"><div class="frame-wa1b row m-1 p-2 rounded">
<div class="col-2 p-1"> <img alt="logo WhatsApp" src="https://teknologi.visitklaten.com/wp-content/uploads/2020/07/wa.png"/></div>
<div class="col-8 p-1"> CS<br>Visit Klaten</div>
<div class="col-2 p-1"> <img alt="" src="https://teknologi.visitklaten.com/wp-content/uploads/2020/07/person.png" /></div>
</div></a>
<?php } else { ?>
<div class="frame-wa1b row m-1 p-2 rounded bg-secondary">
<div class="col-2 p-1"> <img alt="logo WhatsApp" src="https://teknologi.visitklaten.com/wp-content/uploads/2020/07/wa.png"/></div>
<div class="col-8 p-1"> CS<br>Visit Klaten</div>
<div class="col-2 p-1"> <img alt="" src="https://teknologi.visitklaten.com/wp-content/uploads/2020/07/person.png" /></div>
</div>
<?php } ?>
<?php if ($now >= 1600 && $now <= 2200) { ?>
<a href="<?php echo $walink; ?>"><div class="frame-wa1b row m-1 p-2 rounded">
<div class="col-2 p-1"> <img alt="logo WhatsApp" src="https://teknologi.visitklaten.com/wp-content/uploads/2020/07/wa.png"/></div>
<div class="col-8 p-1"> Support<br>VisitKlatenCom</div>
<div class="col-2 p-1"> <img alt="" src="https://teknologi.visitklaten.com/wp-content/uploads/2020/07/technical-support.png" /></div>
</div></a>
<?php } else { ?>
<a href="<?php echo $walink; ?>"><div class="frame-wa1b row m-1 p-2 rounded bg-secondary">
<div class="col-2 p-1"> <img alt="logo WhatsApp" src="https://teknologi.visitklaten.com/wp-content/uploads/2020/07/wa.png"/></div>
<div class="col-8 p-1"> Support<br>VisitKlatenCom</div>
<div class="col-2 p-1"> <img alt="" src="https://teknologi.visitklaten.com/wp-content/uploads/2020/07/technical-support.png" /></div>
</div></a>
<?php } ?>
</div>
<div class="frame-wa2 text-right">
<button class="btn btn-success px-4 py-2 "><i class="fa fa-whatsapp fa-lg pr-2 " aria-hidden="true"></i><small>Hubungi Kami via WhatsApp</small></button>
</div>
</div>
</div>
CSS
Selain dengan adanya CSS dari bootstrap, ada juga tambahan CSS dibawah ini.
.frame-wa {
position: fixed;
right: 30px;
bottom: 20px;
z-index: 9;
}
.frame-wa1 {
display: none;
width: 100%;
max-width: 310px;
background: #fff;
border-radius: 10px;
margin-bottom: 20px;
overflow: hidden;
}
.frame-wa1 a {
text-decoration: none;
color: #000;
}
.frame-wa1b:hover {
background: #f4f4f4;
}
.frame-wa2 .btn {
border-radius: 50px;
}
Javascript
jQuery(document).ready(function($){
$(".frame-wa2 button").click(function(){
$(".frame-wa1").toggle(500);
});
});
Untuk tampilan WhatsApp bisa dilihat kanan bawah, Silakan diklik
*Tidak hanya fungsi whatsapp, selanjutnya bisa diganti ataupun ditambah telepon, email, telegram ataupun lainnya.
Terima kasih telah mengunjungi website kami.
Share jika bermanfaat, jika ada kritik, tambahan, pertanyaan atau saran silakan hubungi kami atau silakan isi di kolom komentar.
Info Tambahan
Sekedar info apabila berminat dan semoga berminat, Apabila ingin mengiklankan usahanya yang khususnya berada wilayah klaten maka bisa memasang iklan di https://www.visitklaten.com/pasang-iklan/ . Kelebihannya dari iklan ini apabila diketikan kata kunci dan ditambah dengan kata “klaten” maka kesempatan muncul di halaman pertama google akan semakin besar. Selain itu yang tak kalah menarik ada diskonnya….
Tersedia juga iklan dalam bentuk banner. Apabila ingin beriklan di web inipun juga bisa, silakan Chat WA saja.
cara penerapannya gimana mas?
untuk HTML bisa dpasang di footer.php atau dibuatkan shortcode dan dpasang sesuai kebutuhan. untuk css bisa diletakkan di style.css. sdangkan javascriptnya bisa diletakkan di custom.js atau lainnya
Izin tanya min, kalau buat 3 button melayang gimana ya
Misal Shoppefood, GrabFood, dan Gofood karena untuk website order resto Ayam Bakar Jakarta Pusat
Sedangkan di website yang aku buat hanya 1 tombol saja yang melayang untuk order GrabFood sisanya aku taruh secara terpisah
Terima kasih semoga dijawab min 🙏
bisa dengan mengganti style ini saja. jika ini WA maka bisa diganti dengan Shoppefood, GrabFood, dan Gofood . tinggal ditambahatau diubah di HTML dan dengan penyesuaian CSS,nya