Cara pasang & pakai Comments Plugin

Tambahkan dua potong kode berikut ke halaman website kamu:

a. Wadah komentar — taruh di tempat komentar ingin muncul:

<div class="adityoarr-comments" data-thread-id="slug-artikel-kamu"></div>

b. Script loader — taruh sekali saja di mana pun setelah wadah di atas (idealnya sebelum </body>):

<script src="https://apps.adityoarr.com/comments-plugin/embed.js" async></script>

Selesai. Widget akan otomatis dimuat, di-lazy-load saat mulai terlihat di layar, dan menyesuaikan tingginya sendiri sesuai jumlah komentar.

Supaya tidak seperti “sihir”, berikut alurnya:

1. Script embed.js mencari semua elemen div.adityoarr-comments di halaman.
2. Untuk tiap elemen, script membuat satu <iframe> yang sandboxed (terisolasi) dan mengarah ke halaman widget di server kami.
3. Iframe baru benar-benar dimuat saat posisinya sudah mendekati area layar yang terlihat (lazy loading), supaya tidak memperlambat halaman kamu.
4. Isi komentar, form posting, dan proses login anonim semuanya berjalan di dalam iframe — tidak ada script dari kami yang berjalan langsung di halaman kamu.
5. Iframe mengirim pesan ke halaman induk untuk memberi tahu tinggi kontennya, sehingga tinggi iframe otomatis menyesuaikan (tanpa scrollbar aneh). Pesan ini divalidasi asalnya, jadi situs lain tidak bisa memalsukannya.

Atribut data-thread-id menentukan “thread komentar” mana yang ditampilkan. Gunakan nilai yang unik dan stabil untuk tiap halaman/postingan, misalnya slug artikel atau ID postingan:

<div class="adityoarr-comments" data-thread-id="cara-membuat-nextjs-plugin"></div>

Jika atribut ini tidak diisi, widget akan otomatis memakai window.location.pathname sebagai fallback. Ini berfungsi, tapi berisiko: kalau suatu saat URL halaman berubah (redesign, migrasi slug, dsb.), komentar lama akan “terlepas” dari halaman barunya. Sebaiknya selalu set data-thread-id secara eksplisit dan jangan mengubahnya setelah dipublikasikan.

Kamu bisa menaruh lebih dari satu wadah .adityoarr-comments di halaman yang sama — misalnya untuk daftar produk yang masing-masing punya komentarnya sendiri. Cukup beri data-thread-id yang berbeda untuk tiap wadah; satu tag <script> tetap cukup untuk menginisialisasi semuanya.

<div class="adityoarr-comments" data-thread-id="produk-1"></div>
<div class="adityoarr-comments" data-thread-id="produk-2"></div>

<script src="https://apps.adityoarr.com/comments-plugin/embed.js" async></script>

HTML statis / WordPress / CMS lain: tempel kedua snippet langsung ke template halaman (misalnya single.php di WordPress, atau blok “Custom HTML”).

Next.js / React: muat script dengan next/script memakai strategy="lazyOnload", dan render wadah <div>-nya dari dalam komponen.

import Script from "next/script";

export default function BlogPost() {
  return (
    <>
      <div className="adityoarr-comments" data-thread-id="slug-artikel" />
      <Script
        src="https://apps.adityoarr.com/comments-plugin/embed.js"
        strategy="lazyOnload"
      />
    </>
  );
}

Vue / Nuxt / Svelte / framework lain: pola yang sama berlaku — render wadah <div> lalu muat embed.js setelah komponen ter-mount (misalnya di onMounted / useEffect yang setara).

Kalau website kamu menerapkan CSP yang ketat, tambahkan izin berikut agar widget bisa dimuat dengan benar:

script-src https://apps.adityoarr.com;
frame-src https://apps.adityoarr.com;

Tanpa dua directive ini, browser bisa memblokir script loader atau iframe widget secara diam-diam — biasanya muncul sebagai error di console, bukan error yang terlihat di halaman.

Komentar akan tetap tampil walau kamu belum mendaftarkan domain. Tapi kalau kamu butuh moderasi (approve/hapus/tandai spam) dan pengaturan per situs, daftarkan domain kamu:

1. Buka halaman login dan masuk dengan akun Google.
2. Di dashboard, klik Add New Site lalu isi nama situs dan domainnya.
3. Kelola komentar masuk dari menu Dashboard → Comments.

Widget tidak muncul sama sekali. Pastikan elemen <div class="adityoarr-comments"> ada di DOM sebelum script embed.js dieksekusi, dan cek console browser untuk pesan error CSP atau CORS.

Tinggi widget tidak menyesuaikan / terpotong. Biasanya karena pesan postMessage untuk resize diblokir. Pastikan tidak ada extension browser atau proxy yang memfilter postMessage, dan domain kamu tidak memblokir origin apps.adityoarr.com.

Komentar gagal terkirim. Cek console untuk error dari /api/comments — penyebab paling umum adalah rate limit (terlalu banyak komentar dalam waktu singkat) atau koneksi yang lambat saat verifikasi token.

Apakah saya perlu install package npm apa pun? Tidak. Widget ini berjalan sebagai layanan yang sudah di-hosting — kamu hanya menempelkan snippet HTML/JS di atas.

Apakah komentar pengunjung memerlukan akun/pendaftaran? Tidak. Secara default pengunjung berkomentar secara anonim; mereka tidak diminta membuat akun.

Apakah bisa dipakai di banyak domain sekaligus? Bisa. Daftarkan tiap domain lewat dashboard agar masing-masing punya pengaturan dan moderasi sendiri.