cara menambahkan live chat ke website kamu tanpa bikin lambat

Live chat seharusnya hampir tidak membebani halamanmu sampai ada pengunjung yang benar-benar ingin ngobrol. Panduan ini menunjukkan apa saja yang dimuat widget chat sebelum klik pertama, apa yang perlu dicek sebelum memilih satu, cara memasang Spookat dalam beberapa menit, dan cara membuktikan di DevTools bahwa halamanmu tetap cepat.

biaya widget chat sebelum ada yang klik

Kebanyakan pengunjung tidak pernah membuka chat. Mereka membaca, scroll, mungkin membeli, lalu pergi. Apa pun yang dimuat widget saat halaman dibuka, tetap dibayar oleh setiap pengunjung, termasuk yang pakai HP murah dengan sinyal lemah.

Biaya itu terdiri dari empat bagian:

• Byte. JavaScript, CSS, font, gambar, dan sering juga iframe dengan dokumennya sendiri. JavaScript yang paling mahal: browser mengunduhnya, mem-parse-nya, lalu menjalankannya di main thread, thread yang sama yang mengurus scroll dan tap.
• Request. Setiap request adalah perjalanan pulang-pergi, dan request ke domain baru juga harus membayar lookup DNS dan handshake TLS. Widget yang langsung menghubungi servernya saat halaman dimuat menambahkan semua itu ke setiap page view.
• Penyimpanan. Cookie, localStorage, dan IndexedDB yang ditulis sebelum ada interaksi apa pun. Di Uni Eropa, hal ini bisa menentukan apakah kamu perlu persetujuan bahkan sebelum widget dimuat.
• Waktu di main thread. Kode yang berjalan saat startup bersaing dengan kodemu sendiri. Lighthouse melaporkannya sebagai Total Blocking Time, dan itu terlihat di skormu.

Empat widget di halaman perbandingan kami memuat antara 220 dan 509 kb (gzip) sebelum ada yang klik. Kami mengukurnya pada 2026-09-26 dengan memuat setiap widget di halaman tes kosong dan menjumlahkan byte yang ditransfer; angka dan sumbernya ada di /vs. Sebagai perbandingan, teks seluruh artikel ini kurang dari 20 kb.

Semua itu tidak diperlukan untuk menampilkan sebuah tombol. Tombol hanya beberapa ratus byte HTML dan CSS. Sisanya (panel chat, koneksi ke server, riwayat) baru diperlukan setelah seseorang mengkliknya.

apa yang dicek sebelum memilih widget

Kamu bisa menilai widget chat mana pun dengan browser dan sepuluh menit. Ini yang perlu dilihat, diurutkan dari yang paling berpengaruh ke pengunjungmu.

berat sebelum klik

Buka halaman demo vendor atau situs staging kamu sendiri, buka DevTools, lalu reload dengan cache dimatikan. Filter tab Network berdasarkan domain vendor dan jumlahkan ukuran yang ditransfer. Apa pun di atas beberapa kilobyte sebelum klik adalah kode yang diunduh pengunjungmu demi panel yang tidak pernah dibuka oleh kebanyakan dari mereka.

request sebelum klik, dan ke mana

Hitung request-nya dan catat domainnya. Widget yang berbicara ke API-nya saat halaman dimuat mengirim sesuatu tentang setiap pengunjung, setidaknya bahwa mereka ada dan sedang di halaman mana. Beberapa juga memuat analytics atau error tracking dari pihak ketiga.

cookie dan penyimpanan sebelum klik

Lihat tab Application setelah load yang bersih, tanpa menyentuh widget. Cookie yang dipasang domain widget, atau key penyimpanan yang ditulisnya, adalah yang mungkin harus dicakup oleh banner persetujuan. Kami bukan pengacaramu, dan aturannya beda di tiap negara, jadi tanyakan ke pengacaramu apa yang berlaku untuk situsmu. Kasus yang paling mudah dijelaskan adalah widget yang tidak menyimpan apa pun sampai pengunjung memulai chat.

di mana timmu membalas

Chat hanya sebagus balasannya. Kalau membalas berarti membuka satu dashboard lagi, harus ada yang membiarkan tab itu terbuka seharian. Kalau chat masuk ke tempat timmu sudah ngobrol (Slack, Discord), balasan cukup satu pesan di thread.

berapa biayanya kalau tim bertambah

Harga per seat menagih setiap orang yang mungkin membalas. Harga per resolusi menagih setiap balasan. Harga per situs menagih situsnya, siapa pun yang membalas dan seberapa sering pun.

di HP

