--- title: "CDN / Script Etiketi" description: "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) ``` ```html Pinned version ``` `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
``` 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 widget 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'` | Widget çubuğunda görüntülenen metin. | | `position` | `'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left'` | Hayır | `'bottom-right'` | Sabit görünüm 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ılma -- `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 kullanılır. Anahtarın [tarayıcı geçersiz kılmaları](/tr/guides/embed-web-widget) altında `language` gerektirir. | | `voice` | `string` | Hayır | -- | Oturum başına ses geçersiz kılma -- `maria` gibi bir ses adı. Ayarlanmadığında yapay zeka ajanının yapılandırılmış sesi kullanılır. Anahtarın [tarayıcı geçersiz kılmaları](/tr/guides/embed-web-widget) altında `voice` gerektirir. | | `context` | `string` | Hayır | -- | Yapay zeka ajanına aktarılan, oturum başına olgusal sayfa veya site bağlamı. Sunucu tarafında 12.000 karakterle sınırlandırılır. Anahtarın [tarayıcı geçersiz kılmaları](/tr/guides/embed-web-widget) altında `context` gerektirir. | | `onConnect` | `() => void` | Hayır | -- | Ses oturumu bağlandığında çağrılır. | | `onDisconnect` | `() => void` | Hayır | -- | Oturum sona erdiğinde çağrılır. | | `onError` | `(error) => void` | Hayır | -- | Hata oluştuğunda çağrılır. Hata, `error` (kod) ve `message` alanlarına sahiptir. | | `ringtone` | `boolean \| string` | Hayır | `false` | Bağlanırken zil sesi çalar. Varsayılan zil sesi için `true`, özel ses için ise URL dizesi kullanın. | --- ## Temizleme `ThunderPhone.mount()` temizleme yöntemlerine sahip bir widget örneği döndürür: ```html ``` `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
``` ### Özel Konum ```html
``` ### Olay Geri Çağrılarıyla ```html
``` ### Zil Sesiyle ```html
``` ### DOM Öğesi Başvurusu Kullanarak ```html
``` ### WordPress / CMS Entegrasyonu Bunu Özel HTML bloğuna veya temanızın alt bilgisine ekleyin: ```html
``` `
` 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 `