# tambahkan live chat ke situs buatan lovable, bolt, atau v0

Prompt untuk ditempel ke Lovable, Bolt, atau v0, tempat snippet chat seharusnya berada di kode yang mereka buat, dan cara mengecek hasilnya di situs yang sudah dipublikasikan.

2026-10-28 · Kuba

Kamu membangun situs dengan mendeskripsikannya, jadi tambahkan chat dengan cara yang sama. Panduan ini memberimu prompt untuk Lovable, Bolt, atau v0, menunjukkan di mana snippet seharusnya berada di kode yang mereka buat, dan cara mengecek di situs yang sudah dipublikasikan bahwa tidak ada yang dimuat sebelum klik.

## apa yang dibuat alat-alat ini

Dari kotak chat-nya ketiga alat ini terlihat mirip, tapi mereka menulis jenis proyek yang berbeda, dan itulah yang menentukan di mana satu tag script ditaruh:

- **Lovable** membuat aplikasi Vite dengan React. Ada `index.html` di root proyek; itulah halaman tempat setiap route dirender.
- **Bolt** membuat apa pun yang kamu minta. Kebanyakan proyeknya aplikasi Vite dengan `index.html`; sebagian Next.js, Astro, atau HTML biasa (yang terakhir dibahas di [panduan HTML biasa](/id/blog/live-chat-plain-html-site/)).
- **v0** membuat Next.js dengan app router. Halaman bersamanya adalah `app/layout.tsx`.

Chat butuh satu tag di setiap halaman. Di single-page app, artinya `index.html`. Di Next.js, root layout. Tidak di tempat lain.

## sebelum mulai: domain

Spookat mengikat sebuah situs ke domainnya. Chat hanya terhubung dari domain itu dan subdomainnya, dan itu salah satu alasan tidak ada yang bisa menyalin snippet-mu ke situs mereka sendiri.

Dengan alat-alat ini hal itu penting, karena proyekmu tinggal di beberapa alamat:

- **preview** di dalam alat, di domain milik alat itu
- alamat **publikasi** yang diberikan alat, biasanya subdomain miliknya
- **domain sendiri**, kalau kamu sudah menghubungkannya

Daftarkan situs dengan alamat yang akan dipakai pengunjung. Kalau itu domain sendiri, pakai itu; `www` dan subdomain lainnya ikut terhitung. Kalau kamu memublikasikan di subdomain milik alat, daftarkan subdomain lengkap itu, bukan domain utama alatnya. Di preview alat, launcher muncul, tapi chat tidak terhubung. Tes di situs yang sudah dipublikasikan.

## prompt-nya

Pertama, kamu butuh site key. Di dashboard Spookat, tambahkan situs dengan domain yang benar; halaman instalasi menampilkan snippet-nya. Lalu tempel ini di chat alatnya, dengan key kamu di tempat `YOUR_SITE_KEY`:

```text
Add this live chat script to every page of the site. It must be exactly one tag, loaded once, right before the closing </body> tag of the shared HTML (index.html in a Vite app, the root layout in Next.js). Keep the async attribute. Do not wrap it in a React component, do not add it to individual pages, do not preload anything.

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

Prompt-nya sengaja sespesifik itu. Alat-alat ini senang membantu, dan "tambahkan widget chat" bisa berubah jadi komponen React baru, tombol melayang buatan sendiri, atau tag yang ditempel di lima halaman. Satu tag di satu tempat sudah cukup untuk Spookat: launcher menggambar tombolnya sendiri.

### tampilannya, di prompt yang sama

Tampilan widget diatur di dashboard Spookat dan terbawa di dalam launcher, jadi alat tidak perlu tahu apa-apa soal itu. Kalau kamu lebih suka menyimpannya di kode, tambahkan baris kedua di prompt:

```text
Above that script, add: <script>window.Spookat = { style: "clean", accent: "#2F6FEB", side: "right" };</script>
```

Ada 8 style. `accent` adalah warna brand-mu dalam hex; warna teks di atasnya dipilih berdasarkan kontras. [Dokumentasi](/id/docs/) mendaftar semua key.

## di mana seharusnya berada

Buka tampilan kode dan cek. Di aplikasi Vite (Lovable, kebanyakan proyek Bolt), `index.html` seharusnya berakhir seperti ini:

```html
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
    <script src="https://cdn.spookat.com/s/YOUR_SITE_KEY.js" async></script>
  </body>
