Maksimalkan RSVP Klien: Panduan Lengkap Fitur & Konfigurasi Fase B (Post-Immersive) Laxy Motions!

Fase B (Post-Immersive) Laxy Motions adalah area scroll bebas (free-scroll) yang menyajikan konten detail dan fitur administrasi interaktif setelah slide terakhir Fase A (vProg 5.0). Zona ini menyatukan kisah cinta mempelai, galeri media, hingga formulir RSVP live yang terhubung langsung ke Google Sheets secara real-time.

---

🛠️ Anatomi & Fitur Interaktif Fase B

Mulai vProg 4.9 (VPROG_EXIT_THRESHOLD, exit threshold di parallax-engine.js), engine parallax berhenti mencegat scroll, swipe, dan ketukan. Gerakan terakhir dari slide Countdown membawa layar ke vProg 5.0 (VPROG_MAX), lalu halaman berubah dari model penumpukan layer visual menjadi halaman dokumen HTML panjang biasa dengan pergerakan scroll normal. Panggung parallax memudar antara vProg 5.0 dan 5.4 hingga opacity 0.2, dan tetap terlihat samar di belakang konten Fase B.

Langkah 1: Memetakan Struktur Konten Fase B

Bagian ini didesain untuk menampung konten informatif yang membutuhkan interaksi intensif dari tamu undangan:

• Love Story (Kisah Cinta): Menampilkan visual timeline perjalanan asmara kedua mempelai mulai dari perkenalan, lamaran, hingga jenjang pernikahan. Template menampilkan maksimal 4 cerita.
• Galeri Media (Foto & Video): Hingga 10 foto yang dilengkapi efek lightbox pop-up zoom saat foto diklik, ditambah satu video YouTube opsional.
• Live Streaming: Tombol Live Streaming tidak tampil di Fase B. Tombol itu muncul di slide Countdown pada Fase A (satu tombol untuk setiap link yang diisi: YouTube, Zoom, atau Instagram); seksi live-section di HTML disembunyikan oleh parallax.css.
• Kado Digital (Digital Gift): Menyajikan informasi nomor rekening bank, e-wallet, dan alamat kirim kado fisik untuk memfasilitasi kado cashless.
• Dresscode: Deskripsi aturan busana dan lingkaran contoh warna dari kode hex yang diisi.
• Protokol Kesehatan: Empat ikon protokol bawaan: Gunakan Masker, Cuci Tangan, Jaga Jarak, dan Hindari Sentuhan.
• RSVP & Buku Tamu Live: Elemen terpenting di mana tamu menuliskan konfirmasi kehadiran serta doa restu. Data dikirim ke Google Sheets dan ucapan restu akan langsung muncul (live update) di layar undangan.
• Ucapan & Doa: Daftar ucapan tamu yang dimuat dari Google Sheets, 20 ucapan per halaman dengan tombol "Tampilkan lebih banyak ucapan", ditambah kalimat terima kasih yang menyebut jumlah ucapan.
• Penutup (Outro & Footer): Ucapan syukur penutup dari keluarga mempelai serta identitas branding vendor.
• Turut Mengundang: Teks daftar keluarga atau kerabat yang turut mengundang, tampil di antara penutup dan footer brand.

Tampilan galeri dan kado berbeda per template. Galeri: Jawa dan Banjar memakai grid foto, Bali memakai deretan foto yang bergeser otomatis (berhenti saat kursor berada di atasnya), dan Minang memakai carousel dengan tombol sebelumnya/berikutnya, thumbnail, dan putar otomatis. Kado: Jawa, Bali, dan Banjar menyembunyikan rekening di balik tombol "Tampilkan Rekening", sedangkan Minang memakai tab Transfer Bank / Kirim Kado Fisik dengan slider kartu rekening. Keterangan rekening (misal: "Rekening utama") tampil di setiap kartu rekening keempat template.

Langkah 2: Mengontrol Visibilitas Seksi via data.json (Toggle Status)

Anda dapat mengaktifkan atau menonaktifkan seksi tertentu di Fase B sesuai kebutuhan klien. Buka file data.json dan sesuaikan nilai boolean di objek show:

{
  "show": {
    "lovestory": true,
    "galeri": true,
    "kado": true,
    "dresscode": true,
    "live": true,
    "protokol": true,
    "turut_mengundang": true,
    "rsvp": true,
    "ucapan": true
  }
}

Arti tiap kunci: lovestory kisah cinta, galeri foto dan video prewedding, kado rekening dan alamat kado, dresscode aturan busana, live tautan live streaming, protokol protokol kesehatan, turut_mengundang daftar keluarga yang turut mengundang, rsvp form kehadiran, dan ucapan daftar ucapan tamu.

Nilai false membuat assets/js/app.js menghapus seksi tersebut dari halaman. Nilai true selalu menampilkannya. Jika kuncinya dihapus, seksi tampil otomatis hanya bila datanya terisi. File JSON tidak boleh berisi komentar //, jadi jangan menambahkan keterangan di dalam file.

Langkah 3: Integrasi API Real-time RSVP

Untuk mengaktifkan pengiriman data RSVP dan doa restu secara live ke database Google Sheets, pastikan Anda mengisi variabel rsvpApiUrl pada data.json dengan link deployment Apps Script (Web App URL) Anda:

{
  "undangan_id": "andy-zhea",
  "rsvpApiUrl": "https://script.google.com/macros/s/AKfycb.../exec"
}

Jika nilai rsvpApiUrl ini dikosongkan (""), template secara otomatis akan beroperasi dalam Mode Demo (dapat menerima submit RSVP tetapi datanya akan hilang saat halaman di-refresh).

Mode demo juga bisa dipaksa dengan "disable_rsvp_submit": true, walaupun rsvpApiUrl sudah terisi. Form RSVP dan ucapan tidak mengirim data, lalu menampilkan judul Mode Demo Aktif beserta isi rsvp_disabled_message.

Selain itu, pengiriman RSVP dan ucapan tertutup otomatis setelah acara terakhir selesai, yaitu lewat dari waktu selesai acara, atau 24 jam setelah waktu mulai jika selesai kosong. Tamu yang mencoba mengirim akan melihat pesan Pengiriman Ucapan & Doa Ditutup.