CDN / Etichetă de script
Adăugați widgetul vocal ThunderPhone pe orice site web fără un bundler
Versiunea CDN include React intern, astfel încât puteți utiliza widgetul pe site-uri statice, WordPress, Webflow sau pe orice pagină în care puteți adăuga HTML. Nu sunt necesare npm, un bundler sau un framework.
URL-uri CDN
<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>Utilizare de bază
<!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>Widgetul se montează în elementul-țintă și se afișează ca o bară cu poziție fixă într-un colț al ferestrei de vizualizare (implicit bottom-right, controlat prin opțiunea position). Elementul de montare este doar rădăcina React -- poziția sa în pagină nu afectează locul în care apare widgetul.
Opțiuni de montare
ThunderPhone.mount() acceptă aceleași opțiuni ca componenta React, plus proprietatea element:
| Opțiune | Tip | Obligatoriu | Implicit | Descriere |
|---|---|---|---|---|
element | string | HTMLElement | Da | -- | Selector CSS (de exemplu, '#thunderphone') sau referință la un element DOM. |
publishableKey | string | Da | -- | Cheie API publicabilă (pk_live_...). Agentul vocal este determinat automat din configurația widgetului cheii. |
theme | 'light' | 'dark' | Nu | 'light' | Schemă de culori. |
primaryColor | string | Nu | '#000000' (deschis) / '#ffffff' (închis) | Șir de culoare CSS utilizat ca culoare de accent. |
title | string | Nu | 'Voice assistant' | Text afișat în bara widgetului. |
position | 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left' | Nu | 'bottom-right' | Poziție fixă în fereastra de vizualizare. |
apiBase | string | Nu | 'https://api.thunderphone.com/v1' | Suprascrierea URL-ului de bază al API-ului. |
language | string | Nu | -- | Suprascriere a limbii pentru fiecare sesiune -- un cod de limbă sau o setare regională, precum en, es sau fr-FR. Când nu este setată, se aplică limba configurată a agentului vocal. |
voice | string | Nu | -- | Suprascriere a vocii pentru fiecare sesiune -- un nume de voce, precum maria. Când nu este setată, se aplică vocea configurată a agentului vocal. |
context | string | Nu | -- | Context factual al paginii sau site-ului pentru fiecare sesiune, transmis agentului vocal. Este trunchiat pe server la 12.000 de caractere. |
onConnect | () => void | Nu | -- | Apelată când sesiunea vocală se conectează. |
onDisconnect | () => void | Nu | -- | Apelată când sesiunea se încheie. |
onError | (error) => void | Nu | -- | Apelată la erori. Eroarea are câmpurile error (cod) și message. |
ringtone | boolean | string | Nu | false | Redă un ton de apel în timpul conectării. true pentru tonul de apel implicit sau un șir URL pentru audio personalizat. |
Curățare
ThunderPhone.mount() returnează o instanță de widget cu metode de curățare:
<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>Atât unmount(), cât și destroy() au același efect -- deconectează orice sesiune vocală activă și elimină widgetul din DOM. Folosiți varianta care se potrivește mai bine în codul dumneavoastră.
Exemple
Temă întunecată cu culoare personalizată
<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>Poziție personalizată
<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>Cu callbackuri de evenimente
<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>Cu ton de apel
<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>Utilizarea unei referințe la un element DOM
<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>Integrare WordPress / CMS
Adăugați acest cod într-un bloc HTML personalizat sau în subsolul temei dumneavoastră:
<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>Depanare
Widgetul nu apare
Asigurați-vă că sunt încărcate atât fișierele CSS, cât și cele JS. Verificați consola browserului pentru erori de rețea. Verificați că elementul țintă există în DOM înainte de a apela ThunderPhone.mount().
ThunderPhone nu este definit
Scriptul nu s-a încărcat încă. Asigurați-vă că eticheta <script> pentru widget.js apare înainte de apelul de montare sau includeți apelul de montare într-un listener DOMContentLoaded.
Eroare: domeniu nepermis
Adăugați domeniul dumneavoastră în lista de domenii permise din setările Dezvoltatori la app.thunderphone.com. Rețineți că localhost este întotdeauna permis.