CDN / Script Tag
Voeg de ThunderPhone-spraakwidget toe aan elke website zonder bundler
De CDN-build bundelt React intern, zodat je de widget kunt gebruiken op statische sites, WordPress, Webflow of elke pagina waarop je HTML kunt toevoegen. Geen npm, bundler of framework vereist.
CDN-URL's
<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>Basisgebruik
<!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>De widget wordt in het doelelement gemount en weergegeven als een balk met vaste positie in een hoek van de viewport (standaard bottom-right, aangestuurd door de optie position). Het mountelement is alleen de React-root -- de locatie ervan op de pagina heeft geen invloed op waar de widget verschijnt.
Mountopties
ThunderPhone.mount() accepteert dezelfde opties als de React-component, plus de eigenschap element:
| Optie | Type | Vereist | Standaard | Beschrijving |
|---|---|---|---|---|
element | string | HTMLElement | Ja | -- | CSS-selector (bijv. '#thunderphone') of een DOM-elementverwijzing. |
publishableKey | string | Ja | -- | Publiceerbare API-sleutel (pk_live_...). De agent wordt automatisch bepaald op basis van de widgetconfiguratie van de sleutel. |
theme | 'light' | 'dark' | Nee | 'light' | Kleurenschema. |
primaryColor | string | Nee | '#000000' (light) / '#ffffff' (dark) | CSS-kleurreeks die als accentkleur wordt gebruikt. |
title | string | Nee | 'Voice assistant' | Tekst die in de widgetbalk wordt weergegeven. |
position | 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left' | Nee | 'bottom-right' | Vaste positie in de viewport. |
apiBase | string | Nee | 'https://api.thunderphone.com/v1' | Overschrijving van de API-basis-URL. |
language | string | Nee | -- | Taaloverschrijving per sessie -- een taalcode of landinstelling zoals en, es of fr-FR. Indien niet ingesteld, wordt de geconfigureerde taal van de agent gebruikt. |
voice | string | Nee | -- | Stemoverschrijving per sessie -- een stemnaam zoals maria. Indien niet ingesteld, wordt de geconfigureerde stem van de agent gebruikt. |
context | string | Nee | -- | Feitelijke pagina- of sitecontext per sessie die aan de agent wordt doorgegeven. Aan serverzijde afgekapt tot 12.000 tekens. |
onConnect | () => void | Nee | -- | Wordt aangeroepen wanneer de spraaksessie verbinding maakt. |
onDisconnect | () => void | Nee | -- | Wordt aangeroepen wanneer de sessie eindigt. |
onError | (error) => void | Nee | -- | Wordt aangeroepen bij fouten. Error bevat de velden error (code) en message. |
ringtone | boolean | string | Nee | false | Speel een beltoon af tijdens het verbinden. true voor de standaardbeltoon, of een URL-reeks voor aangepaste audio. |
Opschonen
ThunderPhone.mount() retourneert een widgetinstantie met opschoonmethoden:
<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>Zowel unmount() als destroy() doen hetzelfde -- ze verbreken actieve spraaksessies en verwijderen de widget uit de DOM. Gebruik wat het best leesbaar is in je code.
Voorbeelden
Donker thema met aangepaste kleur
<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>Aangepaste positie
<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>Met eventcallbacks
<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>Met beltoon
<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>Een DOM-elementverwijzing gebruiken
<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-integratie
Voeg dit toe aan een blok met aangepaste HTML of aan de footer van je thema:
<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>Problemen oplossen
Widget wordt niet weergegeven
Zorg dat zowel de CSS- als de JS-bestanden zijn geladen. Controleer de browserconsole op netwerkfouten. Verifieer dat het doelelement in de DOM bestaat voordat je ThunderPhone.mount() aanroept.
ThunderPhone is niet gedefinieerd
Het script is nog niet geladen. Zorg dat de <script>-tag voor widget.js vóór je mount-aanroep staat, of plaats de mount-aanroep in een DOMContentLoaded-listener.
Fout: domein niet toegestaan
Voeg je domein toe aan de lijst met toegestane domeinen in de instellingen onder Developers op app.thunderphone.com. Houd er rekening mee dat localhost altijd is toegestaan.