Open in
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 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ı 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ı 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ı 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:
<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 adresindeki Web Bileşenleri sayfasında widget'ın izin verilen etki alanlarına ekleyin. localhost üretim ortamında otomatik olarak izinli değildir; yerel olarak test etmek için listeye ekleyin.