AI-translated from English; not yet reviewed by a fluent editor.
# Cara menambahkan widget FAQ suara ElevenLabs ke satu halaman situs
> Siapkan agent FAQ publik khusus di ElevenLabs, batasi hostname yang diizinkan, pasang widget suara di satu halaman, lalu periksa percakapan langsung, pengaturan privasi, dan penggunaan.
By BIG CHANGE Editorial
Published: 2026-10-20T06:57:39.691Z
Updated: 2026-10-20T06:57:39.691Z
Canonical: https://bigchange.ai/blog/elevenlabs-voice-faq-widget-website-guide
AI-generated conceptual illustration by BIG CHANGE.
Widget ElevenLabs memungkinkan pengunjung mengajukan pertanyaan dengan suara di situs. Panduan ini ditujukan kepada orang yang mengelola halaman dan agent ElevenLabs. Panduan ini mencakup satu FAQ publik dengan cakupan terbatas, mulai dari penyiapan agent hingga pemeriksaan halaman langsung, lalu pemeriksaan akses, catatan percakapan, dan penggunaan. Langkahnya mengikuti dokumentasi ElevenLabs yang diperiksa pada 20 Oktober 2026. BIG CHANGE tidak membuat agent, memasang widget, atau melakukan panggilan uji.
## Perubahan utama
- **Apa:** ElevenLabs mendokumentasikan widget situs untuk agent ElevenAgents publik, dengan suara sebagai mode bawaan.
- **Caranya:** Halaman memuat elemen khusus menggunakan ID agent yang terlihat. Daftar hostname yang diizinkan pada agent mengatur asal situs mana yang boleh terhubung.
- **Mengapa penting:** Pemilik situs dapat memeriksa jalur bantuan suara bagi pengunjung pada satu halaman, tetapi harus menyetujui informasi publik, pemberitahuan pengunjung, dan kemungkinan biaya panggilan sebelum menampilkannya. Daftar hostname yang diizinkan tidak mengidentifikasi setiap pengunjung.
## Siapkan FAQ publik dan pengujian kecil
Anda memerlukan izin untuk mengelola satu agent ElevenLabs serta mengedit dan menerbitkan satu halaman situs. Siapkan halaman HTTPS, peramban dengan mikrofon yang berfungsi, dan seseorang yang dapat menyetujui FAQ serta mendengarkan jawabannya. Alat penerbitan situs harus mengizinkan elemen khusus dan script yang didokumentasikan; gunakan cara terkini alat tersebut untuk menambahkan HTML khusus. Contoh di bawah adalah kode HTML sematan biasa dari penyedia, bukan petunjuk pemasangan untuk platform tertentu.
Tuliskan beberapa **fakta publik yang telah disetujui** yang boleh dijawab agent, beserta cara menghubungi manusia untuk permintaan di luar cakupan tersebut. Pilih satu pertanyaan yang jawabannya ada dalam fakta itu dan satu pertanyaan yang seharusnya ditolak atau diteruskan kepada manusia. Jangan masukkan catatan pelanggan, kebijakan internal, detail akun, atau rahasia API ke agent publik ini. Tentukan siapa yang berwenang menyetujui suara situs dan pemberitahuan bagi pengunjung. Periksa bahwa suara ElevenLabs yang dipilih dan ketentuan akun Anda mengizinkan penggunaan situs yang dimaksud; panduan ini tidak menetapkan hak komersial universal atas suara.
Sebelum pengujian suara apa pun, periksa paket ElevenLabs Anda yang sebenarnya, sisa kredit, pengaturan bayar sesuai pemakaian, dan informasi biaya model yang dipilih. Menurut ElevenLabs, pembuatan agent gratis, sedangkan panggilan suara yang tersambung menggunakan kuota dan biaya LLM dapat dikenakan terpisah. Waktu tersambung bisa lebih panjang daripada waktu berbicara. Dapatkan persetujuan belanja situs untuk panggilan di dasbor dan situs langsung sebelum memulai keduanya. Batas durasi per panggilan membatasi satu percakapan; batas itu bukan plafon pengeluaran bulanan.
## Konfigurasikan agent khusus
1. **Buat agent FAQ publik terpisah** di dasbor ElevenLabs. Gunakan konfigurasi kosong atau templat yang disetujui, lalu periksa pengetahuan dan alat yang diwarisinya. Hapus pengetahuan pribadi, pemesanan, CRM, webhook, atau tindakan lain yang tidak diperlukan FAQ publik. Tetapkan tujuan dan batas jawaban dari fakta yang disetujui, sertakan jalur kontak manusia, lalu pilih suara dan bahasa yang boleh Anda gunakan. Jangan mengubah agent pribadi yang ada menjadi widget publik ini dengan menonaktifkan autentikasinya.
2. Di **Channels → Widget → Interface**, pilih antarmuka suara yang dimaksud dan tinjau teks serta ketentuan yang ditampilkan kepada pengunjung. Panduan terkini juga menyebut sebagian bagian ini sebagai tab **Widget** , jadi periksa kontrol yang tersimpan di dasbor Anda. Cara penyematan berikut memerlukan **agent publik dengan autentikasi dinonaktifkan**, yang menurut panduan berada di **Advanced**. ID agent akan terlihat dalam sumber halaman; ID itu bukan rahasia. Jangan masukkan kunci API atau informasi pribadi maupun informasi khusus pengunjung ke markup dan pengaturan pengganti widget.
3. Di tab **Security** milik agent, tambahkan hostname situs yang persis sesuai ke **Allowlist**, simpan, lalu baca kembali. Menurut ElevenLabs, hostname dicocokkan secara persis, maksimal sepuluh hostname diizinkan, dan setiap subdomain harus ditambahkan terpisah. Tambahkan hostname pengujian lokal hanya jika Anda benar-benar membutuhkan asal pengujian itu. Daftar tersebut membatasi tempat memulai koneksi; daftar itu tidak mengautentikasi orang yang berbicara.
4. Tinjau kontrol privasi agent untuk penyimpanan transkrip dan audio, lalu setujui pemberitahuan pengunjung dan proses persetujuan yang sesuai untuk situs Anda. Widget dapat menampilkan ketentuan yang disediakan pemilik sebelum panggilan, tetapi tampilan itu dan izin mikrofon peramban tidak menuntaskan kewajiban hukum situs Anda. Di **Advanced → Call limits**, tetapkan dan simpan nilai yang sesuai untuk **Max conversation duration**. ElevenLabs mendokumentasikan nilai bawaan 600 detik dan rentang 60–7.200 detik. Baca kembali pengaturan privasi, durasi, dan akses yang tersimpan sebelum pengujian berbayar.
## Tambahkan kode sematan ke satu halaman draf
Letakkan kode berikut di bagian isi halaman menggunakan fasilitas HTML khusus atau script yang didukung situs. Ganti `YOUR_PUBLIC_AGENT_ID` dengan ID agent khusus. Batasi peluncuran awal pada satu halaman yang disetujui.
```html
```
Ini adalah [kode sematan widget resmi](https://elevenlabs.io/docs/eleven-agents/customization/widget)terkini. URL script-nya **tidak memiliki versi tetap**; catat apa yang Anda pasang dan periksa kembali panduannya saat memelihara halaman. Pada pratinjau draf, pastikan widget muncul sekali dan tidak menutupi kontrol halaman yang penting. Jika situs menerapkan Content Security Policy, minta pengelolanya memeriksa permintaan script atau koneksi yang benar-benar diblokir dan membuat perubahan terbatas yang ditinjau. Menonaktifkan kebijakan atau menambahkan wildcard luas bukan langkah pemasangan.
## Periksa agent, lalu jalur pengunjung di situs langsung
Setelah meninjau biaya dan privasi, ajukan pertanyaan yang dapat dijawab dan yang di luar cakupan pada pengujian suara dasbor. Bandingkan jawabannya dengan fakta yang disetujui dan batas penerusan kepada manusia. Perbaiki agent dan uji lagi jika salah satu jawaban tidak aman atau tidak didukung. Panggilan dasbor hanya mengonfirmasi jalur dasbor tersebut; panggilan itu tidak membuktikan kode sematan situs berfungsi.
Minta pemilik halaman meninjau konten, pemberitahuan, penempatan, dan hasil uji sebelum menerbitkan. Pada **halaman langsung di hostname yang diizinkan**, buka widget di peramban, berikan izin mikrofon dengan sengaja, ajukan dua pertanyaan yang sama, dengarkan kedua jawaban, lalu akhiri panggilan. Periksa bahwa indikator mikrofon mati dan widget tetap dapat digunakan pada tampilan seukuran ponsel. Bandingkan ucapannya yang sebenarnya dengan jawaban yang disetujui; jawaban yang lancar bukan bukti faktanya benar. Catat waktu uji dan agent agar Anda dapat menyelidiki penggunaannya. Ini pemeriksaan yang harus dilakukan pembaca, bukan hasil yang diamati BIG CHANGE.
Buka **Call history** untuk agent jika pengaturan penyimpanan yang dipilih mempertahankan catatan, lalu periksa percakapan terhadap dua pertanyaan tersebut. Di **Analytics**, saring berdasarkan agent itu dan rentang waktu sempit, lalu tinjau jumlah panggilan, durasi, dan biaya. Angka ini merupakan agregat; angka tersebut saja tidak dapat membuktikan panggilan mana yang menimbulkan biaya. Jika pengaturan penyimpanan yang disetujui menghapus catatan percakapan, simpan hanya pengamatan minimal atas jawaban langsung yang disetujui pemilik dan tinjau penggunaan agregat yang tersedia. Jangan memperpanjang penyimpanan hanya untuk menyelesaikan pemeriksaan ini. Ketiadaan catatan tersimpan tidak membuktikan panggilan gratis.
## Jika pemeriksaan gagal
Jika widget tidak muncul, bandingkan markup yang benar-benar diterbitkan dengan [kode sematan yang didokumentasikan](https://elevenlabs.io/docs/eleven-agents/customization/widget), periksa elemen atau script ganda, lalu teliti kesalahan script atau CSP tertentu di peramban. Jika widget muncul tetapi tidak dapat tersambung, baca kembali pengaturan autentikasi publik agent khusus, hostname langsung yang persis sesuai di daftar izin, izin mikrofon, kredit tersedia, dan kesalahan dasbor. Jika suara gagal, periksa mikrofon yang dipilih, izin peramban, dan konteks halaman aman, lalu teliti catatan panggilan yang tersedia. Akhiri sesi yang belum jelas dan lihat penggunaan sebelum membayar percobaan lain.
Jika agent mengarang jawaban atau melenceng dari FAQ, hapus kode sematan dari halaman selama memperbaiki fakta dan instruksi yang disetujui. Ulangi pertanyaan di dasbor dan situs langsung sebelum memasangnya kembali. Jika penggunaan melebihi persetujuan, hapus kode sematan, periksa analitik yang disaring dan tagihan akun, lalu pertimbangkan kembali durasi percakapan dan cakupan peluncuran. Menghapus kode sematan halaman ini menghentikan halaman ini menawarkan panggilan baru; tindakan itu tidak membuktikan panggilan yang ada telah berakhir atau menghapus akses ke agent publik dari host lain yang diizinkan.
Untuk aplikasi suara peramban lokal yang dibuat pengembang, [panduan OpenAI Realtime kami](https://bigchange.ai/blog/openai-realtime-browser-voice-webrtc-guide) membahas tugas berbeda. Panduan ini menggunakan widget publik yang dihosting ElevenLabs. Panduan widget mencantumkan atribut `signed-url` di bagian lain, tetapi petunjuk penyematan dasarnya secara tegas memerlukan agent publik; atribut itu saja bukan resep widget pribadi yang telah diuji.
## Sumber dan bacaan lanjutan
- [Penyesuaian widget ElevenLabs](https://elevenlabs.io/docs/eleven-agents/customization/widget): persyaratan agent publik, kontrol antarmuka, dan kode sematan terkini. URL script tidak memiliki versi tetap.
- [Autentikasi agent](https://elevenlabs.io/docs/eleven-agents/customization/authentication): perilaku daftar izin hostname yang persis sesuai, batas sepuluh host, dan perbedaannya dari autentikasi per pengguna.
- [Alur percakapan](https://elevenlabs.io/docs/eleven-agents/customization/conversation-flow) dan [kontrol privasi](https://elevenlabs.io/docs/eleven-agents/customization/privacy): pengaturan durasi, penyimpanan, dan penyimpanan audio.
- [Panduan awal ElevenAgents](https://elevenlabs.io/docs/eleven-agents/quickstart), [Analytics](https://elevenlabs.io/docs/eleven-agents/dashboard) dan [bantuan biaya](https://elevenlabs.io/docs/help-center/product/eleven-agents/how-much-does-eleven-agents-cost): pengujian dasbor, riwayat, penggunaan agregat, dan dasar penagihan. Ketentuan akun menentukan kuota dan tagihan sebenarnya.
## Sources
- [Penyesuaian widget](https://elevenlabs.io/docs/eleven-agents/customization/widget) — Diperiksa 20 Oktober 2026. Persyaratan resmi agent publik, mode widget, elemen khusus dasar, dan script terkini tanpa versi tetap. Tidak memverifikasi implementasi widget pribadi bertanda tangan.
- [Autentikasi agent](https://elevenlabs.io/docs/eleven-agents/customization/authentication) — Diperiksa 20 Oktober 2026. Daftar izin hostname persis dan batas sepuluh host; daftar izin mengontrol asal koneksi, bukan autentikasi pengunjung.
- [Alur percakapan](https://elevenlabs.io/docs/eleven-agents/customization/conversation-flow) — Diperiksa 20 Oktober 2026. Nilai bawaan dan rentang durasi per percakapan serta kontrol simpan dasbor; tidak menetapkan plafon pengeluaran agregat.
- [Privasi](https://elevenlabs.io/docs/eleven-agents/customization/privacy) — Diperiksa 20 Oktober 2026. Kontrol penyimpanan transkrip dan audio; pemberitahuan situs sebenarnya dan dasar hukum memerlukan tinjauan pemilik.
- [Panduan awal ElevenAgents](https://elevenlabs.io/docs/eleven-agents/quickstart) — Diperiksa 20 Oktober 2026. Penyiapan dan pengujian dasbor, Call history, serta potongan kode widget situs resmi; tidak ada pengujian BIG CHANGE.
- [Analytics](https://elevenlabs.io/docs/eleven-agents/dashboard) — Diperiksa 20 Oktober 2026. Penyaringan agent/waktu dan agregat jumlah, durasi, serta biaya; agregat saja tidak dapat mengidentifikasi satu panggilan uji.
- [Berapa biaya ElevenAgents?](https://elevenlabs.io/docs/help-center/product/eleven-agents/how-much-does-eleven-agents-cost) — Diperiksa 20 Oktober 2026. Pembuatan agent, durasi panggilan tersambung, dan biaya LLM terpisah; paket, kredit, dan hak suara khusus akun harus diverifikasi.