Cara Membuat Tombol WhatsApp di Situs WordPress Tanpa Plugin

Dalam era digital saat ini, komunikasi yang cepat dan efisien sangat penting untuk bisnis. Salah satu cara terbaik untuk berinteraksi dengan pelanggan adalah melalui aplikasi pesan instan seperti WhatsApp. Dengan menambahkan tombol WhatsApp di situs WordPress Anda, pengunjung dapat dengan mudah menghubungi Anda untuk pertanyaan, konsultasi, atau dukungan. Dalam artikel ini, kita akan membahas cara membuat tombol WhatsApp di situs WordPress tanpa menggunakan plugin, hanya dengan menggunakan HTML, CSS, dan JavaScript.

Manfaat Tombol WhatsApp di Website

Sebelum kita melangkah ke langkah-langkah teknis, mari kita bahas mengapa WhatsApp adalah pilihan yang baik untuk komunikasi bisnis Anda:

1. Popularitas: WhatsApp adalah salah satu aplikasi pesan terpopuler di dunia dengan lebih dari 2 miliar pengguna aktif. Banyak orang sudah terbiasa menggunakan aplikasi ini untuk berkomunikasi sehari-hari.
2. Kemudahan Penggunaan: Antarmuka WhatsApp yang sederhana membuatnya mudah digunakan oleh semua orang, termasuk mereka yang tidak terlalu paham teknologi.
3. Responsif: Dengan WhatsApp, Anda dapat memberikan jawaban cepat kepada pelanggan. Ini meningkatkan pengalaman pelanggan dan dapat membantu meningkatkan konversi penjualan.
4. Fitur Multimedia: Selain teks, Anda dapat mengirim gambar, video, dan dokumen melalui WhatsApp. Ini memungkinkan Anda untuk memberikan informasi lebih lengkap kepada pelanggan.
5. Privasi: WhatsApp menawarkan enkripsi end-to-end, yang berarti bahwa pesan Anda aman dan hanya dapat dibaca oleh pengirim dan penerima.

Langkah-langkah Pemasangan Tombol WhatsApp di WordPress

Sekarang kita akan membahas langkah-langkah teknis untuk menambahkan tombol WhatsApp ke situs WordPress Anda.

1. Masuk ke Halaman Admin WordPress

Langkah pertama adalah masuk ke halaman admin WordPress Anda. Gunakan kredensial yang benar untuk mengakses dasbor.

2. Akses Editor Tema

Setelah masuk ke dasbor WordPress:

• Pergi ke menu Appearance (Tampilan) > Theme Editor (Editor Tema).
• Di editor tema, Anda akan melihat daftar file tema yang digunakan. Pilih file footer.php atau header.php untuk menambahkan kode. Biasanya, footer.php adalah tempat yang baik untuk menambahkan kode JavaScript dan HTML.

3. Tambahkan Kode HTML

Salin dan tempel kode berikut ke dalam file yang dipilih, tepat sebelum tag penutup </body>:

<!-- Chatbox WhatsApp -->
<input class="chatMenu hidden" id="offchatMenu" type="checkbox" />
<label class="chatButton" for="offchatMenu">
  <svg class="svg-1" viewBox="0 0 32 32">
    <g>
      <path d="M16,2A13,13,0,0,0,8,25.23V29a1,1,0,0,0,.51.87A1,1,0,0,0,9,30a1,1,0,0,0,.51-.14l3.65-2.19A12.64,12.64,0,0,0,16,28,13,13,0,0,0,16,2Zm0,24a11.13,11.13,0,0,1-2.76-.36,a1,a1,a1,a1,a1,a1,a1,a1,a1,a1,a1,a1,a1,a1,a1,a1,a1,a1"></path>
      <path d="M19.86,..."></path>
    </g>
  </svg>
  <svg class="svg-2" viewBox="0 0 512 512">
    <path d="M278.6 256l68.2-68.2c6.2-6.2 6.2-16.4 0-22.6..."></path>
  </svg>
</label>
<div class="chatBox">
  <div class="chatContent">
    <div class="chatHeader">
      <svg viewBox="0 0 32 32">...</svg>
      <div class="chatTitle">
        Silahkan chat dengan tim kami
        <span>Admin akan membalas dalam beberapa menit</span>
      </div>
    </div>
    <div class="chatText">
      <span>Halo! Ada yang bisa kami bantu?</span>
      <span class="typing">...</span>
    </div>
  </div>
  <a class="chatStart" href="https://api.whatsapp.com/send?phone=6285314934782&text=Hallo%20WEBESIA,%20saya%20ingin%20konsultasi%20jasa%20pembuatan%20website" rel="nofollow noreferrer" target="_blank">
    <span>Mulai chat...</span>
  </a>
