CDN / Script Tag
Lisää ThunderPhone-puhewidget mihin tahansa verkkosivustoon ilman niputtajaa
CDN-versio niputtaa Reactin sisäisesti, joten voit käyttää widgetiä staattisilla sivustoilla, WordPressissä, Webflowssa tai millä tahansa sivulla, jolle voit lisätä HTML:ää. Et tarvitse npm:ää, niputtajaa etkä kehystä.
CDN-URL-osoitteet
<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>Peruskäyttö
<!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>Widget liitetään kohde-elementtiin ja näytetään kiinteästi sijoitettuna palkkina näkymän kulmassa (oletusarvo bottom-right, jota hallitaan position-asetuksella). Liitoselementti on vain React-juuri -- sen sijainti sivulla ei vaikuta siihen, missä widget näkyy.
Liitosasetukset
ThunderPhone.mount() hyväksyy samat asetukset kuin React-komponentti sekä element-ominaisuuden:
| Asetus | Tyyppi | Pakollinen | Oletusarvo | Kuvaus |
|---|---|---|---|---|
element | string | HTMLElement | Kyllä | -- | CSS-valitsin (esim. '#thunderphone') tai viittaus DOM-elementtiin. |
publishableKey | string | Kyllä | -- | Julkaistava API-avain (pk_live_...). Agentti määritetään automaattisesti avaimen widget-määrityksestä. |
theme | 'light' | 'dark' | Ei | 'light' | Värimalli. |
primaryColor | string | Ei | '#000000' (vaalea) / '#ffffff' (tumma) | Korostusvärinä käytettävä CSS-värimerkkijono. |
title | string | Ei | 'Voice assistant' | Widget-palkissa näytettävä teksti. |
position | 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left' | Ei | 'bottom-right' | Kiinteä sijainti näkymässä. |
apiBase | string | Ei | 'https://api.thunderphone.com/v1' | API:n perus-URL-osoitteen ohitus. |
language | string | Ei | -- | Istuntokohtainen kieliohitus -- kielikoodi tai kielialue, kuten en, es tai fr-FR. Jos sitä ei ole asetettu, käytetään agentin määritettyä kieltä. |
voice | string | Ei | -- | Istuntokohtainen äänen ohitus -- äänen nimi, kuten maria. Jos sitä ei ole asetettu, käytetään agentin määritettyä ääntä. |
context | string | Ei | -- | Istuntokohtainen sivua tai sivustoa koskeva faktakonteksti, joka välitetään agentille. Katkaistaan palvelinpuolella 12 000 merkkiin. |
onConnect | () => void | Ei | -- | Kutsutaan, kun puheistunto yhdistetään. |
onDisconnect | () => void | Ei | -- | Kutsutaan, kun istunto päättyy. |
onError | (error) => void | Ei | -- | Kutsutaan virheiden yhteydessä. Virheessä on error- (koodi) ja message-kentät. |
ringtone | boolean | string | Ei | false | Toista soittoääni yhdistämisen aikana. Käytä true oletussoittoäänelle tai URL-merkkijonoa mukautetulle äänelle. |
Siivous
ThunderPhone.mount() palauttaa widget-instanssin, jossa on siivousmenetelmät:
<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>Sekä unmount() että destroy() tekevät saman asian -- ne katkaisevat aktiivisen puheistunnon ja poistavat widgetin DOM:sta. Käytä koodissasi sitä, joka on luettavampi.
Esimerkit
Tumma teema mukautetulla värillä
<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>Mukautettu sijainti
<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>Tapahtumakutsuilla
<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>Soittoäänellä
<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-elementtiviittauksen käyttäminen
<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-integraatio
Lisää tämä mukautettuun HTML-lohkoon tai teemasi alatunnisteeseen:
<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>Vianmääritys
Widget ei näy
Varmista, että sekä CSS- että JS-tiedostot on ladattu. Tarkista selaimen konsolista verkkovirheet. Varmista, että kohde-elementti on DOM:ssa ennen kuin kutsut ThunderPhone.mount().
ThunderPhone ei ole määritetty
Skriptiä ei ole vielä ladattu. Varmista, että widget.js-tiedoston <script>-tagi on ennen liitoskutsuasi, tai kääri liitoskutsu DOMContentLoaded-kuuntelijaan.
Toimialue ei ole sallittu -virhe
Lisää toimialueesi sallittujen toimialueiden luetteloon app.thunderphone.com-palvelun Kehittäjät-asetuksissa. Muista, että localhost on aina sallittu.