---
title: "Kontrol panelinde bir web bileşeni oluşturun"
description: "Web Bileşenleri sayfasından siteniz için tıkla ve konuş bileşeni ayarlayın — API çağrısı gerekmez."
---

**Web Widgets** sayfası (`/dashboard/web-widgets`), ThunderPhone'ın gömülebilir ses widget'ını çalıştıran yayımlanabilir anahtarları oluşturur ve yönetir.
Bu kılavuzun [API sürümünün](/tr/guides/embed-web-widget) cURL ile yaptığı her şeyi bu sayfa bir form aracılığıyla yapar; ayrıca gömme kodunu sizin için oluşturur.

## Widget oluşturun

<Steps>
  <Step title="Yeni widget'a tıklayın ve bir mod seçin">
    - **Ajan modu** — widget, açılır listeden seçtiğiniz tek bir ajanı her zaman çalıştırır.
      En basit kurulumdur.
    - **Webhook modu** — ThunderPhone, her widget oturumunda webhook URL'nizi çağırır
      ve sunucunuz, ilgili ziyaretçi için ajan yapılandırmasını döndürür
      (sayfa bazlı yönlendirme, oturum açmış kullanıcılar, kademeli yayınlar).
      Kuruluşunuzun varsayılan webhook'unu kullanmak için URL'yi boş bırakın;
      yeni bir URL girdiğinizde bunu kuruluş varsayılanı olarak da ayarlayabilirsiniz.
  </Step>
  <Step title="İzin verilen alan adlarını listeleyin">
    En az bir alan adı gereklidir ve tarayıcılar yalnızca listelediğiniz ana bilgisayar adlarından
    oturum başlatabilir. `*.example.com` gibi alt alan adı joker karakterlerine izin verilir
    (bunlar yalın alan adıyla değil, alt alan adlarıyla eşleşir); `*` gibi yalın joker karakterler
    reddedilir. Bu liste, anahtarınızın başka sitelerde kolayca yeniden kullanılmasını engeller,
    ancak kimlik doğrulama değildir: tarayıcı dışındaki bir komut dosyası herhangi bir `Origin`
    üst bilgisi gönderebilir. `localhost` üretimde otomatik olarak izinli değildir; üretim API'sine
    karşı yerel olarak test etmek için bunu listeye ekleyin.
  </Step>
  <Step title="Tarayıcı geçersiz kılmalarını seçin">
    Sayfanızın gönderdiği her oturum ayarını işaretleyin: **Sayfa bağlamı**,
    **Değişkenler**, **Ses**, **Dil**. Yeni widget'lar bunların hiçbirini kabul etmez ve
    devre dışı bir ayar içeren oturum isteği `400` ile başarısız olur.
    Anahtarınız herkese açıktır; bu nedenle yalnızca kullandığınız ayarlara izin verin. Bkz.
    [Tarayıcı geçersiz kılmaları](/tr/guides/embed-web-widget).
  </Step>
  <Step title="Adlandırın, etkinleştirin, oluşturun">
    **Widget'ı etkinleştir** düğmesi, anahtarın oturum kabul edip etmeyeceğini kontrol eder
    — widget'ı devre dışı olarak oluşturabilir ve yayına alırken etkinleştirebilirsiniz.
  </Step>
</Steps>

## Gömme kodunu alın

Oluşturmanın hemen ardından (veya her satırdaki **Göm** düğmesiyle), bir gömme
iletişim kutusu yayımlanabilir anahtarınız eklenmiş, yapıştırmaya hazır kod oluşturur:

- **React** — paketleyici uygulamalar için bir `<ThunderPhoneWidget />` parçacığı.
- **Script etiketi** — tüm siteler için CDN `<script>` + stil sayfası çifti.

İletişim kutusu ayrıca temel görünüm seçeneklerini — başlık, birincil
renk, köşe konumu ve açık/koyu tema — önizler ve seçimlerinizi
parçacığa ekler. Tüm prop başvurusu, stil kancaları ve headless seçeneği için [widget SDK belgelerine](/tr/widget/overview) bakın.

<Note>
  Yayımlanabilir anahtarlar (`pk_live_…`) tasarım gereği herkese açıktır; ön uç koduna eklemek güvenlidir. Bir anahtarı istediğiniz zaman satırındaki kopyalama düğmesiyle kopyalayın.
</Note>

## Widget'ları listeden yönetin

Her satır yerinde düzenlenir:

- **Mod / Ajan** — satır içi seçimlerle ajan ve webhook modları arasında geçiş yapın veya ajanı değiştirin.
- **Alan adları** — izin verilen alan adlarını etiket olarak ekleyin veya kaldırın.
- **Etkinleştir/devre dışı bırak** — her widget için bir anahtar; devre dışı bırakılan widget'lar oturum kabul etmeyi hemen durdurur.
- **Kuruluşa aktar** — widget'ı üyesi olduğunuz başka bir kuruluşa kopyalayın veya taşıyın (taşıma işlemi onu buradan kaldırır).
- **Sil** — yayımlanabilir anahtarı iptal eder; widget tüm alan adlarında hemen çalışmayı durdurur. Bu işlem geri alınamaz.

Widget oturumları, telefon aramalarıyla aynı transkript, kayıt ve değerlendirme bilgileriyle [arama geçmişinde](/tr/guides/review-calls) görünür.

## Sonraki adımlar

<CardGroup cols={2}>
  <Card title="Widget SDK başvurusu" icon="window-maximize" href="/tr/widget/overview">
    React bileşeni, headless kancası ve CDN betiği ayrıntıları.
  </Card>
  <Card title="Webhook modu yönlendirmesi" icon="bolt" href="/tr/guides/dynamic-call-config">
    Sunucunuzdan ziyaretçi başına ajan yapılandırması döndürün.
  </Card>
</CardGroup>