LP Floating Contact

"Floating contact" merujuk pada elemen kontak yang tetap terlihat dan menempel di layar saat pengguna menggulir, seperti tombol atau formulir yang mengambang di sudut atau sisi halaman web.

Tujuannya adalah untuk memudahkan pengunjung menghubungi pemilik situs melalui berbagai kanal seperti telepon, WhatsApp, email, atau obrolan langsung.

Elemen ini juga dapat disebut sebagai tombol aksi mengambang (floating action button) jika berfungsi untuk menampilkan tindakan utama.

Kode:

LP Floating Contact

<div class='lp-floating-contact'>
  <div class='floating-contact-buttons'>
    <a class='floating-whatsapp' href='"https://wa.me/6281234567890' rel='nofollow' target='_blank'>
      <svg viewbox='0 0 24 24'>
        <path d='M16.75,13.96C17,14.09 17.16,14.16 17.21,14.26C17.27,14.37 17.25,14.87 17,15.44C16.8,16 15.76,16.54 15.3,16.56C14.84,16.58 14.83,16.92 12.34,15.83C9.85,14.74 8.35,12.08 8.23,11.91C8.11,11.74 7.27,10.53 7.31,9.3C7.36,8.08 8,7.5 8.26,7.26C8.5,7 8.77,6.97 8.94,7H9.41C9.56,7 9.77,6.94 9.96,7.45L10.65,9.32C10.71,9.45 10.75,9.6 10.66,9.76L10.39,10.17L10,10.59C9.88,10.71 9.74,10.84 9.88,11.09C10,11.35 10.5,12.18 11.2,12.87C12.11,13.75 12.91,14.04 13.15,14.17C13.39,14.31 13.54,14.29 13.69,14.13L14.5,13.19C14.69,12.94 14.85,13 15.08,13.08L16.75,13.96M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C10.03,22 8.2,21.43 6.65,20.45L2,22L3.55,17.35C2.57,15.8 2,13.97 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12C4,13.72 4.54,15.31 5.46,16.61L4.5,19.5L7.39,18.54C8.69,19.46 10.28,20 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4Z'/>
      </svg>
    </a>
  </div>
  <div class='floating-contact-buttons'>
    <a class='floating-phone' href='"tel:+6281234567890'>
      <svg viewbox='0 0 24 24'>
        <path d='M6.62,10.79C8.06,13.62 10.38,15.94 13.21,17.38L15.41,15.18C15.68,14.91 16.08,14.82 16.43,14.94C17.55,15.35 18.78,15.58 20,15.61C20.55,15.61 21,16.05 21,16.6V20C21,20.55 20.55,21 20,21C10.62,21 3,13.38 3,4C3,3.45 3.45,3 4,3H7.4C7.95,3 8.39,3.45 8.39,4C8.42,5.22 8.65,6.45 9.06,7.57C9.18,7.92 9.09,8.32 8.82,8.59L6.62,10.79Z'/>
      </svg>
    </a>
  </div>
</div>

Catatan: Ganti yang bertanda merah dengan nomor yang ingin Anda gunakan.

Demo:

Lihat di sudut bawah bagian kiri perangkat Anda.