Cek launcher di layar selebar 375 px. Launcher tidak boleh menutupi tombolmu sendiri, dan harus minimal 44 px supaya mudah dijangkau jempol. Buka panelnya lalu ketik: keyboard tidak boleh menutupi kolom input.

langkah demi langkah: live chat dengan spookat

Spookat dibangun berdasarkan pengecekan di atas. Snippet-nya memuat satu launcher kecil dari CDN kami, dengan tampilan situsmu sudah ada di dalamnya. Launcher ini membuat 0 request ke API kami sebelum klik dan tidak memasang cookie. Timmu membalas di thread Slack atau postingan forum Discord. Biayanya $4.99 per bulan per situs di broke af, dengan anggota tim tanpa batas, dan masa trial-nya 14 hari tanpa kartu.

1. ambil snippet kamu

Masuk ke dashboard dan tambahkan situsmu. Halaman instalasi menampilkan snippet dengan site key kamu yang sudah terisi, plus tombol salin. Kamu bisa langsung membukanya dengan domainmu di alamat:

https://app.spookat.com/install?domain=your-domain.com

2. tempel sebelum tag body penutup

Satu tag, di mana saja di halaman, idealnya tepat sebelum </body>:

<script src="https://cdn.spookat.com/s/YOUR_SITE_KEY.js" async></script>

async artinya browser tetap merender halamanmu sambil mengambil file, lalu menjalankannya begitu file tiba. File itu adalah launcher: sebuah tombol, style-nya, dan tampilan yang kamu publish di dashboard. Build-nya gagal kalau ukurannya melewati 4 kb (gzip). Pada 2026-09-27 ukurannya 2,0 kb.

Kalau situsmu single-page app, taruh tag-nya di template HTML root, bukan di komponen yang dirender ulang. Launcher mengecek apakah dirinya sudah ada, jadi salinan kedua tidak melakukan apa-apa, tapi satu tag di satu tempat lebih mudah dipahami.

3. pilih tampilan

Ada 8 style dan 12 font yang di-host sendiri, ditambah font sistem pengunjung. Pilih di dashboard lalu publish; launcher mengambil tampilan baru dalam satu menit. Atau atur langsung di halaman, di atas snippet, di mana pengaturan ini mengalahkan dashboard:

<script>
  window.Spookat = { style: "clean", font: "system", accent: "#2F6FEB", side: "right" };
</script>
<script src="https://cdn.spookat.com/s/YOUR_SITE_KEY.js" async></script>

font: "system" sama sekali tidak mengunduh font. Font lain datang dari CDN kami, hanya setelah klik, tidak pernah dari Google. accent menerima warna hex, dan warna teks di atasnya dipilih berdasarkan kontras. Daftar lengkap key ada di dokumentasi.

4. hubungkan slack atau discord

Di dashboard, hubungkan sebuah channel. Kamu menyetujui koneksinya langsung di Slack atau Discord, lalu memilih channel dari daftar. Bukan admin workspace? Dashboard memberimu link sekali pakai untuk orang yang admin, berlaku 7 hari, dan dia tidak perlu akun Spookat.

Sejak itu, setiap percakapan menjadi thread di Slack atau postingan forum di Discord.

5. balas dari thread

Balas di thread dan pengunjung melihatnya di widget. Pesan yang diawali // tetap internal, jadi kamu bisa bertanya ke rekan tim tanpa dibaca pengunjung. Pengunjung melihat nama depanmu dari Slack atau nickname Discord kamu; /spookat me menampilkan atau mengubahnya, per situs.

Kalau pengunjung sudah pergi sebelum kamu membalas dan meninggalkan email, cool guy ke atas mengirim balasannya lewat email, dalam bahasa widget. Di broke af, balasannya menunggu di widget sampai kunjungan berikutnya.

atau: biarkan agent kamu yang mengerjakan semuanya

Kalau kamu ngoding pakai Claude Code, Cursor, atau coding agent lain, tempel ini dan biarkan dia membaca manualnya:

Add Spookat chat to my site. Read https://spookat.com/llms.txt first, then match the chat style to my site.

Agent menemukan template root kamu, menambahkan snippet, dan memilih style yang cocok dengan situsmu. Menghubungkan Slack atau Discord dan membayar tetap di tanganmu: keduanya disetujui oleh manusia.

cek di devtools

Jangan percaya begitu saja kata vendor mana pun, termasuk kami. Begini cara mengecek halamanmu sendiri di Chrome. Firefox dan Safari punya panel yang sama dengan nama yang sedikit berbeda.

tab network, sebelum klik

1. Buka halamanmu di jendela private, supaya tidak ada penyimpanan atau cache lama yang ikut campur.
2. Buka DevTools, masuk ke Network, centang “Disable cache”, lalu reload.
3. Ketik spookat di kotak filter.

