> For the complete documentation index, see [llms.txt](https://docs.dibales.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.dibales.ai/livechat/integrasi-live-chat.md).

# Integrasi Live Chat

<figure><img src="/files/ChqHJJSi9jyXpXBblPjF" alt=""><figcaption></figcaption></figure>

### 💬 Setup Live Chat Widget

Fitur **Live Chat Widget** memungkinkan kamu menyematkan chat agent langsung di website — untuk berinteraksi secara real-time dengan pengunjung melalui tampilan tombol mengambang (floating button).

Kamu bisa menyesuaikan tampilan tombol, warna, bahasa, dan pesan sapaan sesuai kebutuhan brand kamu.

***

#### 🌐 Dukungan Bahasa

Saat ini, live chat dibales.ai mendukung 3 bahasa:

* Bahasa **Indonesia**
* **English**
* **日本語** (Jepang)

***

#### 🛠️ Cara Setting Live Chat

1. Masuk ke menu **Integrations → Live Chat Widget** dari sidebar dashboard agent kamu.
2. Lengkapi pengaturan berikut:

| Field                        | Keterangan                                                                  |
| ---------------------------- | --------------------------------------------------------------------------- |
| **Language**                 | Pilih bahasa tampilan widget (Indonesia / English / Japanese)               |
| **Display Name**             | Nama agent yang akan muncul di widget (misal: "Siska – Pake AI")            |
| **Display Picture**          | Gunakan foto default agent, atau bisa diganti nanti                         |
| **Button Content Type**      | Pilih jenis tombol: `Text` atau `Icon`                                      |
| **Button Text**              | Tulisan pada tombol chat (misal: "Ngobrol sama Siska")                      |
| **Brand Color**              | Warna tombol utama dan sekunder (utama = background, sekunder = font/icon)  |
| **Welcome Message Title**    | Judul sapaan di form awal (misal: "Halo dengan Siska dari dibales.ai")      |
| **Welcome Message Subtitle** | Teks di bawahnya (misal: "Sebelum kita ngobrol, isi dulu nama & email ya.") |

3. Klik tombol **Save & Preview**\
   Untuk melihat bagaimana tampilan live chat akan muncul di website kamu.

***

#### 🔗 Integrasi ke Website (Manual Embed)

Di sebelah kanan halaman, kamu akan melihat **Integration Code**.

1. Klik tombol **“Copy to Clipboard”**
2. Paste kode tersebut di website kamu, di salah satu bagian berikut:
   * **Footer**
   * **Header**
   * **Bagian HTML yang bisa menjalankan script**

> Pastikan kode ditaruh di tempat yang akan **dimuat di setiap halaman**, agar chat widget selalu muncul.

***

#### 🧩 Integrasi WordPress (Plugin)

Jika kamu menggunakan **WordPress**, kami menyediakan plugin siap pakai.

1. Klik tombol **“Download Plugin”**
2. Salin **API Key** yang muncul di halaman
3. Setelah plugin terinstal di WordPress:
   * Masuk ke pengaturannya
   * Paste API Key di kolom yang tersedia
   * Simpan, dan widget akan otomatis muncul

***

#### ✅ Selesai!

Sekarang live chat kamu sudah aktif, dan siap membantu pengunjung langsung dari website.