Tutorial: Ubah Link WhatsApp Desktop dari web.whatsapp.com Menjadi wa.me di WordPress

Plugin WordPress WhatsApp Support memungkinkan pengguna menambahkan tombol WhatsApp ke website, baik dalam bentuk floating button maupun widget kontak. Secara default, ketika tombol WhatsApp diklik dari desktop, link yang terbuka mengarah ke https://web.whatsapp.com/send. Namun, sebagian pengguna menginginkan agar link ini langsung diarahkan ke https://wa.me untuk alasan kecepatan atau kemudahan penggunaan.

Dalam tutorial ini, kamu akan belajar dua cara mengubah link WhatsApp desktop di plugin ini menjadi https://wa.me.

🧩 Cara 1: Override di wp_footer Menggunakan JavaScript

Cara ini menambahkan JavaScript yang mengganti semua link web.whatsapp.com/send di halaman menjadi wa.me.

✍️ Langkah-langkah:

1. Buka file functions.php pada tema aktif kamu (disarankan menggunakan child theme).
2. Tambahkan kode berikut di akhir file:

/**
* WordPress Support Using WhatsApp - Open desktop app instead new tab.
*/
add_action('wp_footer', function () {
?>
<script>
document.addEventListener("DOMContentLoaded", function(){
document.querySelectorAll('a[href*="web.whatsapp.com/send"]').forEach(function(el) {
const url = new URL(el.href);
const phone = url.searchParams.get('phone');
const text = url.searchParams.get('text');
if (phone) {
el.href = 'https://wa.me/' + phone + (text ? '?text=' + text : '');
}
});
});
</script>
<?php
});

• Kode ini mencari semua elemen <a> yang memiliki URL web.whatsapp.com/send.
• Lalu mengambil parameter phone dan text, dan membentuk ulang URL-nya menjadi https://wa.me/phone?text=....
• Ini dilakukan setelah halaman selesai dimuat, jadi tidak akan mengganggu proses render halaman.

🧩 Cara 2: Override Global Object wwsObj dari Plugin

Jika plugin menggunakan objek JavaScript wwsObj untuk mengatur API endpoint WhatsApp (biasanya ditemukan di assets/js/wws.js), kamu bisa override langsung API WhatsApp-nya agar selalu pakai wa.me.

✍️ Langkah-langkah:

1. Tambahkan kode berikut di bagian footer website kamu (misalnya via plugin Insert Headers and Footers, atau lewat footer.php sebelum tag </body>):

<script>
document.addEventListener("DOMContentLoaded", function () {
if (typeof wwsObj !== 'undefined') {
wwsObj.whatsapp_desktop_api = 'https://wa.me'; // Ganti endpoint desktop
}
});
</script>

• Plugin menggunakan wwsObj.whatsapp_desktop_api untuk menentukan ke mana link akan diarahkan saat klik dari desktop.
• Dengan mengganti nilainya ke https://wa.me, maka saat pengguna desktop klik tombol WhatsApp, mereka akan diarahkan langsung ke wa.me/nomor.

🚀 Hasil yang Diharapkan

Dengan menerapkan salah satu atau kedua metode di atas:

• Link WhatsApp dari desktop tidak lagi membuka tab ke web.whatsapp.com/send, melainkan langsung ke wa.me/08xxx....
• Cocok untuk pengguna yang lebih nyaman menggunakan aplikasi WhatsApp Desktop atau ingin pengalaman lebih cepat tanpa tab browser.

🧪 Tips Tambahan

• Pastikan nomor WhatsApp yang digunakan menggunakan format internasional (misalnya: 6281234567890).
• Hindari spasi atau simbol pada text, gunakan encodeURIComponent(text) jika membuat script manual.
• Coba kombinasi kedua metode di atas jika salah satu tidak berhasil karena cache atau konflik JS.

🧯 Troubleshooting

Masih mengarah ke web.whatsapp.com?

• Coba clear cache plugin (jika menggunakan cache seperti LiteSpeed, WP Rocket).
• Periksa console browser (F12) untuk melihat apakah wwsObj terdefinisi.
• Coba tambahkan script override wwsObj sebelum script utama plugin dimuat (urutan bisa penting).