Cara membuat link ke WA dengan kode HTML

Dalam menampilkan informasi di website kita pada umumnya kita ingin pengunjung lebih mudah menghubungi kita dengan cara langsung masuk ke kontak WA kita. Anda dapat memasukkan nomor HP di halaman website berupa link ke aplikasi WhatsApp.

Link standar untuk menuju ke aplikasi WhatsApp adalah sebagai berikut:

<a href="whatsapp://send?text=Hello&phone=+628********1">Hubungi Saya</a>

Jadi jika anda ingin menampilkan di halaman website anda menggunakan  gambar (logo WA) maka kode html nya adalah sebagai berikut:

<a href="whatsapp://send?text=Hello&phone=+628********1"><img src="https://www.octagonstudio.com/images/contact/wa-logo.png"></a>

Jangan lupa mengganti nomor HP +628*******1 dengan nomor HP anda.

Ini contohnya hasilnya:

UPDATE TERBARU: Cara Membuat Link WhatsApp Resmi (Anti Error)

Catatan: Tutorial di atas ditulis pada tahun 2017. Saat ini, penggunaan format whatsapp:// sudah mulai ditinggalkan karena sering error jika pengunjung membuka website Anda melalui Desktop/Laptop dan belum menginstal aplikasi WhatsApp.

Sebagai solusinya, WhatsApp sekarang telah menyediakan fitur Click to Chat resmi dengan link wa.me. Format baru ini jauh lebih canggih karena akan otomatis mendeteksi perangkat pengunjung: langsung membuka aplikasi WA jika di HP, atau mengarahkan ke WhatsApp Web jika di Laptop.

1. Aturan Penulisan Nomor HP (Sangat Penting!)

Pada metode terbaru ini, Anda wajib menghilangkan angka nol (0) di depan, tanda plus (+), strip, atau spasi. Langsung gabungkan kode negara Indonesia (62) dengan nomor HP Anda.

• Salah: 081366205000 atau +6281366205000
• Benar: 6281366205000

2. Kode HTML Terbaru (Menggunakan Teks)

Untuk membuat pesan terisi otomatis, gunakan ?text=. Ingat, setiap spasi pada kalimat pesan harus diganti dengan kode %20. Tambahkan juga target="_blank" agar website Anda tidak otomatis tertutup saat link diklik pengunjung.

<a href="https://wa.me/6281366205000?text=Halo%20Gan,%20Artikel%20Mu%20Keren" target="_blank">Hubungi Saya di WhatsApp</a>

3. Kode HTML Terbaru (Menggunakan Logo/Gambar WA)

Jika Anda ingin menggunakan gambar tombol atau logo WhatsApp seperti pada contoh sebelumnya, cukup bungkus tag gambar (img) dengan link wa.me seperti di bawah ini:

<a href="https://wa.me/6281366205000?text=Halo%20Gan" target="_blank"><img src="https://waroengweb.co.id/wp-content/uploads/2012/11/wa-logo.png" alt="Tombol Chat WhatsApp" width="128" height="128"></a>

Jangan lupa ganti nomor HP 6281366205000 pada kode di atas dengan nomor HP Anda sendiri. Selamat mencoba!