# tambahkan live chat ke situs next.js
Tambahkan chat Spookat ke aplikasi Next.js, di app router atau pages router, lengkap dengan tampilan dan pengguna yang login bila perlu, lalu pastikan tidak ada request ke API kami sebelum klik.
2026-11-04 ยท Kuba
Live chat di Next.js cukup satu tag script di root layout. Panduan ini menunjukkan di mana tag itu ditaruh di app router dan pages router, cara mengirim tampilan widget dan pengguna yang sedang login tanpa merusak urutan muat, apa yang perlu ditambahkan ke Content Security Policy, dan cara mengecek hasilnya di build produksi.
## versi singkatnya
Di app router, tambahkan tag ke `app/layout.tsx`, di dalam ``:
```tsx
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
{children}
);
}
```
Ganti `YOUR_SITE_KEY` dengan key dari halaman instalasi di dashboard. Itu seluruh instalasinya kalau tampilan diatur di dashboard, dan memang itu default-nya. Sisa panduan ini untuk kalau kamu ingin kontrol lebih. Kalau mulai dari nol, [panduan utama](/id/blog/add-live-chat-to-your-website/) membahas sisi akunnya.
## kenapa root layout
Root layout membungkus setiap route dan tetap terpasang selama pengguna berpindah halaman. Launcher menempel ke halaman sekali saja. Navigasi di sisi klien tidak me-reload halaman, jadi launcher juga tidak di-reload, dan pengunjung bisa tetap membuka percakapan sambil mengklik ke mana-mana.
Kalau tag ditaruh di komponen halaman, chat hanya ada di halaman itu. Kalau ditaruh di komponen yang dirender di beberapa halaman, kamu akan dapat duplikat saat hard reload (launcher mengabaikan salinan keduanya sendiri, tapi tetap saja itu request yang terbuang).
## dengan next/script
`next/script` adalah cara Next.js memuat script pihak ketiga, dan di sini berfungsi baik:
```tsx
import Script from "next/script";
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
{children}
);
}
```
`afterInteractive` memuat launcher tepat setelah hydration. `lazyOnload` menunggu sampai browser idle, sehingga tombolnya muncul sedikit lebih lambat di HP yang lambat. Keduanya oke untuk launcher 2 kb; `afterInteractive` menampilkan tombol lebih cepat. Jangan pakai `beforeInteractive` untuk launcher: ia akan bersaing dengan kodemu sendiri tanpa guna.
## mengatur tampilan lewat kode
Tampilan yang kamu publish di dashboard terbawa di dalam launcher. Kalau kamu lebih suka menyimpannya di repo, set `window.Spookat` sebelum launcher berjalan. Config di halaman mengalahkan config dashboard.
Urutan muat itu penting: config harus sudah ada saat launcher dijalankan. Dengan `next/script`, beri config `beforeInteractive` (diizinkan di root layout) dan launcher `afterInteractive`:
```tsx
import Script from "next/script";
const spookat = { style: "clean", font: "system", accent: "#2F6FEB", side: "right" };
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
{children}
);
}
```
Script `beforeInteractive` berjalan sebelum hydration, `afterInteractive` sesudahnya, jadi urutannya terjamin. Key-nya sama seperti di tempat lain: `style` (salah satu dari 8), `font`, `accent`, `side`, `greeting`, `label`, `lang`. [Dokumentasi](/id/docs/) mendaftar semuanya.
## pages router
Di pages router, wrapper bersamanya adalah `pages/_app.tsx`:
```tsx
import type { AppProps } from "next/app";
import Script from "next/script";
export default function App({ Component, pageProps }: AppProps) {
return (
<>
);
}
```
Untuk config, di pages router script `beforeInteractive` ditaruh di `pages/_document.tsx`. Taruh script `window.Spookat` di sana, di dalam ``, dengan `id` dan `strategy` yang sama seperti di atas, dan biarkan launcher di `_app.tsx`.
## pengguna yang sedang login
Mulai pro, kamu bisa memberi tahu chat siapa yang sedang login. Timmu lalu melihat `logged in as 42` di kartu Slack, dan webhook, ekspor, serta `read_convo` milik agenmu membawa id-nya. Id itu ditandatangani dengan secret yang hanya diketahui servermu, jadi tidak ada yang bisa menyamar sebagai orang lain.
Buat identity secret di halaman instalasi dashboard, simpan di environment variable, lalu tandatangani di server. Di app router, root layout adalah server component, jadi ini mudah:
```tsx
import { createHmac } from "node:crypto";
import Script from "next/script";
import { getSession } from "@/lib/auth"; // yours
const sign = (id: string) => createHmac("sha256", process.env.SPOOKAT_IDENTITY_SECRET!).update(id).digest("hex");
export default async function RootLayout({ children }: { children: React.ReactNode }) {
const session = await getSession();
const user = session ? { id: String(session.userId), sig: sign(String(session.userId)) } : undefined;
return (
{children}
{user && (
)}
);
}
```
Jangan pernah menghitung tanda tangan di client component: secret-nya akan ikut terkirim ke browser. Tanda tangan yang hilang atau salah bukan error; chat hanya tidak menyebutkan siapa penggunanya. Membaca session di root layout membuat setiap halaman dirender per request, jadi kalau layout-mu sekarang statis, pertimbangkan dulu sebelum menambahkannya.
## content security policy
Kalau aplikasimu mengirim header `Content-Security-Policy`, widget butuh:
- `script-src` dan `style-src`: `https://cdn.spookat.com`
- `font-src`: `https://cdn.spookat.com`, kalau kamu memilih font yang di-host
- `connect-src`: `wss://api.spookat.com`, untuk koneksi chat setelah klik
- `img-src`: `data:`, untuk logo dan foto rekan tim
- `style-src`: launcher menyisipkan satu blok `