CDN / Script Etiketi

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

<link rel="stylesheet" href="https://cdn.thunderphone.com/widget/latest/style.css" />
<script src="https://cdn.thunderphone.com/widget/latest/widget.js"></script>

<!-- Each stable release also publishes an immutable /widget/vX.Y.Z/ path
     matching the @thunderphone/widget npm version (v1.1.2 at the time of
     writing). If you pin, you own updating the URL for new releases. -->
<link rel="stylesheet" href="https://cdn.thunderphone.com/widget/v1.1.2/style.css" />
<script src="https://cdn.thunderphone.com/widget/v1.1.2/widget.js"></script>

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

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.thunderphone.com/widget/latest/style.css" />
</head>
<body>

  <div id="thunderphone"></div>

  <script src="https://cdn.thunderphone.com/widget/latest/widget.js"></script>
  <script>
    ThunderPhone.mount({
      element: '#thunderphone',
      publishableKey: 'pk_live_your_publishable_key',
    })
  </script>

</body>
</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 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:

<script>
  var widget = ThunderPhone.mount({
    element: '#thunderphone',
    publishableKey: 'pk_live_your_publishable_key',
  })

  // Later, when you want to remove the widget:
  widget.unmount()

  // Or equivalently:
  widget.destroy()
</script>

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

<div id="thunderphone"></div>

<link rel="stylesheet" href="https://cdn.thunderphone.com/widget/latest/style.css" />
<script src="https://cdn.thunderphone.com/widget/latest/widget.js"></script>
<script>
  ThunderPhone.mount({
    element: '#thunderphone',
    publishableKey: 'pk_live_your_publishable_key',
    theme: 'dark',
    primaryColor: '#8b5cf6',
    title: 'Talk to our AI',
  })
</script>

Özel Konum

<div id="thunderphone"></div>

<script src="https://cdn.thunderphone.com/widget/latest/widget.js"></script>
<script>
  ThunderPhone.mount({
    element: '#thunderphone',
    publishableKey: 'pk_live_your_publishable_key',
    position: 'bottom-left',
  })
</script>

Olay Geri Çağrılarıyla

<div id="thunderphone"></div>

<link rel="stylesheet" href="https://cdn.thunderphone.com/widget/latest/style.css" />
<script src="https://cdn.thunderphone.com/widget/latest/widget.js"></script>
<script>
  ThunderPhone.mount({
    element: '#thunderphone',
    publishableKey: 'pk_live_your_publishable_key',
    onConnect: function () {
      console.log('Call started')
    },
    onDisconnect: function () {
      console.log('Call ended')
    },
    onError: function (error) {
      console.error('Widget error:', error.error, error.message)
    },
  })
</script>

Zil Sesiyle

<div id="thunderphone"></div>

<link rel="stylesheet" href="https://cdn.thunderphone.com/widget/latest/style.css" />
<script src="https://cdn.thunderphone.com/widget/latest/widget.js"></script>
<script>
  ThunderPhone.mount({
    element: '#thunderphone',
    publishableKey: 'pk_live_your_publishable_key',
    ringtone: true, // or a custom URL: 'https://example.com/ringtone.mp3'
  })
</script>

DOM Öğesi Başvurusu Kullanarak

<div id="thunderphone"></div>

<script src="https://cdn.thunderphone.com/widget/latest/widget.js"></script>
<script>
  var container = document.getElementById('thunderphone')

  ThunderPhone.mount({
    element: container,
    publishableKey: 'pk_live_your_publishable_key',
  })
</script>

WordPress / CMS Entegrasyonu

Bunu Özel HTML bloğuna veya temanızın alt bilgisine ekleyin:

<link rel="stylesheet" href="https://cdn.thunderphone.com/widget/latest/style.css" />
<script src="https://cdn.thunderphone.com/widget/latest/widget.js"></script>

<div id="thunderphone-widget"></div>
<script>
  ThunderPhone.mount({
    element: '#thunderphone-widget',
    publishableKey: 'pk_live_your_publishable_key',
  })
</script>

<div> 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

Widget görünmüyor

ThunderPhone tanımlı değil

Komut dosyası henüz yüklenmedi. widget.js için <script> etiketinin mount çağrınızdan önce göründüğünden emin olun veya mount çağrısını bir DOMContentLoaded dinleyicisi içinde sarmalayın.

Etki alanına izin verilmiyor hatası

Etki alanınızı app.thunderphone.com üzerindeki Geliştiriciler ayarlarında izin verilen etki alanları listesine ekleyin. localhost adresine her zaman izin verildiğini unutmayın.

Widget

CDN URL’leri

Temel Kullanım

Bağlama Seçenekleri

Temizleme

Örnekler

Özel Renkli Koyu Tema

Özel Konum

Olay Geri Çağrılarıyla

Zil Sesiyle

DOM Öğesi Başvurusu Kullanarak

WordPress / CMS Entegrasyonu

Sorun Giderme

Sonraki Adımlar

Stil Özelleştirme

React Bileşeni

​CDN URL’leri

​Temel Kullanım

​Bağlama Seçenekleri

​Temizleme

​Örnekler

​Özel Renkli Koyu Tema

​Özel Konum

​Olay Geri Çağrılarıyla

​Zil Sesiyle

​DOM Öğesi Başvurusu Kullanarak

​WordPress / CMS Entegrasyonu

​Sorun Giderme

​Sonraki Adımlar

Stil Özelleştirme

React Bileşeni

CDN URL’leri

Temel Kullanım

Bağlama Seçenekleri

Temizleme

Örnekler

Özel Renkli Koyu Tema

Özel Konum

Olay Geri Çağrılarıyla

Zil Sesiyle

DOM Öğesi Başvurusu Kullanarak

WordPress / CMS Entegrasyonu

Sorun Giderme

Sonraki Adımlar