> ## 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. # CDN / Script Etiketi > ThunderPhone ses aracını paketleyici olmadan herhangi bir web sitesine ekleyin CDN derlemesi React'i dahili olarak paketler; bu nedenle bileşeni statik sitelerde, WordPress'te, Webflow'da veya HTML ekleyebileceğiniz herhangi bir sayfada kullanabilirsiniz. npm, paketleyici veya framework gerekmez. ## CDN URL'leri ```html Latest (recommended) theme={null} ``` ```html Pinned version theme={null} ``` `latest` URL'leri, kontrol panelinin yerleştirme kod parçacığı oluşturucusunun ürettiği URL'lerdir. 5 dakika boyunca önbelleğe alınırlar ve yeni kararlı sürümleri otomatik olarak alırlar. Sabitlenmiş `/widget/vX.Y.Z/` yolları değiştirilemez ve uzun süreli önbelleğe alınır -- sabitlerseniz, sürümü geliştirme yaptığınız `@thunderphone/widget` npm sürümüyle eşleştirin. *** ## Temel Kullanım ```html theme={null}

``` Bileşen hedef öğeye bağlanır ve **görüntü alanının bir köşesinde sabit konumlu bir çubuk** olarak oluşturulur (varsayılan `bottom-right`; `position` seçeneğiyle kontrol edilir). Bağlama öğesi yalnızca React köküdür -- sayfadaki konumu, bileşenin nerede görüneceğini etkilemez. *** ## Bağlama Seçenekleri `ThunderPhone.mount()`, React bileşeniyle aynı seçenekleri ve ayrıca `element` özelliğini kabul eder: | Seçenek | Tür | Zorunlu | Varsayılan | Açıklama | | ---------------- | -------------------------------------------------------------- | ------- | --------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `element` | `string \| HTMLElement` | Evet | -- | CSS seçicisi (ör. `'#thunderphone'`) veya DOM öğesi başvurusu. | | `publishableKey` | `string` | Evet | -- | Yayınlanabilir API anahtarı (`pk_live_...`). Yapay zeka ajanı, anahtarın bileşen yapılandırmasından otomatik olarak belirlenir. | | `theme` | `'light' \| 'dark'` | Hayır | `'light'` | Renk şeması. | | `primaryColor` | `string` | Hayır | `'#000000'` (açık) / `'#ffffff'` (koyu) | Vurgu rengi olarak kullanılan CSS renk dizesi. | | `title` | `string` | Hayır | `'Voice assistant'` | Bileşen çubuğunda görüntülenen metin. | | `position` | `'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left'` | Hayır | `'bottom-right'` | Sabit görüntü alanı konumu. | | `apiBase` | `string` | Hayır | `'https://api.thunderphone.com/v1'` | API temel URL'sini geçersiz kılar. | | `language` | `string` | Hayır | -- | Oturum başına dil geçersiz kılması -- `en`, `es` veya `fr-FR` gibi bir dil kodu ya da yerel ayar. Ayarlanmadığında, yapay zeka ajanının yapılandırılmış dili uygulanır. | | `voice` | `string` | Hayır | -- | Oturum başına ses geçersiz kılması -- `maria` gibi bir ses adı. Ayarlanmadığında, yapay zeka ajanının yapılandırılmış sesi uygulanır. | | `context` | `string` | Hayır | -- | Yapay zeka ajanına aktarılan, oturum başına olgusal sayfa veya site bağlamı. Sunucu tarafında 12.000 karaktere kesilir. | | `onConnect` | `() => void` | Hayır | -- | Sesli oturum bağlandığında çağrılır. | | `onDisconnect` | `() => void` | Hayır | -- | Oturum sona erdiğinde çağrılır. | | `onError` | `(error) => void` | Hayır | -- | Hatalarda çağrılır. Hata, `error` (kod) ve `message` alanlarına sahiptir. | | `ringtone` | `boolean \| string` | Hayır | `false` | Bağlanırken zil sesi çalın. Varsayılan zil sesi için `true`, özel ses için ise bir URL dizesi kullanın. | *** ## Temizleme `ThunderPhone.mount()` temizleme yöntemlerine sahip bir widget örneği döndürür: ```html theme={null} ``` `unmount()` ve `destroy()` aynı işlemi yapar -- etkin ses oturumlarının bağlantısını keser ve widget'ı DOM'dan kaldırır. Kodunuzda hangisi daha anlaşılırsa onu kullanın. Tek sayfalı uygulamalarda başka bir sayfaya geçerken veya kapsayan öğe kaldırıldığında widget'ı her zaman temizleyin. Bu, etkin ses oturumlarının bağlantısının düzgün şekilde kesilmesini sağlar. *** ## Örnekler ### Özel Renkli Koyu Tema ```html theme={null}

``` ### Özel Konum ```html theme={null}

``` ### Olay Geri Çağrılarıyla ```html theme={null}

``` ### Zil Sesiyle ```html theme={null}

``` ### DOM Öğesi Başvurusu Kullanarak ```html theme={null}

``` ### WordPress / CMS Entegrasyonu Bunu Özel HTML bloğuna veya temanızın alt bilgisine ekleyin: ```html theme={null} ``` `

` herhangi bir yerde olabilir -- yalnızca bağlama noktasıdır. Widget'ın kendisi görüntü alanının bir köşesinde sabit bir katman olarak oluşturulur (`position` seçeneğiyle belirlenir) ve çevresindeki içerikle birlikte akmaz. *** ## Sorun Giderme Hem CSS hem de JS dosyalarının yüklendiğinden emin olun. Ağ hataları için tarayıcı konsolunu kontrol edin. `ThunderPhone.mount()` çağrısından önce hedef öğenin DOM'da bulunduğunu doğrulayın. Komut dosyası henüz yüklenmedi. `widget.js` için `