CDN / Szkriptcímke
Adja hozzá a ThunderPhone hangalapú widgetjét bármely webhelyhez bundler nélkül
A CDN-verzió belsőleg tartalmazza a Reactet, ezért a widgetet statikus webhelyeken, WordPressen, Webflow-ban vagy bármely olyan oldalon használhatja, ahol HTML-t adhat hozzá. Nincs szükség npm-re, csomagolóeszközre vagy keretrendszerre.
CDN URL-ek
<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>Alapvető használat
<!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>A widget a célelemen belül csatlakozik, és a nézetablak egyik sarkában rögzített pozíciójú sávként jelenik meg (alapértelmezés szerint bottom-right, a position beállítás vezérli). A csatlakoztatási elem csak a React gyökéreleme -- az oldalon elfoglalt helye nem befolyásolja, hol jelenik meg a widget.
Csatlakoztatási beállítások
A ThunderPhone.mount() a React-komponensével azonos beállításokat fogad el, kiegészítve az element tulajdonsággal:
| Beállítás | Típus | Kötelező | Alapértelmezett | Leírás |
|---|---|---|---|---|
element | string | HTMLElement | Igen | -- | CSS-szelektor (például '#thunderphone') vagy DOM-elemre mutató hivatkozás. |
publishableKey | string | Igen | -- | Publikálható API-kulcs (pk_live_...). Az ügynök automatikusan feloldódik a kulcs widgetkonfigurációjából. |
theme | 'light' | 'dark' | Nem | 'light' | Színséma. |
primaryColor | string | Nem | '#000000' (világos) / '#ffffff' (sötét) | Kiemelőszínként használt CSS-színkarakterlánc. |
title | string | Nem | 'Voice assistant' | A widgetsávban megjelenő szöveg. |
position | 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left' | Nem | 'bottom-right' | Rögzített pozíció a nézetablakban. |
apiBase | string | Nem | 'https://api.thunderphone.com/v1' | API-alap URL-jének felülbírálása. |
language | string | Nem | -- | Munkamenetenkénti nyelvi felülbírálás -- nyelvkód vagy területi beállítás, például en, es vagy fr-FR. Ha nincs beállítva, az ügynök konfigurált nyelve érvényes. |
voice | string | Nem | -- | Munkamenetenkénti hangfelülbírálás -- hangnév, például maria. Ha nincs beállítva, az ügynök konfigurált hangja érvényes. |
context | string | Nem | -- | Az ügynöknek átadott, munkamenetenkénti tényszerű oldal- vagy webhelykontextus. A szerveroldalon 12 000 karakterre csonkolódik. |
onConnect | () => void | Nem | -- | A hangmunkamenet kapcsolódásakor hívódik meg. |
onDisconnect | () => void | Nem | -- | A munkamenet végén hívódik meg. |
onError | (error) => void | Nem | -- | Hiba esetén hívódik meg. A hiba error (kód) és message mezőkkel rendelkezik. |
ringtone | boolean | string | Nem | false | Kapcsolódás közben csengőhang lejátszása. true az alapértelmezett csengőhanghoz, vagy URL-karakterlánc egyéni hanghoz. |
Tisztítás
A ThunderPhone.mount() egy widgetpéldányt ad vissza tisztítási metódusokkal:
<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>Az unmount() és a destroy() ugyanazt végzi -- bontják az aktív hangmunkamenetek kapcsolatait, és eltávolítják a widgetet a DOM-ból. Használja azt, amelyik jobban illeszkedik a kódjához.
Példák
Sötét téma egyéni színnel
<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>Egyéni pozíció
<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>Esemény-visszahívásokkal
<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>Csengőhanggal
<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-elemhivatkozás használata
<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-integráció
Adja hozzá ezt egy Egyéni HTML-blokkhoz vagy a témája láblécéhez:
<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>Hibaelhárítás
A widget nem jelenik meg
Győződjön meg arról, hogy a CSS- és JS-fájlok is betöltődtek. Ellenőrizze a böngészőkonzolt hálózati hibákért. Ellenőrizze, hogy a célelem létezik a DOM-ban a ThunderPhone.mount() meghívása előtt.
A ThunderPhone nincs definiálva
A szkript még nem töltődött be. Győződjön meg arról, hogy a widget.js-hez tartozó <script> címke a mount hívás előtt szerepel, vagy foglalja a mount hívást egy DOMContentLoaded figyelőbe.
A domain nem engedélyezett hiba
Adja hozzá domainjét az engedélyezett domainek listájához az app.thunderphone.com Fejlesztők beállításaiban. Ne feledje, hogy a localhost mindig engedélyezett.