Tutorial Membuat Tombol Floating Chat WhatsApp Premium di Blogger Tanpa Menampilkan Nomor Telepon

Bagi pemilik blog bisnis, landing page, atau portfolio di platform Blogger, menyediakan tombol pintas Call to Action (CTA) menuju WhatsApp adalah hal wajib untuk mengubah pengunjung menjadi pembeli. Selama ini, kita terbiasa membuat tombol chat menggunakan tautan nomor telepon mentah seperti wa.me/628xxx.

Namun, metode lama ini memiliki dua kelemahan utama dari sudut pandang UI/UX dan keamanan:

1. Masalah Privasi: Nomor telepon pribadi atau bisnis Anda terpampang secara terbuka di dalam kode sumber (source code) template blog, menjadikannya rentan terhadap spamming.
2. Estetika Kode: Tautan berbasis nomor telepon terasa kurang premium dan kurang mencerminkan identitas sebuah merek (branding).

Kabar baiknya, WhatsApp Business kini sedang meluncurkan fitur baru secara bertahap berupa Nama Pengguna Bisnis (Username @). Fitur ini memungkinkan pelanggan untuk langsung menghubungi Anda via WhatsApp tanpa perlu mengetahui atau menyimpan nomor telepon Anda terlebih dahulu.

Artikel ini adalah Bagian 1 dari rangkaian seri integrasi WhatsApp Business modern di Blogger. Kali ini, kita akan belajar cara mengklaim nama pengguna tersebut dan memasang tombol Floating Chat premium berbasis username di blog Anda.

📢 PENGUMUMAN SERI INTEGRASI WHATSAPP:

Rangkaian panduan ini dirancang untuk meningkatkan konversi blog Anda. Simpan halaman ini untuk memantau kelanjutan serinya:

• Bagian 1 (Artikel Ini): Tutorial Membuat Tombol Floating Chat WhatsApp Premium Tanpa Nomor Telepon.
• Bagian 2 (Segera Hadir): Desain Halaman Kontak (Contact Us) Modern ala Startup dengan Tautan Navigasi WhatsApp.
• Bagian 3 (Segera Hadir): Cara Memasang Widget QR Code Chat WhatsApp di Sidebar Layout Blogger.

Tahap 1: Membuat Nama Pengguna Bisnis di Android

Sebelum memasang tombol di blog, Anda perlu memesan atau mengklaim username unik bisnis Anda melalui aplikasi WhatsApp Business di perangkat Android Anda.

Catatan: Fitur ini diluncurkan secara bertahap. Pastikan aplikasi WhatsApp Business Anda sudah diperbarui ke versi paling baru melalui Google Play Store.

Langkah-langkah membuat nama pengguna bisnis:

1. Buka aplikasi WhatsApp Business di ponsel Anda.
2. Buka tab Alat > lalu pilih Profil.
3. Ketuk opsi Buat nama pengguna.
4. Masukkan nama pengguna unik yang Anda inginkan (Panjang maksimal 25 karakter, hanya boleh menggunakan huruf kecil a-z dan angka 0-9).
5. Jika muncul keterangan "Nama pengguna ini tidak tersedia", artinya nama tersebut sudah diklaim orang lain. Cari kombinasi nama lain yang sesuai dengan branding blog Anda.
6. Ketuk Simpan.

Setelah tersimpan, Anda akan mendapatkan sebuah tautan langsung khusus (direct link) yang polanya mengarah pada nama pengguna Anda, misalnya: https://wa.me/username_bisnis_anda. Tautan inilah yang akan kita gunakan untuk menyembunyikan nomor telepon asli di blog.

Tahap 2: Memasang Struktur HTML Tombol Floating Chat

Kita akan membuat tombol melayang (floating button) yang terletak di pojok bawah halaman blog. Struktur HTML ini dibuat mandiri dan fleksibel agar bisa diletakkan di bagian mana saja tanpa merusak struktur tema bawaan.

1. Masuk ke dasbor Blogger > pilih menu Tema (Theme).
2. Klik ikon panah di sebelah "Sesuaikan" > pilih Edit HTML.
3. Gulir ke bagian paling bawah editor kode, lalu temukan tag </body>.
4. Tempelkan kode HTML berikut tepat di atas tag </body>:

