> ## Documentation Index > Fetch the complete documentation index at: https://docs.thunderphone.com/llms.txt > Use this file to discover all available pages before exploring further. # CDN / Tag Skrip > Tambahkan widget suara ThunderPhone ke situs web apa pun tanpa bundler Build CDN membundel React secara internal, sehingga Anda dapat menggunakan widget di situs statis, WordPress, Webflow, atau halaman apa pun tempat Anda dapat menambahkan HTML. Tidak memerlukan npm, bundler, atau framework. ## URL CDN ```html Latest (recommended) theme={null} ``` ```html Pinned version theme={null} ``` URL `latest` adalah URL yang dihasilkan oleh generator cuplikan embed dashboard. URL ini di-cache selama 5 menit dan otomatis menggunakan rilis stabil baru. Jalur `/widget/vX.Y.Z/` yang dipatok bersifat tidak dapat diubah dan di-cache untuk jangka panjang -- jika Anda mematok versi, sesuaikan versinya dengan rilis npm `@thunderphone/widget` yang Anda gunakan untuk pengembangan. *** ## Penggunaan Dasar ```html theme={null}
``` Widget dipasang ke elemen target dan dirender sebagai **bilah berposisi tetap di sudut viewport** (default `bottom-right`, dikendalikan oleh opsi `position`). Elemen pemasangan hanya merupakan root React -- lokasinya di halaman tidak memengaruhi tempat widget muncul. *** ## Opsi Pemasangan `ThunderPhone.mount()` menerima opsi yang sama seperti komponen React, ditambah properti `element`: | Opsi | Tipe | Wajib | Default | Deskripsi | | ---------------- | -------------------------------------------------------------- | ----- | ------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `element` | `string \| HTMLElement` | Ya | -- | Selektor CSS (misalnya, `'#thunderphone'`) atau referensi elemen DOM. | | `publishableKey` | `string` | Ya | -- | Kunci API yang dapat dipublikasikan (`pk_live_...`). Agen ditentukan secara otomatis dari konfigurasi widget kunci tersebut. | | `theme` | `'light' \| 'dark'` | Tidak | `'light'` | Skema warna. | | `primaryColor` | `string` | Tidak | `'#000000'` (terang) / `'#ffffff'` (gelap) | String warna CSS yang digunakan sebagai warna aksen. | | `title` | `string` | Tidak | `'Voice assistant'` | Teks yang ditampilkan di bilah widget. | | `position` | `'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left'` | Tidak | `'bottom-right'` | Posisi viewport tetap. | | `apiBase` | `string` | Tidak | `'https://api.thunderphone.com/v1'` | Penggantian URL dasar API. | | `language` | `string` | Tidak | -- | Penggantian bahasa per sesi -- kode bahasa atau lokal seperti `en`, `es`, atau `fr-FR`. Jika tidak ditetapkan, bahasa yang dikonfigurasi untuk agen digunakan. | | `voice` | `string` | Tidak | -- | Penggantian suara per sesi -- nama suara seperti `maria`. Jika tidak ditetapkan, suara yang dikonfigurasi untuk agen digunakan. | | `context` | `string` | Tidak | -- | Konteks faktual halaman atau situs per sesi yang diteruskan ke agen. Dipotong di sisi server hingga 12.000 karakter. | | `onConnect` | `() => void` | Tidak | -- | Dipanggil saat sesi suara terhubung. | | `onDisconnect` | `() => void` | Tidak | -- | Dipanggil saat sesi berakhir. | | `onError` | `(error) => void` | Tidak | -- | Dipanggil ketika terjadi kesalahan. Error memiliki field `error` (kode) dan `message`. | | `ringtone` | `boolean \| string` | Tidak | `false` | Putar nada dering saat menghubungkan. `true` untuk nada dering default, atau string URL untuk audio kustom. | *** ## Pembersihan `ThunderPhone.mount()` mengembalikan instance widget dengan metode pembersihan: ```html theme={null} ``` `unmount()` dan `destroy()` melakukan hal yang sama -- keduanya memutuskan sesi suara aktif dan menghapus widget dari DOM. Gunakan yang paling sesuai dibaca dalam kode Anda. Selalu bersihkan widget saat berpindah halaman dalam aplikasi satu halaman atau ketika elemen yang memuatnya dihapus. Ini memastikan sesi suara aktif diputuskan dengan benar. *** ## Contoh ### Tema Gelap dengan Warna Kustom ```html theme={null}
``` ### Posisi Kustom ```html theme={null}
``` ### Dengan Callback Peristiwa ```html theme={null}
``` ### Dengan Nada Dering ```html theme={null}
``` ### Menggunakan Referensi Elemen DOM ```html theme={null}
``` ### Integrasi WordPress / CMS Tambahkan ini ke blok HTML Kustom atau footer tema Anda: ```html theme={null}
``` `
` dapat ditempatkan di mana saja -- ini hanya titik mount. Widget itu sendiri dirender sebagai overlay tetap di sudut viewport (ditetapkan oleh opsi `position`) dan tidak mengikuti aliran konten di sekitarnya. *** ## Pemecahan Masalah Pastikan file CSS dan JS telah dimuat. Periksa konsol browser untuk kesalahan jaringan. Verifikasi bahwa elemen target ada di DOM sebelum memanggil `ThunderPhone.mount()`. Skrip belum dimuat. Pastikan tag `