Wednesday, October 4, 2023

Membuat Floating Button Whatsapp di Joomla 3.8

Saat ini WhatsApp menjadi salah satu sarana komunikasi yang banyak digunakan, jika anda ingin menggunakan WhatsApp menjadi media komunikasi dengan customer, anda dapat menambahkan sebuah tombol pada halaman website joomla yang anda miliki untuk memudahkan customer atau pengunjung website menghubungi anda lewat pesan WhatsApp.

Ada beberapa langkah yang harus anda lakukan dalam membuat floating button WhatsApp. Pertama anda harus membuat tombolnya terlebih dahulu, kemudian membuat menata design dan yang terakhir memasang tautan ke WhatsApp.

Kebetulan saat ini saya menggunakan Joomla versi 3.8 dengan template Shaper Helix3, Anda bisa membuat design tombol sesuai selera, Anda hanya perlu menyisipkan CSS atau JavaScript untuk itu. Bagian terpenting adalah membuat tautan ke WhatsApp Anda. 

  • Pertama Anda harus login ke Admin page Joomla, pilih menu Extensions - Template - Style - Shaper_helix3
  • Masuk ke Custom Code

  • Isikan script before </head>  
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" />
  • Script before </body>
/* Add WA floating button CSS */
.floating {
position: fixed;
width: 60px;
height: 60px;
bottom: 40px;
right: 40px;
background-color: #25d366;
color: #fff;
border-radius: 50px;
text-align: center;
font-size: 30px;
box-shadow: 2px 2px 3px #999;
z-index: 100;
}
  • Selanjutnya membuat module pada website Joomla Anda, Masuk menu extensions - modules - create new dengan type custom
<!-- render the button and direct it to wa.me -->
<a href="https://wa.me/62000000000?text=Saya%20ingin%20info%20mengenai%20produk%20bisa%20dibantu?" class="floating" target="_blank">
<i class="fab fa-whatsapp fab-icon"></i>
</a>
  • Simpan di posisi menu dan berikut hasilnya


No comments:

Post a Comment

Silahkan berkomentar, mohon tidak meninggalkan LINK didalam komentar. Terima kasih