> ## 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.

# Web bileşenini yerleştirin

> Pazarlama veya destek sitenize bir sesli AI ajanı ekleyin — telefon numarası gerekmez.

Web bileşeni, sitenizi ziyaret edenlere tarayıcının mikrofonunu kullanarak
yapay zeka ajanıyla tıkla ve konuş görüşmesi sunar. Kendi [SDK referansı](/tr/widget/overview)
olan ayrı bir JavaScript / React SDK'sıdır
— bu kılavuz, bileşenin ihtiyaç duyduğu ThunderPhone tarafındaki kuruluma odaklanır.

<Note>
  Bunların tümünü cURL olmadan yapabilirsiniz: **Web Bileşenleri** pano
  sayfası (`/dashboard/web-widgets`) bileşeni oluşturur, modunu
  ve ajanını ayarlar, izin verilen alan adlarını yönetir ve size yerleştirme kod parçacığını verir.
</Note>

## Ön koşullar

<Steps>
  <Step title="Bir ajan oluşturun">
    İstemi ve sesi bileşen oturumunu çalıştıracak ajan. Varsayılan olan
    `widget_enabled: true` ayarını yapın.
  </Step>

  <Step title="Yönlendirme moduna karar verin">
    * `mode="agent"` — anahtar başına bir statik ajan. En basit seçenektir.
    * `mode="webhook"` — sunucunuz, her ziyaretçi için ajanı bir
      [`web.incoming` webhook'u](/tr/webhooks/call-incoming) aracılığıyla seçer. Bunu
      oturum açmış kullanıcılar, A/B testleri veya sayfa başına yönlendirme için kullanın.
  </Step>

  <Step title="İzin verilen alan adlarını listeleyin">
    Yayınlanabilir anahtarlar kaynak kilitlidir. Bileşeni yerleştirecek her ana makine adını
    belirtmelisiniz. Yerel geliştirme sırasında `localhost` / `127.0.0.1` her zaman
    izinlidir.
  </Step>
</Steps>

## Yayınlanabilir anahtar oluşturun

<CodeGroup>
  ```bash Static agent theme={null}
  curl -X POST https://api.thunderphone.com/v1/publishable-key \
    -H "Authorization: Bearer sk_live_YOUR_API_KEY" \
    -H "Content-Type: application/json" \
    -d '{
      "name":            "Marketing site (prod)",
      "mode":            "agent",
      "agent_id":        12,
      "allowed_domains": ["example.com", "*.example.com"]
    }'
  ```

  ```bash Dynamic via webhook theme={null}
  curl -X POST https://api.thunderphone.com/v1/publishable-key \
    -H "Authorization: Bearer sk_live_YOUR_API_KEY" \
    -H "Content-Type: application/json" \
    -d '{
      "name":            "Support (dynamic)",
      "mode":            "webhook",
      "webhook_url":     "https://example.com/thunderphone/widget-hook",
      "allowed_domains": ["support.example.com"]
    }'
  ```
</CodeGroup>

Yanıt, `pk_live_...` ile başlayan bir `key` içerir. **Yayınlanabilir
anahtarlar tasarım gereği herkese açıktır** — ön uç paketinizle
güvenle yayımlayabilirsiniz. Tüm alanlar için [Yayınlanabilir anahtarlar referansına](/api-reference/publishable-keys)
bakın.

<Warning>
  `allowed_domains` en az bir girdi içermelidir. `*.example.com`,
  alt alan adlarıyla (ör. `api.example.com`) eşleşir ancak yalın
  alan adıyla **eşleşmez**. `*` veya `*.*` gibi yalın joker karakterler reddedilir.
</Warning>

## Bileşeni sitenize ekleyin

Üç entegrasyon seçeneği
[bileşen SDK belgelerinde](/tr/widget/overview) açıklanmıştır:

<CardGroup cols={3}>
  <Card title="React bileşeni" icon="react" href="/tr/widget/react">
    `<ThunderPhoneWidget publishableKey="pk_live_..." />`.
  </Card>

  <Card title="Headless kancası" icon="circle-nodes" href="/tr/widget/headless-hook">
    Özel arayüzler için `useThunderPhone()`.
  </Card>

  <Card title="CDN betik etiketi" icon="code" href="/tr/widget/cdn-script-tag">
    Paketleyici kullanmayan siteler için `ThunderPhone.mount({...})`.
  </Card>
</CardGroup>

Üçü de aynı `publishableKey` değerini kabul eder ve mikrofon düğmesini
ve görüşme içi ses öğesini işler.

Bileşen `context` değeri 12.000 karakterde kesilir (tipik İngilizce metinde
yaklaşık 3.400 token) ve
[istem boyutu ek ücretine](/tr/guides/billing-and-topups) dahil edilir.

## Bileşen modu webhook'ları

`mode="webhook"` olduğunda ThunderPhone, her oturum başlangıcında
`web.incoming` yüküyle `webhook_url` adresinizi çağırır. Bu ziyaretçi için
çalıştırmak istediğiniz ajan yapılandırmasını döndürün — telefon
görüşmeleriyle aynı [yanıt şemasını](/tr/webhooks/call-incoming) izler:

```json theme={null}
{
  "prompt":  "You are a VIP concierge for Jane Doe.",
  "voice":   "john",
  "product": "storm-base",
  "tools":   [ /* per-customer tools */ ]
}
```

Kendi oturumunuzdaki bağlamı (hangi müşterinin gezindiği,
hangi sayfada olduğu) isteme ekleyebilir ve her yayına alma için ajanları değiştirebilirsiniz.

## Oturumları izleyin

Widget oturumları, telefon aramalarıyla aynı transkript, kayıt, değerlendirme ve
faturalandırma bilgileriyle [`GET /v1/calls`](/api-reference/calls#list-calls) içinde
`direction="widget"` olarak görünür. Yalnızca widget'a özel bir pano oluşturmak için
`direction` ile filtreleyin.

***

## Sonraki adımlar

<CardGroup cols={2}>
  <Card title="Widget SDK referansı" icon="window-maximize" href="/tr/widget/overview">
    React / hook / CDN entegrasyonu ayrıntıları.
  </Card>

  <Card title="Arama başına dinamik yapılandırma" icon="bolt" href="/tr/guides/dynamic-call-config">
    `mode="webhook"` akışını uçtan uca uygulayın.
  </Card>

  <Card title="Yayınlanabilir anahtarlar referansı" icon="key" href="/api-reference/publishable-keys">
    Anahtar kaynağındaki tüm alanlar.
  </Card>

  <Card title="Mikrofon oturumları API'si" icon="microphone" href="/api-reference/mic-sessions">
    Widget'ı atlayın; özel kullanıcı arayüzleri için LiveKit'i doğrudan kullanın.
  </Card>
</CardGroup>