</html>
```

Di Next.js (v0, sebagian proyek Bolt), `app/layout.tsx` mendapat tag di dalam `<body>`, setelah `{children}`:

```tsx
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <script src="https://cdn.spookat.com/s/YOUR_SITE_KEY.js" async></script>
      </body>
    </html>
  );
}
```

Kalau alatnya malah memakai `next/script`, itu juga tidak masalah, dengan `strategy="afterInteractive"` atau `"lazyOnload"`. Yang tidak ingin kamu lihat:

- tag di dalam komponen halaman, seperti `Home.tsx` atau `app/page.tsx`: chat hanya ada di halaman itu
- `useEffect` yang membuat elemen script: berfungsi, tapi kodenya lebih banyak untuk tag yang sama
- tombol atau panel chat yang digambar sendiri oleh alat: hapus, Spookat membawa miliknya sendiri

Kalau ada yang salah, bilang dalam satu kalimat: "Remove the chat code you added and put only the script tag in index.html." Alat-alat ini cukup bagus memperbaiki hal seperti ini kalau instruksinya konkret.

## publikasikan, lalu cek

Publikasikan situs dan buka alamat publikasinya di jendela private. Buka DevTools:

1. **Network**, centang "Disable cache", reload, lalu ketik `spookat` di filter. Kamu seharusnya melihat satu request: launcher dari `cdn.spookat.com`, sekitar 2 kb. Dua, keduanya dari `cdn.spookat.com`, kalau kodemu mengatur style di `window.Spookat` yang berbeda dari yang kamu publish. Tidak ada ke `api.spookat.com`.
2. **Application**, cookie dan local storage: tidak ada dari Spookat.
3. **Klik launcher.** Panel dimuat dari CDN. Tulis pesan tes. Kalau Slack atau Discord sudah terhubung, pesan muncul di sana; balas dan lihat balasannya sampai di widget.

Kalau launcher sama sekali tidak muncul, tag-nya tidak masuk ke build yang dipublikasikan. Cek lagi tampilan kodenya. Kalau launcher muncul tapi chat tidak bisa terhubung, domain di dashboard tidak cocok dengan alamat yang sedang kamu buka.

[Panduan utama](/id/blog/add-live-chat-to-your-website/) menjelaskan setiap pengecekan ini lebih detail.

## hubungkan balasannya

Chat seharusnya menjangkaumu di tempat kamu sudah berada. Hubungkan Slack atau Discord di dashboard, pilih channel, dan setiap pengunjung mendapat thread sendiri. [Panduan Slack](/id/blog/answer-website-chat-from-slack/) dan [panduan Discord](/id/blog/answer-website-chat-from-discord/) membahas detailnya.

## kenapa tidak biarkan alatnya membuat chat

Kamu bisa saja memintanya. Alat itu akan membuat panel cantik dengan kotak teks dalam hitungan menit. Lalu pertanyaan mulai berdatangan: ke mana pesannya pergi, siapa yang diberi notifikasi, bagaimana balasan sampai ke pengunjung yang sudah menutup tab, bagaimana dengan spam, siapa yang menjaganya tetap jalan. Itu berarti server, database, integrasi Slack, dan pipeline email, dan tidak ada satu pun yang merupakan produk yang sedang kamu bangun.

Spookat hanya satu tag, harganya $4.99 per bulan per situs di starter, dan trial-nya 14 hari tanpa kartu.

## kalau kamu pakai claude code atau cursor

Ekspor proyek ke repo dan biarkan coding agent mengerjakannya dengan server MCP Spookat. Agent juga bisa menyesuaikan widget dengan warna situsmu dan mengatur semuanya tanpa kamu menyalin key. [Panduan Claude Code](/id/blog/claude-code-live-chat/) membahasnya langkah demi langkah.

## samakan tampilannya dengan situs hasil generate

Alat-alat ini cenderung menghasilkan gaya yang mudah dikenali: sans-serif yang bersih, bayangan lembut, kartu membulat, satu warna aksen. Widget-nya harus terlihat seperti bagian dari situs, bukan stiker dari situs lain.

- **Style.** Untuk tampilan hasil generate yang umum, mulai dengan `clean` atau `soft`. Kalau situsmu lebih gelap dan teknis, coba `terminal`. Kalau kamu memberinya tampilan tegas dan datar, `brutal` atau `swiss`. Kamu bisa mengganti di dashboard dan melihat masing-masing di preview langsung sebelum memublikasikan.
- **Aksen.** Pakai hex yang sama dengan tombolmu. Alatnya biasanya menyimpannya di config Tailwind atau variabel CSS; tanya saja "what is the primary color's hex?"
- **Font.** `system` tidak mengunduh apa pun dan cukup mirip dengan kebanyakan situs hasil generate. Kalau situsmu memakai font tertentu dan kami meng-host-nya, pilih font itu; font hanya dimuat setelah klik.
- **Sisi.** Kalau alat menaruh tombol melayang miliknya sendiri di kanan bawah (panah kembali ke atas, ikon pengaturan cookie), taruh launcher di kiri.

## yang dilihat pengunjungmu

Tombol kecil di pojok, dengan warnamu. Tidak ada yang terjadi sampai mereka mengklik. Lalu panel terbuka dengan sapaanmu dan satu baris yang bilang bahwa manusia yang membalas. Mereka mengetik, dan pesannya masuk ke thread Slack atau Discord kamu, atau ke inbox kami dan aplikasi ponselnya. Kalau mereka pergi sebelum kamu membalas, mereka bisa meninggalkan email; di pro, balasannya menyusul ke sana. Widget memakai bahasa browser mereka, salah satu dari 12, kecuali kamu menetapkan bahasanya.

## setelah alat melakukan generate ulang

Alat-alat ini menulis ulang file. Perubahan besar di layout ("jadikan dashboard", "ganti ke dark mode") bisa diam-diam menghapus tag dari `index.html` atau root layout. Setelah generate ulang yang besar, buka situs yang dipublikasikan dan cek apakah launcher masih ada. Kalau hilang, prompt yang sama memasangnya lagi.

## lebih dari satu proyek

Dengan alat-alat ini, memulai situs kedua dan ketiga itu murah. Di Spookat masing-masing adalah situs terpisah, dengan key, domain, tampilan, dan channel sendiri, jadi chat tidak pernah masuk ke thread proyek yang salah. Situs pertama di sebuah akun membayar harga penuh; setiap situs lain di akun yang sama yang kamu bayar lewat Spookat mendapat potongan 30%, di semua paket. Beberapa situs bisa berbagi satu channel Slack atau Discord kalau yang membalas orangnya sama, tapi kartu hanya menunjukkan path halaman, bukan dari situs mana chat itu datang. Beri setiap situs channel sendiri kalau kamu perlu membedakannya.

## checklist

- Situs terdaftar dengan alamat yang dipakai pengunjung.
- Satu tag, `async`, di `index.html` atau root layout.
- Tidak ada tombol atau komponen chat buatan alat itu sendiri.
- Dites di situs yang dipublikasikan, bukan di preview.
- Satu request sebelum klik (dua, keduanya dari `cdn.spookat.com`, kalau kodemu mengatur style yang tidak kamu publish), tanpa cookie.
- Slack atau Discord terhubung.

Deskripsikan, publikasikan, cek. Lalu jawab pertanyaan pertama dari sebuah thread.

---
source: https://spookat.com/id/blog/live-chat-lovable-bolt-v0/