` adalah titik pemasangan (mount point) — panel obrolan akan dirender di dalamnya dan mengisi dimensinya. Berikan gaya pada div tersebut sesuka Anda (berikan tinggi tetap, letakkan di dalam kontainer flex, tempatkan di sel grid, dll.) dan panel obrolan akan mengikuti.
Anda hanya memerlukan **satu** tag `
```
{% endcode %}
Cuplikan inline membawanya pada `
` sebagai gantinya, sehingga satu halaman dapat menampung beberapa obrolan yang menuju ke tempat berbeda:
{% code overflow="wrap" %}
```html
```
{% endcode %}
Untuk agen, kata-katanya berubah menjadi `?agent=AGENT_ID` atau `data-agent="AGENT_ID"`.
Beberapa hal yang perlu diketahui:
- Gunakan tombol salin daripada mengetik ID secara manual. Jika ID tidak cocok dengan kampanye atau agen di akun Anda, obrolan tetap berfungsi tetapi kembali ke perutean default Anda.
- Seseorang yang sudah berada di tengah percakapan tetap bersama siapa pun yang mereka ajak bicara sejak awal, bahkan jika mereka kemudian mendarat di halaman yang mengarah ke tempat lain. Ini mencegah percakapan berubah kepribadian di tengah jalan.
- Tujuan khusus halaman lebih diprioritaskan daripada default akun Anda dan pemicu kata kunci.
### Beri Tahu Widget Siapa Pengunjungnya (Lanjutan)
Jika Anda menempatkan widget obrolan di dalam area anggota, portal pelanggan, atau aplikasi tempat orang sudah masuk, situs Anda sudah mengetahui siapa mereka. Anda dapat menyerahkan informasi tersebut ke widget agar pengunjung tidak dimintai detail yang telah mereka berikan sebelumnya, dan agar AI Anda dapat menggunakan apa yang sudah Anda ketahui tentang mereka.
Tambahkan blok pengaturan kecil **sebelum** skrip widget:
{% code overflow="wrap" %}
```html
```
{% endcode %}
Halaman Anda harus mengisi nilai-nilai tersebut di sisi server, dari siapa pun yang sedang masuk.
Dua hal akan terjadi:
- **Formulir "Sebelum kita mulai..." dilewati.** Dengan nama dan email yang diberikan, pengunjung langsung masuk ke percakapan, dan detail tersebut disimpan pada kontak mereka persis seperti jika mereka telah mengetiknya sendiri.
- **Semua yang ada di bawah `data` diserahkan ke AI Anda.** Apa pun yang Anda masukkan di sana — paket, nomor pesanan, tanggal perpanjangan, saldo kredit, berapa banyak kursi yang mereka miliki — menjadi bagian dari apa yang diketahui AI tentang orang tersebut, sehingga AI dapat menjawab "kapan paket saya diperpanjang?" tanpa harus meminta mereka menjelaskan siapa mereka terlebih dahulu. Gunakan nama bidang apa pun yang masuk akal bagi Anda; nama tersebut akan muncul pada kontak di bawah Bidang Kustom. Hingga 20 nilai, dikirim baru dengan setiap pesan, jadi jika paket berubah di tengah percakapan, AI akan melihat yang baru.
Untuk sematan inline, Anda dapat menempatkan informasi yang sama pada `
` sebagai gantinya, yang berguna ketika satu halaman menampung beberapa obrolan:
{% code overflow="wrap" %}
```html
```
{% endcode %}
Jika situs Anda hanya mengetahui siapa pengunjungnya setelah halaman dimuat — misalnya, aplikasi satu halaman di mana proses masuk terjadi tanpa memuat ulang halaman — panggil ini kapan pun Anda memiliki detailnya, dan widget akan memperbarui dirinya sendiri:
{% code overflow="wrap" %}
```html
```
{% endcode %}
Beberapa hal yang perlu diketahui:
- Jika dua orang berbeda masuk di komputer yang sama, orang kedua memulai percakapan baru alih-alih melihat obrolan orang pertama. Widget mendeteksi perubahan orang tersebut dan mengatur ulang dirinya sendiri.
- Ini untuk konteks, bukan untuk masuk ke akun seseorang. Percakapan tetap dipisahkan seperti biasanya, jadi memberikan `id` tidak memungkinkan siapa pun membuka obrolan orang lain, dan seseorang yang menggunakan perangkat atau browser berbeda akan memulai percakapan baru di sana.
- Ini bersifat opsional. Widget di halaman publik biasa tidak memerlukan semua ini dan berperilaku persis seperti sebelumnya.
### Ubah Pengaturan Widget dari Kode Anda Sendiri (API)
Segala sesuatu di panel **Kelola** widget juga dapat diubah melalui [REST API](../api/reference.md), yang berguna jika Anda mengelola banyak situs web atau ingin tombol lampiran dimatikan secara otomatis untuk klien. Kirim `PATCH` ke `https://api.youraiconnector.com/v1/chat-widget-configs/CONFIG_ID` dengan kunci API Anda dan hanya kolom yang ingin Anda ubah — misalnya `{"show_upload_button": false}` menyembunyikan tombol lampiran, `{"show_emoji_button": false}` menyembunyikan pemilih emoji, dan `{"launcher_icon": "chat-dots"}` menukar ikon peluncur. `CONFIG_ID` adalah pengidentifikasi yang sama seperti dalam skrip sematan Anda. Daftar lengkap kolom yang diterima (nama, pesan pembuka, warna, ikon peluncur, domain yang diizinkan, formulir info pengunjung, pemberitahuan privasi, tema, sudut, dan gaya font) ada di [Referensi API](../api/reference.md) di bawah **Chat Widget**. Situs web akan menerapkan perubahan saat halaman dimuat berikutnya.
### Apa yang Diharapkan Setelah Instalasi
Setelah Anda menambahkan skrip ke situs web Anda, widget obrolan akan secara otomatis membuat tombol obrolan di sudut situs web Anda (kanan bawah secara default). Widget tetap berada di posisi tetap saat pengguna menggulir halaman Anda, memastikan widget tersebut selalu dapat diakses.
Saat pengunjung mengeklik tombol ini, tombol tersebut akan diperluas menjadi jendela obrolan penuh tempat mereka dapat memulai percakapan, yang menampilkan pesan pembuka Anda. Jika Kumpulkan info pengunjung aktif, formulir kecil akan muncul terlebih dahulu untuk menanyakan nama dan email mereka (dan opsional nomor telepon) sebelum mereka dapat mengetik.
Antarmuka obrolan beradaptasi secara otomatis dengan berbagai ukuran layar, sehingga berfungsi dengan lancar di perangkat desktop maupun seluler.
### Menguji Implementasi Anda
Setelah menambahkan widget ke situs Anda, uji apakah widget tersebut berfungsi:
1. Buka situs web Anda di browser.
2. Klik tombol obrolan untuk membuka widget.
3. Kirim pesan uji dan pastikan Anda mendapatkan balasan.
4. Ulangi pada perangkat atau browser yang berbeda untuk memastikan widget berfungsi di mana saja.
Jika widget obrolan tidak muncul di situs Anda, periksa hal-hal berikut:
1. Pastikan Anda telah mengganti `CONFIG_ID` dengan pengidentifikasi konfigurasi Anda yang sebenarnya.
2. Pastikan tag skrip ditempatkan sebelum tag penutup `