LUXEE HELPS
Kuota Tiket Lambat Terisi? Pasang Live Seat Availability Counter & Scarcity Bar!
📌 Apa itu Live Seat Availability Counter?
Live Seat Availability Counter adalah widget indikator keterisian kuota kursi pendaftaran yang dilengkapi progress bar animasi. Fitur ini secara psikologis menciptakan efek urgensi (urgency / scarcity) yang mendorong calon peserta untuk segera mendaftar sebelum sisa kuota habis.
Banyak calon peserta menunda-nunda pendaftaran webinar atau seminar karena merasa kuota masih banyak. Dengan menampilkan bar visual bahwa kuota sudah terisi 86% dan hanya tersisa 7 kursi lagi, calon peserta akan langsung terdorong mengambil keputusan pendaftaran saat itu juga.
✨ Keunggulan Fitur
- Perhitungan Persentase Otomatis: Progress bar otomatis bergerak sesuai perbandingan kuota terisi terhadap total kapasitas.
- Efek Warna Gradien Menarik: Bar animasi bernuansa emas bronze dan coral yang sangat estetik.
- Dapat Disesuaikan Kapan Saja: Mengubah angka sisa kursi sangat mudah dilakukan langsung di editor.
💻 Kode Sumber Lengkap (HTML + CSS + JS)
<!-- WIDGET INDIKATOR KUOTA KURSI -->
<div class="luxee-seat-box">
<div class="seat-info-header">
<span class="seat-label">🔥 Sisa Kuota Pendaftaran:</span>
<span class="seat-count" id="seat-remaining-text"><strong id="seat-number">7</strong> Kursi Tersisa</span>
</div>
<div class="seat-progress-track">
<div class="seat-progress-fill" id="seat-progress-bar" style="width: 86%;"></div>
</div>
<div class="seat-meta">
<span>Total Kuota: <strong id="seat-total">50</strong> Peserta</span>
<span>Terisi: <strong id="seat-filled">43</strong> (86%)</span>
</div>
</div>
<style>
.luxee-seat-box {
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(226, 141, 117, 0.3);
border-radius: 10px;
padding: 18px 20px;
margin: 16px 0;
}
.seat-info-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
font-size: 0.95rem;
}
.seat-label {
color: #F4F1EA;
font-weight: 600;
}
.seat-count {
color: #E28D75;
font-weight: 700;
}
.seat-progress-track {
width: 100%;
height: 10px;
background: rgba(255, 255, 255, 0.1);
border-radius: 20px;
overflow: hidden;
position: relative;
}
.seat-progress-fill {
height: 100%;
background: linear-gradient(90deg, #C29B64, #E28D75);
border-radius: 20px;
transition: width 1s ease-in-out;
}
.seat-meta {
display: flex;
justify-content: space-between;
margin-top: 8px;
font-size: 0.8rem;
color: #8E8A80;
}
</style>
<script>
// Fungsi penyesuaian kuota dinamis
function updateSeatCounter(total, terisi) {
const sisa = total - terisi;
const persen = Math.round((terisi / total) * 100);
const elNumber = document.getElementById('seat-number');
const elTotal = document.getElementById('seat-total');
const elFilled = document.getElementById('seat-filled');
const elBar = document.getElementById('seat-progress-bar');
if (elNumber && elTotal && elFilled && elBar) {
elNumber.innerText = sisa;
elTotal.innerText = total;
elFilled.innerText = terisi + ' (' + persen + '%)';
elBar.style.width = persen + '%';
}
}
</script>🛠️ Langkah Mengatur Angka Kuota
- Buka widget HTML di atas pada editor Elementor Anda.
- Ubah angka pada
<strong id="seat-number">7</strong>(sisa kursi) dan<strong id="seat-total">50</strong>(total kapasitas). - Ubah nilai persentase pada
style="width: 86%;"sesuai rasio kuota yang Anda inginkan.
🔗 Modul Panduan Terkait
Langkah berikutnya dalam penambahan fitur interaktif:
💡 Pertanyaan Sering Ditanya (FAQ)
Widget ini dirancang statis-dinamis melalui HTML/JS ringan agar tidak membebani database. Anda dapat memperbarui angka kuota secara berkala dari editor Elementor sesuai jumlah pendaftar di menu Elementor Submissions.
Bisa. Pada baris CSS .seat-progress-fill, ubah nilai linear-gradient(90deg, #C29B64, #E28D75) menjadi kode warna gradien yang Anda inginkan (misal: linear-gradient(90deg, #3B82F6, #10B981)).
Posisi paling efektif adalah tepat di atas atau di samping kartu formulir pendaftaran / tombol CTA beli tiket.