Komponen Countdown — Timer Hitung Mundur

Apa itu: Timer hitung mundur yang menampilkan sisa waktu menuju suatu tanggal atau durasi tertentu. Kapan pakai: Saat kamu ingin menciptakan urgensi nyata — flash sale dengan deadline pasti, promo eksklusif per visitor, atau pre-launch sebelum produk dirilis.

Apa Itu Countdown?

Panel properti komponen countdown di builder

Countdown menampilkan angka hari, jam, menit, dan detik yang terus berdetak. Secara psikologis, timer yang bergerak mendorong pengunjung untuk mengambil keputusan lebih cepat. Komponen ini mendukung tiga mode berbeda tergantung jenis urgensi yang ingin kamu ciptakan.

Properties — Visual

Property	Pilihan	Default	Keterangan
Template	Cards / Minimal / Circle / Badge	Cards	Gaya tampilan timer

Template

Cards — kotak persegi per unit waktu (Days, Hours, dll.). Paling umum, mudah dibaca.
Minimal — angka polos dengan separator titik dua. Cocok untuk desain clean/minimalis.
Circle — angka di dalam cincin lingkaran. Estetik, cocok untuk countdown produk premium.
Badge — angka dalam chip/badge kecil. Compact, cocok disisipkan di tengah teks atau hero.

Properties — Mode Timer

Property	Pilihan	Keterangan
Mode	Fixed Date / Evergreen Persistent / Evergreen Reset on Visit	Cara countdown dihitung

Fixed Date

Timer menghitung mundur ke satu tanggal dan waktu yang kamu tentukan via datetime picker. Ketika waktu habis, timer berhenti dan aksi "When Expired" dijalankan.

Cocok untuk: flash sale, pendaftaran webinar, early-bird pricing dengan deadline nyata.

Evergreen Persistent

Timer mulai dari durasi yang kamu atur (dalam jam) sejak visitor pertama kali membuka halaman. Durasi disimpan via cookie, jadi kalau visitor menutup tab dan kembali, timer melanjutkan dari sisa waktu — bukan restart.

Contoh: atur 24 jam → visitor A buka jam 10:00 → timer berakhir jam 10:00 keesokan harinya, tidak peduli berapa kali mereka refresh.

Cocok untuk: "Promo khusus untukmu selama 24 jam", welcome offer, trip wire funnel.

Evergreen Reset on Visit

Timer mulai dari durasi yang kamu atur setiap kali visitor membuka atau me-refresh halaman. Tidak ada persistensi.

⚠️Hati-hati dengan mode ini

Visitor yang cerdas akan menyadari timer reset saat halaman di-refresh. Ini bisa merusak kepercayaan. Gunakan hanya kalau target audiensmu tidak terlalu tech-savvy, atau kalau urgency "palsu" sudah jadi norma di niche-mu.

Properties — Display Units

Centang unit waktu yang ingin ditampilkan:

Unit	Checkbox
Days	Ya / Tidak
Hours	Ya / Tidak
Minutes	Ya / Tidak
Seconds	Ya / Tidak

Untuk timer kurang dari 1 hari, sembunyikan "Days" agar angka tidak selalu "0".

Properties — When Expired

Aksi	Konfigurasi Tambahan
Hide	Timer menghilang begitu habis — halaman tetap bisa diakses tapi tanpa countdown
Show Message	Input teks pesan yang ditampilkan menggantikan timer
Redirect	Input URL tujuan — visitor otomatis diarahkan ke halaman lain

Properties — Warna & Styling

Property	Keterangan
Number Color	Warna angka hitung mundur
Label Color	Warna label "Days", "Hours", dll.
Separator Color	Warna titik dua (`:`) pemisah antar unit
Timer Card Background	Warna latar kotak angka (khusus template Cards)
Border Color	Warna border kotak (khusus Cards)
Border Width	Ketebalan border dalam px (khusus Cards)
Border Radius	Kelengkungan sudut kotak dalam px (khusus Cards)

Alur Status Timer

stateDiagram-v2
    [*] --> Running : Halaman dibuka, waktu masih ada
    Running --> Expired : Waktu habis
    Expired --> Hidden : When Expired = Hide
    Expired --> MessageShown : When Expired = Show Message
    Expired --> Redirected : When Expired = Redirect
    Hidden --> [*]
    MessageShown --> [*]
    Redirected --> [*]

Contoh Penggunaan

1. Flash Sale — Fixed Date + Hide

Pilih Mode Fixed Date dan arahkan ke tanggal dan jam berakhirnya promo (misalnya Minggu pukul 23:59). Set When Expired ke Hide agar timer menghilang otomatis setelah promo selesai — halaman tetap aktif tapi tanpa countdown yang kosong. Tambahkan teks pendukung di bawah timer seperti "Promo berakhir [tanggal]. Jangan sampai ketinggalan!" untuk memperjelas konteks.

Countdown Fixed Date mode di canvas dengan Template Cards dan 4 unit waktu aktif, panel menunjukkan datetime picker dan When Expired = Hide

2. Welcome Offer 24 Jam — Evergreen Persistent

Atur Mode Evergreen Persistent dengan durasi 24 jam. When Expired diset ke Show Message dengan isi pesan misalnya "Promo spesial sudah berakhir. Tapi kamu masih bisa pesan dengan harga normal." Setiap pengunjung mendapat countdown pribadi 24 jam sejak pertama membuka halaman — cookie menjaga timer tetap berjalan meski mereka tutup dan buka kembali tab.

Panel Evergreen Persistent dengan durasi 24 jam dan Show Message diset, contoh teks expired message terlihat di input field

3. Pre-Launch Page — Fixed Date + Redirect

Atur Mode Fixed Date ke tanggal dan jam peluncuran produk, lalu set When Expired ke Redirect dan isi URL halaman produk utama. Pengunjung yang datang sebelum launch melihat countdown berdetak; tepat saat waktu habis, mereka otomatis diarahkan ke halaman beli tanpa perlu refresh.

Countdown Fixed Date dengan When Expired = Redirect dan URL field terisi, simulasi state expired di builder

Gotchas

Evergreen Reset on Visit jangan dipakai di audience yang savvy. Mereka akan refresh, lihat timer mulai dari awal, dan langsung hilang kepercayaan.
Test "When Expired" sebelum publish. Kamu bisa simulasi dengan mengatur tanggal ke waktu yang sudah lewat, lalu preview halaman.
Hanya tampilkan unit yang relevan. Kalau promomu hanya 2 jam, sembunyikan "Days" — angka "0 Days" tidak menambah urgensi, justru mengurangi.
Warna Number dan Timer Card Background harus kontras. Pastikan angka terbaca jelas di atas background card.

Siap buat landing page pertamamu?