Kamu seharusnya melihat satu request: launcher dari cdn.spookat.com, sekitar 2 kb yang ditransfer. Tidak ada yang dikirim ke api.spookat.com. Kalau kamu melihat lebih dari itu, ada hal lain di halaman yang memuatnya (misalnya snippet kedua di tag manager).

tab application, sebelum klik

Buka Application, lalu Cookies dan Local storage untuk domainmu. Spookat tidak menulis apa pun di sini saat halaman dimuat. Spookat tidak pernah memasang cookie sama sekali. Satu-satunya key penyimpanan yang dipakainya, spookat: diikuti site key kamu, baru ditulis setelah pengunjung mengirim pesan pertama: key itu menyimpan chat mereka di perangkat tersebut.

setelah klik

Kosongkan log Network lalu klik launcher. Sekarang panel dimuat dari CDN: script-nya (16,6 kb gzip pada 2026-09-27) dan stylesheet style kamu (sekitar 2 kb). Font juga ikut kalau kamu memilih salah satu. Lalu panel membuka koneksi ke API kami, dan pengunjung bisa mengetik.

Itulah triknya: bagian yang mahal dipindah ke belakang klik, dan hanya pengunjung yang ingin chat yang mengunduhnya.

lighthouse

Jalankan Lighthouse dalam mode mobile di halaman tanpa snippet dan dengan snippet, masing-masing beberapa kali, lalu bandingkan mediannya. Satu run bisa beda beberapa poin di halaman yang sama, jadi satu run saja tidak membuktikan apa-apa. Dengan launcher 2 kb dan tanpa kerja sebelum klik, selisihnya seharusnya masih di dalam noise itu.

empat cara bikin widget ringan jadi berat lagi

Launcher kecil hanya tetap kecil kalau halaman di sekitarnya membiarkannya. Ini kesalahan yang paling sering kami lihat, dan masing-masing diam-diam membatalkan kerja di atas.

Membuka chat dengan sendirinya. Panel yang terbuka sendiri setelah sepuluh detik memuat seluruh chat untuk setiap pengunjung, termasuk yang sebenarnya sudah mau membeli. Di HP, panel itu juga menutupi halaman. Kalau kamu ingin memulai obrolan, tulis sapaan; sapaan muncul saat mereka membuka chat.

Preload panel “biar lebih cepat”. <link rel="preload"> atau prefetch untuk script panel memindahkan unduhannya lagi ke depan klik, untuk semua orang. Setelah klik, itu hanya dua request singkat ke CDN yang dekat dengan pengunjung. Biarkan mereka menunggu klik.

Membungkusnya di tag manager. Tag manager adalah script yang memuat script lain. Kalau dia ada hanya untuk menampung snippet chat, biayanya lebih besar daripada chat-nya. Taruh tag-nya langsung di template kamu.

Dua snippet. Tema menambahkan satu, plugin menambahkan satu lagi, seseorang menempel yang ketiga di footer. Launcher mengabaikan duplikatnya sendiri, tapi widget lain sering tidak, dan akhirnya ada dua chat yang berebut pojok yang sama. Cari cdn.spookat.com (atau domain vendor lamamu) di template kamu dan sisakan satu.

apa yang terjadi dengan datanya

Saat pengunjung mengirim pesan, pesan itu disimpan dulu, lalu diposting ke thread Slack atau postingan Discord kamu. Kami tidak pernah menyimpan alamat IP. Negara pengunjung dicari dari database offline saat pesan dikirim, dan alamatnya tidak disimpan. Riwayat chat disimpan 30 hari di broke af, 90 di cool guy, dan 365 di vc money, lalu dihapus. Detailnya, termasuk subprosesor, ada di halaman privasi.

checklist yang bisa dipakai ulang

Untuk widget chat mana pun, bukan hanya punya kami:

• Snippet dimuat dengan async atau defer dan tidak memblokir rendering.
• Sebelum klik: beberapa kilobyte, satu request, tidak ada request ke API vendor.
• Tidak ada cookie dan tidak ada penyimpanan sebelum pengunjung memulai chat.
• Launcher tidak menutupi tombolmu sendiri di layar 375 px.
• Panel dan font-nya baru dimuat setelah klik.
• Timmu membalas di tempat mereka sudah bekerja, tanpa tab lain yang harus dijaga.
• Harganya tidak menghukummu karena menambah anggota tim.
• Kamu mengukurnya sendiri, dengan cache dimatikan, di jendela private.

Coba di situsmu sendiri: trial-nya 14 hari dan tidak perlu kartu.