Lompat ke konten Lompat ke sidebar Lompat ke footer

Memasang Tombol Chat WhatsApp Tanpa Plugin di Wordrpress dan Blogspot

buat tombol chat whatsapp blog

Memiliki website toko online atau blog yang ramai memang menjadi impian semua orang. Ada banyak jenis bisnis yang bisa kamu jual melalui website tersebut. Dan biasanya website yang baik adalah web yang menyediakan fitur chatting atau komunikasi antara calon pembeli dengan penjual. Oleh karena itu diperlukan tombol chatting sekali klik yang bisa menghubungkan calon pembeli kepada pemilik web. Kali ini kosngosan akan membahas bagaimana cara Memasang Tombol Chat WhatsApp Tanpa Plugin di Wordrpress dan Blogspot. Simak pembahasannya dibawah ini.

WhatsApp menjadi aplikasi chatting paling populer di dunia saat ini mengalahkan Line, Telegram dan BBM. Ada banyak kelebihan yang ditawarkan seperti fitur status, enkripsi pesan dan bebas iklan serta ringan digunakan.

Nah biasanya para pegiat toko online atau pemilik website penjualan selalu menggunakan tombol chat yang ditujukan langsung ke nomor whatsapp mereka. Hal ini supaya pembeli atau calon nya bisa berkomunikasi secara langsung menggunakan fitur ini.

Sayangnya ada banyak script atau plugin yang dipakai hanya untuk menampilkan tombol chatting versi WA ini. Kabar baiknya, kali ini kosngosan akan memberikan kalian tips yang lebih sederhana dalam menggunakan tombol chat ini. Tanpa plugin (bagi pengguna WP) dan tanpa script apa pun. Perhatikan langkah- langkahnya dibawah ini.

Memasang Tombol Chat WhatsApp Tanpa Plugin di Wordrpress dan Blogspot


Seperti yang mimin katakan diatas, kebanyakan pemilik toko online atau blog selalu menggunakan script atau plugin chat wa yang tentunya akan memberatkan website. Ada alternatif lain yaitu dengan menggunakan gambar icon biasa yang kemudian diberikan link nomor whatsapp kita. seperti apa detail nya? Begini :

Pasang Tombol Chat Manual WA di Wordpress CMS


tombol chat whatsapp wordpress

Sebenarnya kamu bisa menggunakan plugin chat whatsapp untuk blog dengan platform wordpress CMS. Seperti misalnya beberapa plugin ini :


Namun seperti yang mimin katakan, kebanykaan plugin juga bisa memberikan kelemotan bagi website dan hosting mu. Jadi ada baiknya gunakan saja script gambar icon png whatsapp sederhana dan berikan link API whatsapp chat.

Bagaimana caranya? Berikut adalah beberapa langkah :

Cari icon WhatsApp ekstensi PNG untuk keperluan gambarnya. Atau kamu bisa men-download Icon WhatsApp PNG disini.

Perkecil ukurannya dengan mengedit menggunakan photoshop atau aplikasi lainnya.

Kemudian upload gambar PNG tadi kemana saja, bisa di media internal wordpress milikmu atau google drive, atau langsung apload ke blogspot juga bisa. Kemudian ambil source kodenya untuk dimasukkan kedalam WP.

Pada dashboard Wordpress, pergi ke Tab Tampilan, Widget. Buat widget baru dengan jenis teks di sidebar wordrpess.

Untuk memasang kodenya, kamu bisa memakai kode dibawah ini, ganti nomor whatsapp nya dengan punyamu dan juga ganti url source kode gambarnya dengan punyamu sendiri.


<div style="display:scroll;position:fixed;bottom:0;right:0;"><a href="https://api.whatsapp.com/send?phone=6282390257900" target="_blank">
<img src="URL gambar berada" />
</a></div>


Copy kemudian pastekan kode diatas di widget sidebar wordrpess milikmu. Kemudian save. Lihat pada homepage maka akan tampil icon whatsapp secara melayang atau floating.

Kamu bisa mengatur letak posisi icon pada sebelah kiri atau kanan dengan mengganti kode left atau right. Dan juga pada posisi atas atau bawah dengan kode bottom atau top.

Salah satu kelemahan dari cara manual ini adalah ketidak munculan icon floating pada homepage menggunakan homepage statis yang memiliki tampilan full dengan menonaktifkan sidebar.

Karena kode ini ditempatkan pada sidebar wordpress, maka akan tampil pada semua halaman yang menampilkan side bar juga. Jadi bila blog wordpress mu tidak memiliki atau sengaja tidak menggunakan side bar, maka icon chat wa ini tidak akan tampil. Silahkan gunakan saja salah satu plugin diatas.

Solusinya adalah silahkan letakkan kode tersebut pada bagian lain seperti di berkas single post.php atau lainnya.

Pasang Tombol Chat WA Manual di Blogspot


tombol chat whatsapp blogspot

Cara memasang tombol chat wa secara manual di blogspot sebenarnya hampir sama dengan cara sebelumnya. Hanya saja ini sudah pasti muncul pada setiap halaman blog, karena memang tampilan homepage blogspot secara default selalu menampilkan sidebar.


  1. Pergi menuju tab tata letak, kemudian tambahkan widget pada sidebar blog.
  2. Pilih jenis widget HTML/Javascript
  3. Tambahkan kode diatas. Simpan. selesai.


Silahkan lihat kode tersebut sudah tampil floating di blog mu sekarang. Sederhana bukan? tombol chat wa ini akan secara langsung mengarahkan pengunjung ke aplikasi chatting yang terinstal di smarthphone (apabila dibuka lewat smartphone) dan juga akan diarahkan ke web.whatsapp.com bila dibuka menggunakan desktop.

Tonton video panduannya di chanel kosngosan dibawah, tekan tombol play untuk menonton



Demikian artikel mengenai Memasang Tombol Chat WhatsApp Tanpa Plugin di Wordrpress dan Blogspot kali ini, semoga bisa membantu mu dalam membuat website yang disukai oleh calon pembeli. Silahkan bagikan tulisan ini melalui share link dibawah, juga tinggalkan komentar kalian untuk seputar pertanyaan bagaimana cara memasangnya. Terimakasih telah berkunjung.
Reza Harahap
Reza Harahap Reza Harahap adalah owner kosngosan. Suka belajar bisnis, finansial, ekonomi, pendidikan dan pekerjaan. Sembari membagikan ide usaha untuk entrepreneur. Blog ini berisi rencana bisnis, strategi investasi, persiapan keuangan dan lainnya