---
title: "Buat widget web di dasbor"
description: "Siapkan widget klik-untuk-berbicara untuk situs Anda dari halaman Widget Web — tanpa panggilan API."
---

Halaman **Widget Web** (`/dashboard/web-widgets`) membuat dan mengelola
kunci yang dapat dipublikasikan yang mendukung widget suara ThunderPhone
yang dapat disematkan. Semua yang dilakukan [versi API dari panduan ini](/id/guides/embed-web-widget)
dengan cURL, dilakukan halaman ini dengan formulir — ditambah halaman ini menghasilkan kode
sematan untuk Anda.

## Buat widget

<Steps>
  <Step title="Klik New widget dan pilih mode">
    - **Mode agen** — widget selalu menjalankan satu agen yang Anda pilih dari
      menu dropdown. Penyiapan paling sederhana.
    - **Mode webhook** — pada setiap sesi widget, ThunderPhone memanggil
      URL webhook Anda dan server Anda mengembalikan konfigurasi agen
      untuk pengunjung tersebut (perutean per halaman, pengguna yang masuk, peluncuran bertahap).
      Biarkan URL kosong untuk menggunakan webhook default organisasi Anda;
      saat memasukkan URL baru, Anda juga dapat menetapkannya sebagai default organisasi.
  </Step>
  <Step title="Daftarkan domain yang diizinkan">
    Setidaknya satu domain diperlukan, dan browser hanya dapat memulai
    sesi dari nama host yang Anda daftarkan. Wildcard subdomain seperti
    `*.example.com` diizinkan (cocok dengan subdomain, bukan domain
    tanpa subdomain); wildcard tanpa subdomain seperti `*` ditolak. Daftar ini mencegah
    penggunaan ulang kunci Anda secara kasual di situs lain, tetapi bukan autentikasi: skrip
    di luar browser dapat mengirim header `Origin` apa pun. `localhost` tidak
    diizinkan secara otomatis di produksi; tambahkan ke daftar untuk menguji
    secara lokal terhadap API produksi.
  </Step>
  <Step title="Pilih override browser">
    Centang setiap pengaturan sesi yang dikirim halaman Anda: **Konteks halaman**,
    **Variabel**, **Suara**, **Bahasa**. Widget baru tidak menerima pengaturan apa pun, dan
    permintaan sesi yang membawa pengaturan nonaktif gagal dengan `400`.
    Kunci Anda bersifat publik, jadi izinkan hanya yang Anda gunakan. Lihat
    [Override browser](/id/guides/embed-web-widget).
  </Step>
  <Step title="Beri nama, aktifkan, buat">
    Tombol **Aktifkan widget** mengontrol apakah kunci menerima
    sesi — Anda dapat membuat widget dalam keadaan nonaktif dan mengaktifkannya saat peluncuran.
  </Step>
</Steps>

## Ambil kode sematan

Segera setelah pembuatan (atau melalui tombol **Sematkan** di setiap baris), dialog
sematan menghasilkan kode siap tempel dengan kunci yang dapat dipublikasikan Anda sudah
diisi:

- **React** — cuplikan `<ThunderPhoneWidget />` untuk aplikasi bundler.
- **Tag skrip** — pasangan `<script>` CDN + stylesheet untuk situs apa pun.

Dialog juga mempratinjau opsi tampilan dasar — judul, warna
utama, posisi sudut, dan tema terang/gelap — lalu memasukkan pilihan Anda
ke dalam cuplikan. Untuk referensi prop lengkap, hook penataan gaya, dan
opsi headless, lihat [dokumentasi SDK widget](/id/widget/overview).

<Note>
  Kunci yang dapat dipublikasikan (`pk_live_…`) bersifat publik secara desain — aman digunakan dalam
  kode front-end. Salin kapan saja dengan tombol salin pada barisnya.
</Note>

## Kelola widget dari daftar

Setiap baris dapat diedit langsung di tempat:

- **Mode / Agen** — beralih antara mode agen dan webhook, atau ganti
  agen, dengan pemilih inline.
- **Domain** — tambahkan atau hapus domain yang diizinkan sebagai chip.
- **Aktifkan/nonaktifkan** — satu sakelar per widget; widget yang dinonaktifkan berhenti
  menerima sesi seketika.
- **Transfer ke organisasi** — salin atau pindahkan widget ke organisasi lain
  yang Anda ikuti (memindahkan akan menghapusnya dari sini).
- **Hapus** — mencabut kunci yang dapat dipublikasikan; widget berhenti berfungsi
  seketika di semua domain. Tindakan ini tidak dapat dibatalkan.

Sesi widget muncul di [riwayat panggilan](/id/guides/review-calls) dengan
transkrip, rekaman, dan penilaian yang sama seperti panggilan telepon.

## Langkah berikutnya

<CardGroup cols={2}>
  <Card title="Referensi SDK widget" icon="window-maximize" href="/id/widget/overview">
    Detail komponen React, hook headless, dan skrip CDN.
  </Card>
  <Card title="Perutean mode webhook" icon="bolt" href="/id/guides/dynamic-call-config">
    Kembalikan konfigurasi agen per pengunjung dari server Anda.
  </Card>
</CardGroup>