# 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.dibales.ai/livechat/integrasi-live-chat.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.