Cara Membuat Widget Tombol Kontak WhatsApp dan Email Pada Blogmu

Selamat Datang di Blog Saya,

Kali ini saya akan membagikan ke kamu bagaimana cara membuat widget untuk kontak WhatsApp dan Email pada blogmu. Jadi dengan begitu, orang yang mengunjungi blogmu dapat langsung dan mudah untuk bisa menghubungi lewat pesan whatsapp ataupun email. Memang sih, setiap blogger sudah membuat menu kontaknya masing-masing, yang biasanya berada sejajar dengan menu About, Disclaimer, Privacy Policy dan Sitemap.

Tapi, dengan menu kontak yang bakalan mau kita buat ini, para pengunjung bisa langsung menghubungimu dengan mudah dan cepat tanpa harus mengetik nomor ponsel atau alamat emailmu. Selain itu, tombol ini juga kelihatan lebih simple, menarik, juga lebih kelihatan elegant, dan yang pasti, tampilannya bisa kamu konfigurasi sendiri sesuai keinginanmu.

Tanpa perlu berlama-lama langsung saja saya mulai yaa..

1. Kamu harus login dulu ke situs https://getbutton.io/

Apabila kamu diminta untuk daftar/sign up, langsung saja daftar dan isi seluruh form pendaftarannya.

2. Kemudian pilih "Dapatkan Tombol Anda"

3. Pilih aplikasi perpesanan yang kamu inginkan (pada versi gratis kamu hanya bisa memilih maksimal dua tombol saja).

Sebenarnya selain kontak WhatsApp dan Email, ada juga tombol kontak lainnya yang bisa kamu pilih, diantaranya ada tombol Telegram, Kontak Telepon, SMS, Line, dan lainnya.

Terserah kamu mau pilih yang mana sesuai keinginanmu, tetapi kamu tetap hanya bisa memilih dua tombol saja.

Baca Juga: Cara Mempercepat Loading Pada Blog

4. Oke, setelah kamu pilih tombol whatsapp dan tombol email, kemudian kamu masukkan nomor whatsapp dan alamat email mu pada kolom masing-masing tombolnya.

Catatan: Untuk nomor telepon harus diawali (+62) jika kamu menggunakan operator seluler dari Indonesia, kemudian di ikuti dengan nomor telepon kamu (tanpa pakai 0).

Contoh: +6285296054321

5. Setelah itu, kamu bisa menambahkan link url logo perusahaan atau logo mu yang lain dan membuat pesan salam otomatis kepada pengunjung yang menghubungimu (khusus fitur Pro).

6. Kamu juga bisa memilih warna widget sesuai dengan selera mu. Ada berbagai macam pilihan warna yang bisa kamu pilih.

7. Kemudian pilih penempatan posisi widget, mau diletakkan di kiri bawah, atau di kanan bawah halaman blogmu.

8. Kemudian isi "Panggilan untuk bertindak".

9. Isi juga "Pesan WhatsApp yang telah diisi sebelumnya (opsional)".

10. Pilih tampilkan "Di mana-mana".

11. Kemudian masukkan alamat Emailmu pada kolom "Tambahkan kode ke situs web Anda" (alamat email tidak harus alamat email blogmu).

12. Setelah selesai mengisi kolom diatas, maka kamu akan mendapatkan kode script html yang bisa kamu salin dan tempel kode tersebut sebelum Tag </body> pada menu edit html yang ada pada blogmu.

Itulah tadi cara membuat widget tombol kontak whatsapp dan email pada blogmu. Dengan begitu, tampilan blogmu akan semakin menarik dengan tombol yang memiliki fungsi penting bagi pengunjung. Apalagi jika blog kamu menjual berbagai macam produk, tentu tombol kontak ini akan sangat berguna dan tentunya akan lebih mempercantik tampilan blogmu.

Tapi jika kamu tidak mau repot-repot membuatnya, saya akan memberikan kode scriptnya, dan tinggal kamu tempelkan saja pada menu HTML blogmu.

KODE HTML TOMBOL WHATSAPP & EMAIL

(function () {

var options = {

whatsapp: "+6285296054321", // WhatsApp number

email: "info_ojol@gmail.com", // Email

call_to_action: "Kirimi kami pesan", // Call to action

button_color: "#E74339", // Color of button

position: "left", // Position may be 'right' or 'left'

order: "whatsapp,email", // Order of buttons

};

var proto = document.location.protocol, host = "getbutton.io", url = proto + "//static." + host;

var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = url + '/widget-send-button/js/init.js';

s.onload = function () { WhWidgetSendButton.init(host, proto, options); };

var x = document.getElementsByTagName('script')[0]; x.parentNode.insertBefore(s, x);

})();

</script>

Atau kamu juga bisa menggunakan kode script dibawah ini:

KODE HTML TOMBOL WHATSAPP & TELEGRAM