# Pasang widget

> Buat channel Webchat di dashboard, bagikan link chat, lalu pasang tombol chat melayang di website Anda.


Webchat adalah channel chat untuk website Anda. Pengunjung bisa chat lewat link khusus atau lewat tombol chat melayang di pojok website. Semua percakapan masuk ke menu **Chat** di dashboard, dan AI agent yang Anda pilih bisa menjawab otomatis.

## Buat channel Webchat

1. Buka menu **Integrasi**, lalu klik kartu **Webchat**.
2. Klik **Tambah Channel**. Jika belum ada channel, klik **Tambah Channel Pertama**.
3. Isi form di sisi kiri. **Pratinjau** di sisi kanan ikut berubah saat Anda mengetik.
4. Klik **Simpan Channel**. Bagian **Pasang** muncul di bawah form, berisi link dan kode embed.

| Isian | Fungsi | Catatan |
|---|---|---|
| Nama channel | Tampil di bagian atas jendela chat. | Wajib, maksimal 60 karakter. |
| AI Agent | AI agent yang menjawab pengunjung. | Opsional. Pilih **Tanpa AI agent** jika chat dijawab manual. |
| Divisi | Tim yang bisa melihat channel dan percakapannya. | Wajib minimal satu jika akun punya divisi. Tidak bisa diubah setelah channel dibuat. |
| Warna utama | Warna tombol chat, kepala jendela, dan gelembung pesan pengunjung. | Kode warna seperti `#4152e9`. |
| Logo brand | Tampil bulat di kepala jendela chat dan di tombol widget. | Opsional. PNG, JPG, atau WebP, maksimal 1 MB. |
| Salam pembuka | Kalimat pertama yang dilihat pengunjung. | Boleh kosong, maksimal 300 karakter. |
| Posisi tombol widget | Tombol muncul di sisi **Kanan** atau **Kiri**. | Pilih salah satu. |
| Form pra-chat | Meminta nama dan nomor HP sebelum chat dimulai. | Email opsional. |

> **Peringatan: Centang divisi Anda sendiri**
>
> Hanya anggota divisi yang dicentang yang bisa melihat channel dan percakapannya. Divisi tidak bisa diubah setelah channel dibuat.

## Bagikan link chat

Cara tercepat tanpa mengubah website. Di bagian **Pasang**, klik **Salin** pada **Link webchat**. Bentuk linknya:

```bash
https://app.csku.ai/webchat/<ID_CHANNEL>
```

Pengunjung yang membuka link langsung melihat halaman chat. Bagikan di bio Instagram, status WhatsApp, tanda tangan email, atau brosur digital. Klik **Buka demo** untuk melihat tampilan pengunjung.

## Pasang widget di website

Di bagian **Pasang**, klik **Salin kode** pada **Kode embed widget**. Bentuk kodenya:

```html
<script>window.cskuSettings = {"channelKey": "<ID_CHANNEL>", "position": "right"};</script>
<script src="https://app.csku.ai/widget/widget.js" async></script>
```

Tempel kode tepat sebelum tag penutup `</body>`. Jika website punya satu template untuk semua halaman, tempel di template itu supaya tombol muncul di semua halaman.

> **Tips: Salin dari dashboard**
>
> Kode dari dashboard sudah berisi ID channel yang benar. Jangan mengetik ulang contoh di atas.

Kode cukup dipasang sekali. Warna, logo, posisi, salam pembuka, dan form pra-chat diambil dari dashboard setiap halaman dimuat. Domain website tidak perlu didaftarkan.

### HTML biasa

Buka file halaman, cari `</body>`, lalu tempel kode tepat di atasnya.

### WordPress

Pakai plugin penyisip kode yang punya kolom footer, misalnya "Insert Headers and Footers". Tempel kode di kolom footer, lalu simpan. Cara lain: tempel di `footer.php` tema Anda, tepat sebelum `</body>`. Jika memakai plugin cache, kosongkan cache setelahnya.

### Next.js, Nuxt, dan SPA lain

Widget harus dimuat satu kali per halaman, hanya di browser. Pemasangan kedua di halaman yang sama diabaikan, dan widget tidak perlu dimuat ulang saat pindah route. Pasang di layout induk, bukan di komponen halaman.

Next.js (App Router), di `app/layout.tsx`:

```js
import Script from 'next/script'

export default function RootLayout({ children }) {
  return (
    <html lang="id">
      <body>
        {children}
        <Script id="csku-settings" strategy="afterInteractive">
          {`window.cskuSettings = {"channelKey": "<ID_CHANNEL>", "position": "right"};`}
        </Script>
        <Script src="https://app.csku.ai/widget/widget.js" strategy="afterInteractive" />
      </body>
    </html>
  )
}
```

Nuxt 3, di `nuxt.config.ts`:

```js
export default defineNuxtConfig({
  app: {
    head: {
      script: [
        { innerHTML: 'window.cskuSettings = {"channelKey": "<ID_CHANNEL>", "position": "right"};', tagPosition: 'bodyClose' },
        { src: 'https://app.csku.ai/widget/widget.js', async: true, tagPosition: 'bodyClose' },
      ],
    },
  },
})
```

Pastikan `window.cskuSettings` sudah ada sebelum `widget.js` berjalan. Untuk SPA biasa (Vite, Create React App), tempel kode di `index.html`.

## Periksa pemasangan

Buka website Anda di jendela penyamaran atau di HP, lalu periksa:

1. Tombol chat muncul di sisi dan warna yang Anda pilih.
2. Klik tombol, jendela chat terbuka dengan nama channel dan salam pembuka yang benar.
3. Kirim pesan. AI agent membalas jika channel memakai AI agent.
4. Buka menu **Chat** di dashboard, pastikan percakapan masuk.

Jika tombol tidak muncul, buka Console browser dan cari pesan berawalan `[CSKU Webchat]`. Lihat juga [Content Security Policy](https://docs.csku.ai/webchat/csp).

## Lepas atau hapus

- **Lepas dari website.** Hapus kedua tag `<script>` dari website. Tombol hilang, tetapi link chat tetap berfungsi.
- **Hapus channel.** Di **Integrasi** → **Webchat**, klik ikon hapus pada channel, lalu **Ya, Hapus**. Link chat dan widget yang terpasang berhenti berfungsi. Percakapan lama tetap ada di menu **Chat**.

Channel tidak bisa dimatikan sementara. Pilih salah satu cara di atas.