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

# Gömülebilir Sesli Widget

> Birkaç satır kodla herhangi bir web sitesine sesli AI ajanı ekleyin

ThunderPhone yerleştirilebilir ses widget'ı, web sitenizin ziyaretçilerinin tarayıcıdan doğrudan bir yapay zeka ajanıyla konuşmasını sağlar. Telefon görüşmesi gerekmez -- kullanıcılar bir düğmeye tıklar ve ThunderPhone destekli gerçek zamanlı sesli görüşme başlatır.

Widget, özelleştirilebilir vurgu renkleri ve konumlandırmayla açık ve koyu temalara uyum sağlayan cam efektli bir çubuk olarak görüntülenir. `@thunderphone/widget` npm paketi olarak dağıtılır ve paketleyici kullanılmayan ortamlar için CDN üzerinden de kullanılabilir.

<Frame>
  <img src="https://mintcdn.com/thunderphone/4XhPaCl4RGfyS7_M/images/widget-showcase.png?fit=max&auto=format&n=4XhPaCl4RGfyS7_M&q=85&s=17fea4fe853f3548b9b2628c9d4c4fc0" alt="Çeşitli vurgu renkleriyle açık ve koyu temalarda ThunderPhone widget'ı" width="1200" height="800" data-path="images/widget-showcase.png" />
</Frame>

## Ön Koşullar

Widget'ı yerleştirmeden önce [ThunderPhone Dashboard](https://app.thunderphone.com) içinde şu üç adımı tamamlayın:

<Steps>
  <Step title="Yayınlanabilir API anahtarı oluşturun">
    Pano ayarlarında **Geliştiriciler** bölümüne gidin ve yayınlanabilir bir anahtar oluşturun. Yayınlanabilir anahtarlar `pk_live_` ile başlar ve istemci tarafı kodunda kullanılmaları güvenlidir.
  </Step>

  <Step title="İzin verilen alan adlarını yapılandırın">
    Aynı Geliştiriciler ayarlarında, widget'ın yerleştirileceği alan adlarını ekleyin. `localhost`, geliştirme için her zaman izinlidir. Joker karakterler desteklenir (ör. `*.example.com`).
  </Step>

  <Step title="Web widget'ı oluşturun">
    Panoda **Web Widget'ları** bölümüne gidin ve bir widget oluşturun. Kullanıma sunmak istediğiniz ajanı ve kullanılacak yayınlanabilir anahtarı seçin. Ajan, yayınlanabilir anahtar yapılandırmanızdan otomatik olarak belirlenir.
  </Step>
</Steps>

<Warning>
  Yayınlanabilir anahtarlar (`pk_live_...`), gizli API belirteçlerinizle **aynı değildir**. Yayınlanabilir anahtarlar istemci tarafında kullanım için tasarlanmıştır ve izin verilen alan adlarınızdaki widget oturumlarıyla sınırlıdır. Gizli API belirtecinizi asla istemci tarafı kodunda kullanmayın.
</Warning>

***

## Hızlı Başlangıç

Paketi yükleyin:

```bash theme={null}
npm install @thunderphone/widget
```

Widget'ı uygulamanıza ekleyin:

```tsx theme={null}
import { ThunderPhoneWidget } from '@thunderphone/widget'
import '@thunderphone/widget/style.css'

function App() {
  return (
    <ThunderPhoneWidget
      publishableKey="pk_live_your_publishable_key"
      theme="dark"
      primaryColor="#8b5cf6"
    />
  )
}
```

Hepsi bu kadar. Kullanıcılarınız, tek tıklamayla onları yapay zeka ajanınıza bağlayan cam efektli bir arama çubuğu görecektir.

***

## Özelleştirme

Widget'ın görünüm için dört prop'u vardır:

| Prop           | Varsayılan                              | Açıklama                                                                             |
| -------------- | --------------------------------------- | ------------------------------------------------------------------------------------ |
| `theme`        | `'light'`                               | Beyaz cam için `'light'`, koyu cam için `'dark'`                                     |
| `primaryColor` | `'#000000'` (açık) / `'#ffffff'` (koyu) | Başlat düğmesi, dalga formu ve bağlanma göstergesi için vurgu rengi                  |
| `title`        | `'Voice assistant'`                     | Widget'ta görüntülenen metin                                                         |
| `position`     | `'bottom-right'`                        | Görüntü alanı köşesi: `'bottom-right'`, `'bottom-left'`, `'top-right'`, `'top-left'` |

<CodeGroup>
  ```tsx Light theme (default) theme={null}
  <ThunderPhoneWidget
    publishableKey="pk_live_your_publishable_key"
  />
  ```

  ```tsx Dark theme with custom color theme={null}
  <ThunderPhoneWidget
    publishableKey="pk_live_your_publishable_key"
    theme="dark"
    primaryColor="#8b5cf6"
    title="Ask our AI"
  />
  ```
</CodeGroup>

Üç ek prop, görünüm yerine oturumu özelleştirir -- üçü de arama başladığında oturum isteğine iletilir:

| Prop       | Açıklama                                                                                      |
| ---------- | --------------------------------------------------------------------------------------------- |
| `language` | Oturum başına dil geçersiz kılma -- `en`, `es` veya `fr-FR` gibi bir kod ya da yerel ayar     |
| `voice`    | Oturum başına ses geçersiz kılma -- `maria` gibi bir ses adı                                  |
| `context`  | Ajana iletilen olgusal sayfa veya site bağlamı (sunucu tarafında 12.000 karaktere kısaltılır) |

Prop tablosunun tamamı için [React bileşeni referansına](/tr/widget/react) bakın.

Tamamen özel bir kullanıcı arayüzü için, kendi arayüzünüzü oluştururken sesli oturumu yönetmek üzere [headless hook'u](/tr/widget/headless-hook) kullanın. Hook, sese tepki veren görselleştirmeler oluşturmak için gerçek zamanlı ses seviyelerini sunar.

***

## Entegrasyon Seçenekleri

Teknoloji yığınınıza uygun entegrasyon yöntemini seçin:

<CardGroup cols={3}>
  <Card title="React Bileşeni" icon="react" href="/tr/widget/react">
    Yerleşik arama kontrolleri ve durum göstergesi içeren hazır kullanıcı arayüzü bileşeni. İçe aktarın, prop'ları iletin, işlem tamam.
  </Card>

  <Card title="Headless Hook" icon="code" href="/tr/widget/headless-hook">
    Kullanıcı arayüzü üzerinde tam kontrol. Siz kendi arayüzünüzü oluştururken `useThunderPhone` hook'u sesli oturumu yönetir.
  </Card>

  <Card title="CDN / Script Etiketi" icon="globe" href="/tr/widget/cdn-script-tag">
    Bundler gerekmez. Statik siteler, WordPress ve React dışındaki diğer ortamlar için widget'ı bir script etiketiyle yükleyin.
  </Card>
</CardGroup>

***

## Stil

Widget, `theme` prop'u ile kontrol edilen yerleşik açık ve koyu temalar ile `primaryColor` prop'u ile kontrol edilen bir vurgu rengi sunar. Daha kapsamlı özelleştirme için CSS özel özelliklerini ve sınıflarını geçersiz kılabilirsiniz. Ayrıntılar için [Stil rehberine](/tr/widget/styling) bakın.

<Note>
  Yardıma mı ihtiyacınız var? [support@thunderphone.com](mailto:support@thunderphone.com) adresinden bizimle iletişime geçin.
</Note>