</div>

<style>
  .chatBox {
    padding: 15px;
  }
  .chatContent {
    max-width: 300px;
    margin: auto;
  }
  .chatStart {
    background-color: #4dc247;
    color: #ffffff;
    text-align: center;
    padding: 15px 30px; 
    border-radius: 15px;
    font-size: 16px; 
    text-decoration: none;
    display: block;
    margin: 20px auto 0;
    max-width: 300px;
  }
  .chatStart:hover {
    background-color: #000000;
    color: #ffffff;
  }
</style>

<script>
  setTimeout(function() {
    document.getElementById('offchatMenu').checked = true; // Membuka checkbox setelah waktu tertentu
  }, 10000); // Waktu dalam milidetik
</script>

Demo Tombol WhatsApp Melayang:

4. Penjelasan Kode

Mari kita bahas bagian-bagian dari kode tersebut:

• HTML:
  • Kode di atas menciptakan struktur tombol chat WhatsApp serta area chat yang muncul ketika tombol diklik.
  • Link WhatsApp diarahkan ke nomor yang ditentukan beserta pesan awal yang akan dikirim ketika pengguna mengklik tombol “Mulai chat…“.
• CSS:
  • Mengatur gaya dari tombol dan tampilan chat agar terlihat menarik dan responsif.
  • Anda dapat menyesuaikan warna latar belakang atau ukuran font sesuai dengan tema situs Anda.
• JavaScript:
  • Mengatur agar chat box terbuka secara otomatis setelah beberapa detik (dalam contoh ini adalah sepuluh detik). Ini memberikan waktu kepada pengunjung untuk melihat konten sebelum tawaran chat muncul.
• Penyesuaian Kode:
  • Coba Anda lihat kode diatas ada tulisan dengan warna Kuning silahkan anda ubah sesuaikan dengan Nomor dan pesan defaultnya.

5. Uji Coba Tombol

Setelah menambahkan kode tersebut:

• Simpan perubahan pada file footer.php atau header.php.
• Kunjungi situs web Anda dan periksa apakah tombol WhatsApp muncul seperti yang diharapkan.
• Klik tombol untuk memastikan bahwa jendela chat terbuka dengan benar di aplikasi WhatsApp.

6. Penyesuaian Tambahan

Anda mungkin ingin melakukan beberapa penyesuaian tambahan agar tombol lebih sesuai dengan desain situs Anda:

• Mengubah Warna dan Ukuran:
  • Sesuaikan warna latar belakang tombol dengan palet warna situs web Anda.
  • Ubah ukuran font atau padding pada tombol agar lebih sesuai dengan elemen lain di halaman.
• Menambahkan Animasi:
  • Untuk membuat tombol lebih menarik perhatian pengunjung, Anda bisa menambahkan efek hover atau animasi saat tombol muncul.

7. Keuntungan Menggunakan Kode Manual

Menggunakan metode manual untuk menambahkan tombol WhatsApp memiliki beberapa keuntungan dibandingkan dengan menggunakan plugin:

• Kustomisasi Penuh: Anda memiliki kontrol penuh atas tampilan dan fungsi tombol.
• Kinerja Lebih Baik: Mengurangi jumlah plugin dapat meningkatkan kinerja situs web Anda.
• Belajar Lebih Banyak: Proses ini memberi Anda pemahaman lebih dalam tentang HTML dan CSS.

Kesimpulan

Dengan mengikuti langkah-langkah di atas dan menambahkan kode yang disediakan ke dalam situs WordPress Anda tanpa menggunakan plugin tambahan apapun، Anda dapat dengan mudah menambahkan tombol WhatsApp untuk memudahkan pengunjung berinteraksi dengan Anda secara langsung melalui aplikasi WhatsApp.Pastikan untuk mengganti nomor WhatsApp dalam link sesuai dengan nomor Anda agar pengunjung dapat menghubungi Anda dengan benar.Dengan adanya fitur ini di situs web Anda، interaksi dengan pelanggan akan menjadi lebih mudah dan cepat، serta meningkatkan peluang konversi penjualan bagi bisnis Anda.Jika ada pertanyaan lebih lanjut atau jika Anda membutuhkan bantuan tambahan dalam proses ini، jangan ragu untuk menghubungi tim dukungan kami!