Cara Membuat Tombol Chat WA Melayang di Blogger

Konten [Tampilkan]

Tombol chat WhatsApp melayang dapat digunakan oleh pengunjung web menghubungi costumer service dari web yang dikunjungi.

Costumer service merupakan bagian dari layanan web jenis e-commerce yang harus ada di setiap web untuk dapat membantu pengguna terkait berbagai pertanyaan dari produk atau jasa.

Pengunjung baru dapat mengklik widget wa melayang karena memiliki tujuan hendak menanyakan pertanyaan sesuatu kepada owner web atau hendak menghubungi admin untuk membeli produk yang di-posting ke web.

Fitur ini cocok digunakan untuk berbagai jenis niche web seperti toko online atau blog loker yang terdapat layanan customer service sehingga pengguna dapat bertanya terkait lowongan yang admin posting secara mendetail.

Pada umumnya halaman web pasti mempunyai halaman kontak (kontact us) sebagai salah satu bagian dari navigasi web.

Tapi dengan adanya fitur tombol live chat melalui WhatsApp secara melayang ini sehingga pengguna dapat lebih cepat memulai obrolan dengan costumer service yang online.

Diketahui juga terkait fakta bahwa WhatsApp merupakan platform perpesanan yang sudah populer di Indonesia banyak dipasang di HP pengguna layanan anda. Jadi semua pengguna anda dapat menggunakan fitur chat WhatsApp messenger.

Cara pasang tombol chat WhatsApp melayang

1. Buka www.blogger.com

2. Salin kode widget chat WhatsApp melayang dibawah ini

<a class='fixed-whatsapp' href='https://api.whatsapp.com/send?phone=62895807390101' rel='nofollow noopener' target='_blank' title='Whatsapp' /></a>
<style>
.fixed-whatsapp {
position: fixed;
bottom: 20px;
right: 20px;
width: 50px;
height: 50px;
z-index: 9999;
}

.fixed-whatsapp:before {
content: "";
background-repeat: no-repeat;
background-size: 34px 34px;
background-position: center center;
width: 50px;
height: 50px;
background-image: url("data:image/svg+xml;charset=utf8,%3csvg viewBox='0 0 24 24' width='32' height='32' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg%3e%3cpath style='fill:%23ffffff' d='M16.75,13.96C17,14.09 17.16,14.16 17.21,14.26C17.27,14.37 17.25,14.87 17,15.44C16.8,16 15.76,16.54 15.3,16.56C14.84,16.58 14.83,16.92 12.34,15.83C9.85,14.74 8.35,12.08 8.23,11.91C8.11,11.74 7.27,10.53 7.31,9.3C7.36,8.08 8,7.5 8.26,7.26C8.5,7 8.77,6.97 8.94,7H9.41C9.56,7 9.77,6.94 9.96,7.45L10.65,9.32C10.71,9.45 10.75,9.6 10.66,9.76L10.39,10.17L10,10.59C9.88,10.71 9.74,10.84 9.88,11.09C10,11.35 10.5,12.18 11.2,12.87C12.11,13.75 12.91,14.04 13.15,14.17C13.39,14.31 13.54,14.29 13.69,14.13L14.5,13.19C14.69,12.94 14.85,13 15.08,13.08L16.75,13.96M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C10.03,22 8.2,21.43 6.65,20.45L2,22L3.55,17.35C2.57,15.8 2,13.97 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12C4,13.72 4.54,15.31 5.46,16.61L4.5,19.5L7.39,18.54C8.69,19.46 10.28,20 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4Z'%3e%3c/path%3e%3c/g%3e%3c/svg%3e");
background-color: #00C853;
position: absolute;
top: 0;
left: 0;
border-radius: 100%;
box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, .12), 0 1px 1px 0 rgba(0, 0, 0, .24);
}</style>

2. Ubah nomor WhatsApp sesuai nomor costumer service milik mu

Nomor contoh : 0895807390101
Penerapan nomor ke WhatsApp : 62895807390101
* Hilangkan angka 0 diawal dan ganti dengan 62

3. Lakukan edit tema pada template blogger
4. Tempelkan kode tersebut diatas kode </body>
5. Simpan tema.

Demo tampilan chat WhatsApp melayang di blog saya

Demo

Langkah terakhir cek apakah terdapat tombol chat WhatsApp melayang benar benar bekerja di blog kamu dan pastikan bahwa nomor bekerja dengan baik.

Jika terdapat kendala atau kesulitan memasang anda dapat menghubungi kontak kami.