Cara Membuat Tombol Kontak WhatsApp Melayang Muncul Pada Setiap Halaman Di Berbagai Platform Website

Apa alasan tutorial Membuat Tombol Kontak WhatsApp ini di buat? Karena whatsapp merupakan sebuah aplikasi chatting media sosial yang kini memiliki jumlah pengguna peringkat pertama karena dapat di gunakan dengan sangat mudah.

Whatsapp tidak hanya dapat di gunakan secara geratis oleh semua pengguna, namun juga tersedia versi bisnis bagi pengguna yang memanfaatkan whatsapp sebagai sarana percakapan dalam bisnis mereka. Dan karena alasan bisnis pula kini whatsapp banyak di manfaatkan sebagai salah satu tombol kontak website.

Membuat Tombol Kontak WhatsApp Muncul Pada Setiap Halaman Website

Tombol Kontak WhatsApp yang merupakan salah satu sarana pesan instan dengan fitur yang lengkap kini banyak sekali di manfaatkan sebagai sarana kontak utama di berbagai platform website. Melalui tombol tersebut pengguna yang mengunjungi website akan langsung di arahkan ke dalam sebuah percakapan whatsapp.

Pada dasarnya tombol link pintas whatsapp dapat di gunakan di berbagai platform website. Oleh karena itu pada artikel ini saya akan memberikan petunjuk bagaimana cara Membuat Tombol Kontak WhatsApp secara umum. Jadi kalian tinggal menyesuaikan saja.

Unduh Dan Upload Icon Whatsapp Pada Website yang Kalian Kelola

Agar dapat menampilkan atao membuat tombol whatsapp silahkan download icon whatsapp dan icon telephone lalu upload pada website/blog kalian melalui dashboard admin.

Pasang Code Script Untuk Menampilkan Icon Whatsapp Dan Telephone

Setelah icon whatsapp dan telephone kalian upload, sekarang silahkan salin code script di bawah dan tambahkan pada bagian footer website kalian.

<div class="wa-button">
	<a href="https://wa.me/62822xxxxxxxx?text=Hallo....%20Jaya%20Abadi%20Teknik,%20saya%20mau%20service%20ac%20bagaimana%20caranya%20ya...?"><img src="https://multibisnisindo.com/download/files/41/logo-wa.png" alt="Chat Whatsapp" /></a>
</div>
<div class="call-button">
	<a href="tel:+62822xxxxxxxx"><img src="https://multibisnisindo.com/download/files/42/phone_png49006.png" alt="Call Now" /></a>
</div>

Perhatikan kode 62822xxxxxxxx dan +62822xxxxxxxx, silahkan ganti kode tersebut dengan nomor yang ingin di gunakan.

Perhatikan juga script https://multibisnisindo.com/download/files/41/logo-wa.png dan https://multibisnisindo.com/download/files/42/phone_png49006.png <-> Ini adalah link icon whatsapp dan telp. Maka silahkan sesuaikan dengan link icon yang sudah kalian miliki.

Jika kalian pengguna platform wordpress maka silahkan instal plugin WPCode Snippets Header & Footer, selanjutnya silahkan tambahkan script tersebut pada bagian footer.

Bagi yang menggunakan pltform lain maka silahkan sesuaikan, cari bagian footer dan tambahkan script di sana.

Tambahkan Kode CSS

Tambahkan kode CSS berikut pada file CSS di dalam website kalian agar icon whatsapp dan telephone tampil tetap/melayang di setiap halaman.

.wa-button {
	position:fixed;bottom:100px;right:2px;z-index:1000;
}
.wa-button img {width:60px;display:block;z-index:1000;}

.call-button {
	position:fixed;bottom:30px;right:2px;z-index:1000;
}
.call-button img {width:60px;display:block;z-index:1000;}

.et_pb_scroll_top.et-pb-icon {
  background: rgb(210, 38, 135) !important;
  bottom: 180px !important;
	right: 10px !important;
}

Jika kalian menggunakan platform wordpress dengan tema dari divi theme, maka tambahkan kode CSS di atas melalui menu Divi -> Theme Options.

Bagi yang menggunakan pltform lain maka silahkan sesuaikan, cari bagian CSS dan tambahkan script CSS diatas.