CDN / Szkriptcímke

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>

A latest URL-eket a vezérlőpult beágyazási kódrészlet-generátora hozza létre. Ezek 5 percig gyorsítótárazódnak, és automatikusan felveszik az új stabil kiadásokat. A rögzített /widget/vX.Y.Z/ útvonalak megváltoztathatatlanok és hosszú távon gyorsítótárazódnak — ha rögzíti a verziót, igazítsa azt ahhoz az @thunderphone/widget npm-kiadáshoz, amelyhez fejleszt.

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.

Egyoldalas alkalmazásokban navigáláskor, illetve a widgetet tartalmazó elem eltávolításakor mindig tisztítsa fel a widgetet. Ez biztosítja, hogy az aktív hangmunkamenetek kapcsolata megfelelően bontásra kerüljön.

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>

A <div> bárhová kerülhet — ez csak a csatlakoztatási pont. Maga a widget rögzített átfedésként jelenik meg a nézetablak egyik sarkában (a position beállítás szerint), és nem igazodik a környező tartalom elrendezéséhez.

Hibaelhárítás

A widget nem jelenik meg

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.

Widget

CDN URL-ek

Alapvető használat

Csatlakoztatási beállítások

Tisztítás

Példák

Sötét téma egyéni színnel

Egyéni pozíció

Esemény-visszahívásokkal

Csengőhanggal

DOM-elemhivatkozás használata

WordPress / CMS-integráció

Hibaelhárítás

Következő lépések

Stílusozás

React-komponens

​CDN URL-ek

​Alapvető használat

​Csatlakoztatási beállítások

​Tisztítás

​Példák

​Sötét téma egyéni színnel

​Egyéni pozíció

​Esemény-visszahívásokkal

​Csengőhanggal

​DOM-elemhivatkozás használata

​WordPress / CMS-integráció

​Hibaelhárítás

​Következő lépések

Stílusozás

React-komponens

CDN URL-ek

Alapvető használat

Csatlakoztatási beállítások

Tisztítás

Példák

Sötét téma egyéni színnel

Egyéni pozíció

Esemény-visszahívásokkal

Csengőhanggal

DOM-elemhivatkozás használata

WordPress / CMS-integráció

Hibaelhárítás

Következő lépések