CDN / Script-tag

CDN-buildet inkluderer React internt, så du kan bruge widgetten på statiske websites, WordPress, Webflow eller enhver side, hvor du kan tilføje HTML. Ingen npm, bundler eller framework kræves.

CDN-URL’er

<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>

latest-URL’erne er dem, dashboardets generator til indlejringskodestumper opretter. De caches i 5 minutter og henter automatisk nye stabile udgivelser. Fastlåste /widget/vX.Y.Z/-stier er uforanderlige og caches på lang sigt — hvis du fastlåser, skal versionen matche den @thunderphone/widget npm-udgivelse, du udvikler imod.

Grundlæggende brug

<!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>

Widgetten monteres i målelementet og vises som en bjælke med fast position i et hjørne af viewporten (som standard bottom-right, styret af indstillingen position). Monteringselementet er kun React-roden — dets placering på siden påvirker ikke, hvor widgetten vises.

Monteringsindstillinger

ThunderPhone.mount() accepterer de samme indstillinger som React-komponenten samt egenskaben element:

Indstilling	Type	Påkrævet	Standard	Beskrivelse
`element`	`string \| HTMLElement`	Ja	—	CSS-selector (f.eks. `'#thunderphone'`) eller en reference til et DOM-element.
`publishableKey`	`string`	Ja	—	Publicerbar API-nøgle (`pk_live_...`). Agenten bestemmes automatisk ud fra nøglens widgetkonfiguration.
`theme`	`'light' \| 'dark'`	Nej	`'light'`	Farveskema.
`primaryColor`	`string`	Nej	`'#000000'` (lys) / `'#ffffff'` (mørk)	CSS-farvestreng, der bruges som accentfarve.
`title`	`string`	Nej	`'Voice assistant'`	Tekst, der vises i widgetbjælken.
`position`	`'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left'`	Nej	`'bottom-right'`	Fast position i viewporten.
`apiBase`	`string`	Nej	`'https://api.thunderphone.com/v1'`	Tilsidesættelse af API-basens URL.
`language`	`string`	Nej	—	Tilsidesættelse af sprog pr. session — en sprogkode eller landestandard som `en`, `es` eller `fr-FR`. Hvis den ikke er angivet, bruges agentens konfigurerede sprog.
`voice`	`string`	Nej	—	Tilsidesættelse af stemme pr. session — et stemmenavn som `maria`. Hvis den ikke er angivet, bruges agentens konfigurerede stemme.
`context`	`string`	Nej	—	Faktuel side- eller website-kontekst pr. session, der sendes til agenten. Afkortes på serveren til 12.000 tegn.
`onConnect`	`() => void`	Nej	—	Kaldes, når stemmesessionen opretter forbindelse.
`onDisconnect`	`() => void`	Nej	—	Kaldes, når sessionen afsluttes.
`onError`	`(error) => void`	Nej	—	Kaldes ved fejl. Fejlen har felterne `error` (kode) og `message`.
`ringtone`	`boolean \| string`	Nej	`false`	Afspil en ringetone under forbindelsen. `true` bruger standardringetonen, eller angiv en URL-streng for brugerdefineret lyd.

Oprydning

ThunderPhone.mount() returnerer en widgetinstans med oprydningsmetoder:

<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>

Både unmount() og destroy() gør det samme — de afbryder alle aktive stemmesessioner og fjerner widgetten fra DOM’en. Brug den, der passer bedst i din kode.

Ryd altid op i widgetten, når du navigerer væk i single-page-applikationer, eller når det indeholdende element fjernes. Det sikrer, at aktive stemmesessioner afbrydes korrekt.

Eksempler

Mørkt tema med brugerdefineret farve

<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>

Brugerdefineret placering

<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>

Med hændelses-callbacks

<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>

Med ringetone

<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>

Brug af en DOM-elementreference

<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-integration

Tilføj dette i en Brugerdefineret HTML-blok eller i dit temas sidefod:

<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>

<div> kan placeres hvor som helst — det er kun monteringspunktet. Selve widgetten gengives som en fast overlejring i et hjørne af visningsområdet (angivet med indstillingen position) og indgår ikke i layoutflowet med det omgivende indhold.

Fejlfinding

Widgetten vises ikke

Sørg for, at både CSS- og JS-filerne er indlæst. Kontrollér browserkonsollen for netværksfejl. Bekræft, at målelementet findes i DOM’en, før du kalder ThunderPhone.mount().

ThunderPhone er ikke defineret

Scriptet er endnu ikke indlæst. Sørg for, at <script>-tagget for widget.js vises før dit mount-kald, eller pak mount-kaldet ind i en DOMContentLoaded-lytter.

Fejl: Domæne ikke tilladt

Føj dit domæne til listen over tilladte domæner i indstillingerne under Udviklere på app.thunderphone.com. Husk, at localhost altid er tilladt.

Widget

CDN-URL’er

Grundlæggende brug

Monteringsindstillinger

Oprydning

Eksempler

Mørkt tema med brugerdefineret farve

Brugerdefineret placering

Med hændelses-callbacks

Med ringetone

Brug af en DOM-elementreference

WordPress / CMS-integration

Fejlfinding

Næste trin

Styling

React-komponent

​CDN-URL’er

​Grundlæggende brug

​Monteringsindstillinger

​Oprydning

​Eksempler

​Mørkt tema med brugerdefineret farve

​Brugerdefineret placering

​Med hændelses-callbacks

​Med ringetone

​Brug af en DOM-elementreference

​WordPress / CMS-integration

​Fejlfinding

​Næste trin

Styling

React-komponent

CDN-URL’er

Grundlæggende brug

Monteringsindstillinger

Oprydning

Eksempler

Mørkt tema med brugerdefineret farve

Brugerdefineret placering

Med hændelses-callbacks

Med ringetone

Brug af en DOM-elementreference

WordPress / CMS-integration

Fejlfinding

Næste trin