LUXEE HELPS
File Lottie Tidak Muncul di Website Undangan? Ini Cara Mengatasi Error SSL & Mixed Content!
📌 Apa yang Menyebabkan Animasi Lottie Tidak Tampil?
Masalah animasi Lottie yang gagal dimuat atau tidak tampil pada website undangan digital biasanya disebabkan oleh masalah Mixed Content SSL/HTTPS. Hal ini terjadi ketika website utama diakses menggunakan protokol aman (https://), namun file JSON animasi Lottie ditarik menggunakan protokol tidak aman (http://), sehingga browser modern otomatis memblokir file tersebut demi alasan keamanan.
Anda baru saja mengunggah file JSON animasi Lottie yang cantik untuk ornamen undangan digital klien. Saat Anda mengedit di Elementor, semuanya terlihat normal. Namun, begitu link dibagikan ke klien, animasi ornamen tersebut tidak muncul sama sekali (blank). Setelah dicek via Chrome Developer Tools (F12), muncul tulisan error merah: "Mixed Content: The page was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint...".
🛠️ Langkah Menyelesaikan Masalah Error SSL & Lottie
Langkah 1: Memeriksa Konsol Error Browser (Chrome DevTools)
Buka halaman website undangan yang bermasalah. Tekan tombol F12 pada keyboard Anda (atau klik kanan di mana saja lalu pilih Inspect/Inspeksi), kemudian klik tab Console. Jika Anda melihat baris pesan error Mixed Content berwarna merah seperti gambar di bawah, maka dipastikan penyebabnya adalah ketidaksesuaian protokol keamanan.
Visual: Pesan error Mixed Content pada Console Chrome Developer Tools
Langkah 2: Memastikan Status SSL Aktif & Hijau di cPanel
Langkah berikutnya, silakan masuk ke dashboard cPanel hosting Anda. Cari dan klik menu bernama SSL/TLS Status pada tab Keamanan (Security).
Pastikan status sertifikat domain Anda sudah berwarna hijau (aman). Jika statusnya masih berwarna merah, tandai domain Anda lalu klik tombol Jalankan AutoSSL (Run AutoSSL), atau hubungi support hosting Anda untuk segera mengaktifkannya.
Visual: Panel pemeriksaan SSL/TLS Status di cPanel Hosting
Jangan sekali-kali mengubah konfigurasi URL WordPress ke HTTPS jika sertifikat SSL di cPanel hosting Anda belum aktif (belum berwarna hijau). Melakukan hal tersebut akan membuat website Anda tidak bisa diakses sama sekali (Lockout).
Langkah 3: Menyesuaikan Pengaturan URL di WordPress
Jika status SSL di hosting sudah hijau, silakan login ke dashboard WordPress Anda. Masuk ke menu Settings → General.
Pada kolom WordPress Address (URL) dan Site Address (URL), perhatikan awalan link web Anda. Jika masih menggunakan http://, silakan ubah atau tambahkan huruf "s" sehingga menjadi https:// untuk link web Anda.
Visual: Mengubah WordPress Address dan Site Address ke HTTPS
Setelah diubah, klik tombol Save Changes di bagian bawah halaman. Anda akan diminta untuk login ulang ke WordPress. Silakan login kembali, dan file animasi Lottie di undangan Anda kini sudah dapat ter-load dengan sempurna di semua browser.
🔗 Modul Panduan Terkait
Simak juga cara menggunakan Lottie dan optimasi website undangan Anda:
💡 Pertanyaan Sering Ditanya (FAQ)
Hal ini terjadi karena Anda saat masuk ke dashboard WordPress menggunakan link HTTP biasa, sehingga file Lottie diunggah dengan prefix HTTP. Namun, ketika klien membuka web Anda via HTTPS, protokol Mixed Content memblokir pemanggilan file HTTP tersebut. Pengaturan HTTPS di Settings General WordPress akan membereskan hal ini.
Jika Anda terkunci keluar (lockout), Anda dapat memulihkannya dengan mengedit file wp-config.php melalui File Manager di cPanel, lalu tambahkan baris berikut untuk menimpa URL kembali ke HTTP sementara waktu:
define('WP_HOME','http://domainanda.com');
define('WP_SITEURL','http://domainanda.com');
Tidak perlu. Mengubah konfigurasi URL secara manual di menu General Settings WordPress jauh lebih ringan, bersih, dan meminimalkan beban plugin di server WordPress Anda.