CDN / Script-tag

Tilføj ThunderPhone-stemmewidgetten på ethvert website uden en bundler

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

Latest (recommended)

<link rel="stylesheet" href="https://cdn.thunderphone.com/widget/latest/style.css" />
<script src="https://cdn.thunderphone.com/widget/latest/widget.js"></script>

Pinned version

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

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.

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>

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.

Næste trin

Styling

Tilpas widgettens udseende med brugerdefinerede CSS-egenskaber.

React-komponent

Bruger du React? Komponentintegrationen er enklere.