Chatbox Whatsapp for Website

Widget ini berguna agar pengunjung situs/website kami bisa menghubungi mu langsung via WhatsApp tanpa perlu menyimpan nomor HP mu terlebih dahulu.

Download filenya dan instalasi ke halaman website yang kamu inginkan.

Ubah nomor hp pada JavaScript 

var phoneNumber = '6283190554763';

var phoneNumber = '62NomorMu';

HTML & JavaScript

<div aria-label="Chat via WhatsApp" id="whatsapp-chatbox">
  <button aria-describedby="tooltip-whatsapp" aria-label="Chat WhatsApp" id="btn-whatsapp">
    <svg aria-hidden="true" focusable="false" viewbox="0 0 24 24">
      <path d="M20.52 3.48A11.889 11.889 0 0 0 12.002 0C5.37 0 .004 5.36.004 12c0 2.11.553 4.167 1.6 6.005L0 24l6.22-1.602A11.875 11.875 0 0 0 12 24c6.627 0 12-5.372 12-12 0-1.96-.515-3.806-1.48-5.52zm-8.524 16.472c-1.79 0-3.507-.49-5.027-1.408l-.36-.214-3.7.954 1-.978-.24-.37A8.183 8.183 0 0 1 3 12c0-4.57 3.72-8.287 8.286-8.287 2.21 0 4.278.87 5.835 2.449a8.19 8.19 0 0 1 2.446 5.838c0 4.572-3.72 8.293-8.29 8.293zm4.847-6.53c-.266-.133-1.57-.778-1.813-.867-.24-.09-.415-.133-.59.134s-.675.866-.83 1.044c-.15.18-.305.202-.57.067-.266-.133-1.12-.41-2.13-1.316-.79-.703-1.32-1.57-1.47-1.835-.15-.267-.016-.41.117-.54.12-.117.267-.305.4-.457.14-.152.19-.267.28-.445.09-.18.045-.33-.023-.455-.067-.133-.59-1.42-.81-1.944-.213-.52-.43-.45-.59-.458l-.504-.008c-.18 0-.47.063-.715.305-.244.25-.933.912-.933 2.225 0 1.312.956 2.58 1.088 2.758.13.18 1.88 2.92 4.556 4.09.64.277 1.14.442 1.53.566.64.205 1.22.18 1.68.11.512-.08 1.57-.64 1.795-1.255.23-.61.23-1.13.16-1.25-.07-.117-.27-.178-.57-.31z">
    </path></svg>
  </button>
  <div class="tooltip" id="tooltip-whatsapp">Chat via WhatsApp</div>
</div>

<script>
  document.getElementById('btn-whatsapp').addEventListener('click', function() {
    var phoneNumber = '6283190554763'; // Format internasional tanpa tanda +
    var message = encodeURIComponent('Halo, saya ingin bertanya tentang produk Anda.');
    var whatsappUrl = 'https://wa.me/' + phoneNumber + '?text=' + message;
    window.open(whatsappUrl, '_blank');
  });
</script>
  

Penjelasan singkat:

• Tombol chat bergaya lingkaran hijau dengan ikon WhatsApp.
• Tooltip muncul saat hover/fokus memberi keterangan “Chat via WhatsApp.”
• Tombol terletak fixed di kanan bawah layar, mudah diakses di desktop dan mobile.
• JavaScript membuka chat WhatsApp di tab baru menggunakan URL resmi wa.me dengan nomor dan pesan default.
• Nomor WhatsApp sudah diubah ke format internasional (62) tanpa tanda plus.

Chat via WhatsApp

Dapatkan file CSS