Atasi Kendala Instan: Solusi 4 Error Terpopuler Template Laxy Motions!

Troubleshooting kendala teknis Laxy Motions meliputi perbaikan izin autoplay audio browser, pemulihan URL endpoint Apps Script untuk RSVP, penyusunan tag metadata Open Graph untuk share link, serta kompresi aset gambar prewedding. Panduan ini dirancang untuk mendiagnosis dan memulihkan masalah tersebut secara instan.

---

🛠️ Langkah Langkah Pemecahan Masalah

Di bawah ini adalah langkah-langkah pemecahan masalah (troubleshooting) untuk memperbaiki empat kesalahan konfigurasi yang paling sering dialami oleh vendor:

Langkah 1: Mengaktifkan Autoplay Musik di Semua Browser

Kebijakan keamanan browser modern (terutama Safari pada iOS dan Chrome di Android) melarang keras musik berputar secara otomatis sebelum ada aksi interaksi fisik dari pengguna di halaman web tersebut.

Solusi Laxy Motions:

• Undangan Laxy Motions menggunakan splash screen (Cover) di Scene 0 dengan tombol "Buka Undangan".
• Saat tombol tersebut diklik oleh tamu, file app.js secara otomatis memicu fungsi play() pada elemen audio. Ini dianggap sebagai interaksi yang valid oleh browser, sehingga musik akan berputar lancar.
• Troubleshooting: Jika musik tetap tidak berputar, pastikan file MP3 yang Anda tautkan di data.json adalah link langsung (direct link) ke file fisik MP3 yang valid (bukan link halaman cloud storage seperti Google Drive biasa yang membutuhkan halaman pratinjau).
• Pilih MP3 untuk hasil paling andal: file MP3 diputar langsung oleh browser saat tombol diklik. Musik dari YouTube diputar lewat pemutar YouTube tersembunyi, sehingga hasilnya bergantung pada aturan autoplay masing-masing browser. Jika kolom MP3 dan YouTube sama-sama diisi, yang diputar adalah MP3.
• Musik otomatis berhenti sementara saat tamu berpindah tab atau aplikasi, lalu lanjut saat tamu kembali ke undangan.

Langkah 2: Memperbaiki RSVP & Ucapan Gagal Terkirim (Error 500 / API)

Masalah ini terjadi ketika tamu mengisi form kehadiran atau ucapan, namun sistem memunculkan notifikasi kegagalan pengiriman.

Langkah Audit:

1. Buka file data.json dan periksa parameter rsvpApiUrl. Pastikan tautannya sama persis dengan URL Web App dari deployment Google Apps Script Anda.
2. Pastikan parameter undangan_id di data.json terisi nilai yang sama persis dengan variabel UNDANGAN_ID di dalam kode Code.gs di Apps Script Anda.
3. Pada editor Apps Script, pastikan Anda telah melakukan New Deployment (bukan sekadar menindih deployment lama) dengan setelan:
   • Execute as: Me (Email Anda)
   • Who has access: Anyone (Jika disetel ke Only me, form akan memunculkan error CORS/500).

Langkah 3: Menampilkan Gambar Preview Link di WhatsApp

Saat tautan undangan dibagikan ke WhatsApp, Telegram, atau sosial media lainnya, seringkali gambar pratinjau (thumbnail) tidak muncul.

Solusi Setup Open Graph:

• Di Data Editor, isi kolom gambar, judul, dan deskripsi share di tab Info Utama & Cover. Pakai alamat gambar lengkap (absolut) yang diawali https://, misalnya:

  https://domainanda.com/andy-zhea/assets/img/cover-img.webp

• Klik Generate All, buka tab Thumbnail WA, lalu klik Salin Potongan Meta. Potongan ini berisi empat baris: og:title, og:description, og:image, dan <title>.
• Buka berkas index.html undangan, ganti keempat baris yang sama di dalam tag <head> dengan potongan tersebut, lalu unggah ulang.
• Kenapa harus di index.html: Field meta.og_image, meta.og_title, dan meta.og_description di data.json dipasang oleh JavaScript (app.js) setelah halaman dimuat. Crawler WhatsApp dan Facebook tidak menjalankan JavaScript, sehingga pratinjau share hanya membaca tag statis di index.html. Bawaannya tag-tag itu masih kosong.
• Catatan Penting: WhatsApp memiliki sistem cache yang ketat. Jika gambar cover baru saja diganti, gunakan tool resmi Facebook Sharing Debugger untuk melakukan Scrape Again agar server WhatsApp memperbarui cache pratinjau gambar Anda.

Langkah 4: Mengatasi Parallax Patah-patah (Optimalisasi Kecepatan)

Visual 3D parallax terasa lag, berat, atau patah-patah saat tamu melakukan scroll di HP Android kelas menengah ke bawah.

Solusi Optimasi Aset:

• Ukuran Berkas Gambar: Batasi ukuran berkas gambar Anda. Gambar background (background-img.webp) dan foto couple (couple-img.webp) maksimal berukuran 500KB. Sangat dilarang memasukkan foto langsung hasil kamera DSLR (5MB+) tanpa kompresi.
• Gunakan WebP: Konversikan seluruh aset berformat PNG atau JPG Anda ke format WebP menggunakan converter gratis. Format WebP menawarkan kompresi data hingga 30% lebih ringan tanpa mengurangi kualitas visual di layar HP.