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
<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>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.
Ö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>Sorun Giderme
Widget görünmüyor
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.
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.