Lompat ke konten Lompat ke sidebar Lompat ke footer

Membuat Widget Tombol Chat Whatsapp Melayang di Web

Daftar isi [Tampil]

Beberapa waktu yang lalu sempat ada yang komentar, dan request cara membuat widget tombol whatsapp chat melayang pada blog atau toko online. Jadi, kali ini saya coba untuk membuatkan tutorialnya, sebelum lanjut membaca tutorial ini, saya harapkan teman-teman sudah paham tentang cara membuat link chat whatsapp. Baca : Cara Membuat Link Whatsapp Menuju Chat Langsung


Dengan widget tombol chat melayang, maka user atau calon pembeli akan lebih mudah lagi untuk menekan tombol chat wa ketika sedang scrolling, tanpa perlu scroll-up untuk mencari tombol beli atau chat wa.Teman-teman bisa menerapkan cara ini pada website Toko Online Blogger, WordPress, dan Sejenisnya. Hanya menyesesuaikan saja caranya.

versi mobile

versi destop

Cara Membuat Widget Tombol Link Chat Whatsapp Melayang

1. Silakan copy script widget dibawah ini :

<style> .floatwa { position:fixed; bottom:0px; right: 0px; background-color:#ffffff; width:100%; z-index:1000; padding:2px; margin:auto; text-align:center; float:none; box-shadow: 0px -2px 10px #c0c0c0; } .tombolwa { border: 1px #56aa71 solid; background-color:#2f7e49; width:90%; padding:4px; text-align:center; margin:0; border-radius: 5px; margin:auto; text-align:center; float:none; } .floatwa a{ color:white; } </style> <div class="floatwa"> <a href="https://api.whatsapp.com/send?phone=6281259929797&amp;text=Halo%20gan,%20Saya%20mau%20order" target="_blank"><div class="tombolwa">ORDER VIA WHATSAPP</div></a></div>

2. Kemudian paste letakan script widget diatas pada bagian widget blog, jangan lupa juga untuk mengganti nomor Whatsappnya (saya tandai warna hijau nomornya diatas).

- Blogger 

Masuk Dashboard > Tata Letak > Tambahkan Gadget > HTML/JavaScript, kemudian pastekan/letakkan script disitu, ubah no wa, dan simpan.

- WordPress

Masuk Dashboard > Tampilan > Widget > Teks, atur posisi widget (bebas), kemudian pastekan/letakkan script disitu, ubah no wa, dan simpan.

3. Jika sudah disimpan, cek halaman website/toko online dan harusnya widget tombol whatsapp chat sudah muncul dibagian bawah layar, berwarna hijau sesuai seperti demo diatas.

Baiklah, itulah tutorial cara membuat widget chat whatsapp melayang atau floating pada website atau blog toko online, atau sejenisnya.

8 komentar untuk "Membuat Widget Tombol Chat Whatsapp Melayang di Web"

  1. makasih infonya,ternyata sangat simple gak pake ribet.
    semoga sukses dan tambah jaya..

    BalasHapus
  2. Bang. Kayaknya related pos ga loading saat klik. Ga ad respon. Via samsung internet browser terbaru. Thks.
    Blog. Khazanahkoe

    BalasHapus
  3. Agar bisa ditambahin link lain dan supaya teks menyamping gima ya?

    BalasHapus
  4. Kalau 2 button atau 3 button misal whatsapp, telepon, contoh satu lagi e-mail dibagian bawah

    Apakah ada codenya?

    BalasHapus

Tata Tertib Berkomentar :
🔖 Berkomentarlah yang relevan sesuai topik.
🔖 Jika bermanfaat, sobat bisa bagikan juga ke teman-teman sobat melalui tombol media sosial di atas, karena berbagi itu indah, semoga jadi jalan kebaikan.

Ingin Mendukung Kami Bisa melalui Halaman Donasi