Cara menambahkan widget FAQ suara ElevenLabs ke satu halaman situs

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.

<elevenlabs-convai agent-id="YOUR_PUBLIC_AGENT_ID"></elevenlabs-convai>
<script src="https://unpkg.com/@elevenlabs/convai-widget-embed" async type="text/javascript"></script>

Ini adalah kode sematan widget resmiterkini. 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, 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 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: persyaratan agent publik, kontrol antarmuka, dan kode sematan terkini. URL script tidak memiliki versi tetap.
• Autentikasi agent: perilaku daftar izin hostname yang persis sesuai, batas sepuluh host, dan perbedaannya dari autentikasi per pengguna.
• Alur percakapan dan kontrol privasi: pengaturan durasi, penyimpanan, dan penyimpanan audio.
• Panduan awal ElevenAgents, Analytics dan bantuan biaya: pengujian dasbor, riwayat, penggunaan agregat, dan dasar penagihan. Ketentuan akun menentukan kuota dan tagihan sebenarnya.