<!-- Tombol Floating Chat WhatsApp Premium -->
<a class='floating-wa-btn' href='[https://wa.me/username_bisnis_anda](https://wa.me/username_bisnis_anda)' rel='noopener noreferrer' target='_blank' title='Hubungi Kami via WhatsApp'>
  <div class='wa-icon-wrapper'>
    <!-- Ikon SVG WhatsApp yang Ringan dan Tajam -->
    <svg viewBox='0 0 24 24' xmlns='[http://www.w3.org/2000/svg](http://www.w3.org/2000/svg)'>
      <path d='M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946C.06 5.348 5.397.01 12.008.01c3.202.001 6.212 1.246 8.477 3.514 2.266 2.268 3.507 5.28 3.505 8.484-.004 6.657-5.34 11.997-11.953 11.997-2.005-.001-3.973-.502-5.713-1.457L0 24zm6.59-4.846c1.66.986 3.288 1.447 5.36 1.448 5.494 0 9.961-4.471 9.964-9.969.002-2.663-1.03-5.166-2.906-7.044C17.189 1.711 14.687 .682 12.01.682c-5.498 0-9.964 4.471-9.967 9.97 0 2.125.561 4.197 1.623 5.945l-.993 3.626 3.714-.973zm11.367-7.354c-.303-.151-1.793-.884-2.073-.986-.28-.102-.483-.151-.686.152-.204.304-.785.986-.962 1.189-.178.203-.355.228-.658.077-.303-.152-1.28-.471-2.441-1.506-.901-.804-1.512-1.798-1.689-2.101-.177-.304-.019-.468.133-.619.136-.136.304-.355.455-.532.152-.177.202-.304.303-.506.102-.203.051-.38-.025-.532-.076-.152-.686-1.653-.94-2.261-.247-.595-.497-.514-.684-.523-.176-.009-.379-.011-.582-.011-.203 0-.532.076-.811.38-.28.304-1.064 1.039-1.064 2.532s1.089 2.94 1.241 3.143c.152.203 2.142 3.272 5.19 4.587.724.313 1.29.5 1.73.64.728.231 1.389.198 1.912.12.583-.087 1.793-.734 2.047-1.443.254-.709.254-1.317.177-1.442-.075-.127-.278-.203-.581-.355z' fill='#fff'/>
    </svg>
  </div>
</a>

Jangan lupa ganti username_bisnis_anda dengan nama pengguna yang telah Anda daftarkan.

Langkah 3: Menghias Tombol dengan CSS Murni

Agar tombol tersebut melayang secara elegan di pojok kanan bawah, memiliki efek animasi mikro saat disentuh (hover), dan tidak membebani performa halaman, kita akan menggunakan CSS murni.

Cari kode ]] Header Bawaan atau </style> di dalam editor HTML Blogger Anda, lalu tempelkan kode CSS berikut tepat di atasnya:

/* Styling Tombol Melayang WhatsApp */
.floating-wa-btn {
  position: fixed;
  bottom: 25px; /* Jarak dari bawah layar */
  right: 25px;  /* Jarak dari kanan layar */
  z-index: 9999;
  width: 60px;
  height: 60px;
  background-color: #25d366; /* Warna khas WhatsApp */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
}

/* Efek interaktif saat tombol di-hover */
.floating-wa-btn:hover {
  transform: translateY(-5px); /* Efek melompat sedikit ke atas */
  box-shadow: 0 6px 16px rgba(37, 211, 102, 0.4);
  background-color: #20ba5a;
}

/* Mengatur ukuran ikon di dalam tombol */
.wa-icon-wrapper {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Responsivitas untuk layar ponsel yang lebih kecil */
@media screen and (max-width: 480px) {
  .floating-wa-btn {
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
  }
  .wa-icon-wrapper {
    width: 26px;
    height: 26px;
  }
}

Simpan perubahan tema Anda dengan mengklik ikon disket di pojok kanan atas editor HTML Blogger.

Kesimpulan & Manfaat bagi Blog Anda

Sekarang, coba buka blog Anda melalui perangkat desktop maupun smartphone. Anda akan melihat sebuah tombol floating chat premium berwarna hijau khas WhatsApp melayang di pojok kanan bawah halaman.

Ketika pengunjung mengklik tombol tersebut, sistem WhatsApp akan langsung membuka ruang obrolan ke akun bisnis Anda berdasarkan nama pengguna yang Anda masukkan, tanpa memunculkan nomor telepon Anda di barisan URL peramban mereka. Langkah ini sukses mengamankan privasi nomor kontak Anda, merapikan struktur kode dari pembaca skrip otomatis (bot scraper), sekaligus memberikan pengalaman berkunjung yang lebih premium.

Pada tutorial Bagian 2 mendatang, kita akan naik kelas dengan memanfaatkan tautan nama pengguna ini untuk mendesain halaman khusus "Hubungi Kami" (Contact Us) dengan tata letak minimalis bergaya startup.

Jika Anda mengalami kendala saat menyelaraskan CSS tombol ini dengan tema bawaan blog Anda, silakan coret-coret di kolom komentar di bawah!