Cara Menautkan WhatsApp dan Maps di Website WordPress

Updated: 21 Jun, 2025 • 0 • min read

Table of Contents

Ingin memudahkan pengunjung website untuk langsung menghubungi lewat WhatsApp atau menemukan lokasi usaha kamu di Google Maps?

Artikel ini membahas cara paling mudah dan cepat menambahkan tombol WhatsApp dan peta Google Maps ke website WordPress kamu, tanpa perlu coding rumit!

Cocok untuk website bisnis, toko online, portofolio, organisasi, sekolah, atau komunitas.

🧩 Bagian 1: Menambahkan Tombol WhatsApp di WordPress

✅ Langkah 1: Gunakan Format Link WhatsApp

Gunakan format URL ini:

https://wa.me/NOMOR

Contoh:

https://wa.me/6281234567890

Tambahkan teks otomatis:

https://wa.me/6281234567890?text=Halo%20saya%20tertarik%20dengan%20produk%20Anda

Ganti 6281234567890 dengan nomor kamu, dan text= dengan pesan yang kamu inginkan.

✅ Langkah 2: Pasang di Menu, Tombol, atau Widget

🔹 1. Tambahkan ke Menu

Masuk ke Appearance > Menus
Pilih "Custom Link"
Isi:
- URL: https://wa.me/...
- Link Text: "Chat WhatsApp"
Klik Add to Menu > Save Menu

🔹 2. Tambahkan di Halaman (Editor Gutenberg)

Tambahkan blok “Button”
Klik tombol, lalu atur link ke https://wa.me/...
Tulis teks: "Hubungi Kami via WhatsApp"

🔹 3. Tambahkan di Widget Sidebar

Masuk ke Appearance > Widgets
Tambahkan blok “Custom HTML” atau “Paragraph”
Masukkan:

<a href="https://wa.me/6281234567890" target="_blank">Hubungi Kami via WhatsApp</a>

💡 Tips Tambahan: Pakai Plugin WhatsApp Chat

Gunakan plugin seperti:

Click to Chat by HoliThemes
WP Social Chat
Joinchat (WhatsApp Chat WordPress)

Cukup install dari Plugins > Add New, aktifkan, lalu atur nomor WhatsApp dan tampilan tombol (pojok kanan bawah, bubble, dll).

🗺️ Bagian 2: Menampilkan Google Maps di WordPress

✅ Langkah 1: Dapatkan Embed Code dari Google Maps

Buka Google Maps
Cari lokasi usaha/sekolahmu
Klik tombol "Bagikan"
Pilih tab "Sematkan peta" (Embed Map)
Klik “Salin HTML”

Contoh kode:

<iframe src="https://www.google.com/maps/embed?..."></iframe>

✅ Langkah 2: Tempelkan di Halaman atau Widget

🔹 1. Di Halaman (Editor Gutenberg)

Tambahkan blok “Custom HTML”
Tempel kode iframe tadi
Klik Preview

🔹 2. Di Sidebar atau Footer

Masuk ke Appearance > Widgets
Tambahkan blok Custom HTML
Tempel kode Google Maps

🎯 Tips Tampilan & Desain

Gunakan tombol WhatsApp warna hijau agar mudah dikenali
Letakkan tombol WhatsApp di pojok bawah kanan (via plugin)
Letakkan Google Maps di halaman Kontak
Buat judul seperti: “Lokasi Kami” dan beri petunjuk arah

📌 FAQ (Pertanyaan Umum)

❓ Apakah bisa pasang lebih dari 1 tombol WhatsApp?

✅ Bisa. Gunakan link berbeda untuk nomor berbeda.

❓ Kenapa link WhatsApp tidak jalan?

🔧 Pastikan:

Gunakan awalan 62 (bukan 08)
Tidak ada spasi
Format link benar

❓ Apakah embed Google Maps gratis?

✅ Gratis, selama hanya pakai iframe embed biasa. Tidak butuh API key.

Berikut lanjutan artikel posting “Cara Menautkan WhatsApp dan Maps di Website WordPress” untuk bagian visual, ajakan, bonus, dan konten penutup:

🖼️ Visual dan Desain Pendukung

Untuk membuat tampilan website kamu makin menarik, pertimbangkan menambahkan ilustrasi visual di halaman kontak, seperti:

Ikon WhatsApp dan lokasi Maps bergaya flat design
Mockup peta dengan pin lokasi usaha kamu
Ilustrasi customer service atau orang membuka chat
Background ringan dengan ikon komunikasi (email, telepon, WA)

🎨 Kamu bisa pakai tools gratis seperti:

Storyset
Undraw
Atau ilustrasi AI yang bisa dibuatkan secara khusus (minta di sini bila perlu)

🎁 Bonus Tambahan (Opsional untuk Pengunjung)

Untuk menarik lebih banyak interaksi, kamu bisa tambahkan fitur seperti:

Fitur	Deskripsi	Tools/Plugin
Tombol WhatsApp mengambang	Selalu muncul di pojok bawah	Click to Chat / Joinchat
Form kontak sederhana	Alternatif untuk pengguna non-WA	WPForms / Contact Form 7
Peta interaktif + jam buka	Menambah kepercayaan	Google Maps Embed + keterangan jam
CTA (Ajakan Bertindak)	Seperti "Chat Sekarang", "Kunjungi Kami"	Button block / HTML custom

Jika kamu ingin saya bantu buatkan template halaman kontak WordPress dengan WhatsApp & Maps bawaan, atau ilustrasi gambar horizontal untuk promosi, tinggal beri perintah saja. Siap bantu sampai tuntas! ✅

🧾 Kesimpulan

Dengan WhatsApp dan Google Maps di website kamu:

✅ Pengunjung bisa langsung menghubungi tanpa repot
✅ Mereka tahu lokasi usaha/organisasi kamu
✅ Website jadi lebih profesional dan user-friendly

Kini kamu sudah tahu bagaimana cara menautkan WhatsApp dan Google Maps ke website WordPress kamu. Dua elemen ini sangat penting untuk membuat komunikasi dan akses ke lokasi menjadi lebih mudah, cepat, dan efisien.

Jangan biarkan pengunjung bingung cara menghubungi kamu atau menemukan lokasi bisnismu — tampilkan info kontak dan peta dengan jelas, dan buat pengalaman pengguna yang ramah dan profesional.

🚀 Ayo Tambahkan Sekarang!

Cukup copy-paste link WhatsApp & kode Maps ke menu atau halaman kontak. Tak perlu teknisi — kamu bisa atur sendiri hanya dalam beberapa menit!

Butuh bantuan instalasi atau desain tombol keren? Tinggal hubungi kami.

📌 Tips terakhir: Uji tombol WhatsApp dan Maps dari perangkat HP agar tahu tampilannya seperti pengunjung alami.

AdinJava