CDN / Script-tag

Legg til ThunderPhone-stemmewidgeten på ethvert nettsted uten en bundler

CDN-byggversjonen pakker React internt, slik at du kan bruke widgeten på statiske nettsteder, WordPress, Webflow eller enhver side der du kan legge til HTML. Ingen npm, ingen bundler og ingen rammeverk kreves.

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>

Grunnleggende bruk

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

Widgeten monteres i målelementet og vises som en linje med fast plassering i et hjørne av visningsområdet (som standard bottom-right, styrt av alternativet position). Monteringselementet er bare React-roten -- plasseringen på siden påvirker ikke hvor widgeten vises.

Monteringsalternativer

ThunderPhone.mount() godtar de samme alternativene som React-komponenten, i tillegg til egenskapen element:

Alternativ	Type	Påkrevd	Standard	Beskrivelse
`element`	`string \| HTMLElement`	Ja	--	CSS-velger (f.eks. `'#thunderphone'`) eller en referanse til et DOM-element.
`publishableKey`	`string`	Ja	--	Publiserbar API-nøkkel (`pk_live_...`). Stemmeagenten bestemmes automatisk fra nøkkelens widgetkonfigurasjon.
`theme`	`'light' \| 'dark'`	Nei	`'light'`	Fargevalg.
`primaryColor`	`string`	Nei	`'#000000'` (lys) / `'#ffffff'` (mørk)	CSS-fargestreng som brukes som aksentfarge.
`title`	`string`	Nei	`'Voice assistant'`	Tekst som vises i widgetlinjen.
`position`	`'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left'`	Nei	`'bottom-right'`	Fast plassering i visningsområdet.
`apiBase`	`string`	Nei	`'https://api.thunderphone.com/v1'`	Overstyring av API-basens URL.
`language`	`string`	Nei	--	Språkoverstyring per økt -- en språkkode eller lokalisering, for eksempel `en`, `es` eller `fr-FR`. Når den ikke er angitt, brukes stemmeagentens konfigurerte språk.
`voice`	`string`	Nei	--	Stemmeoverstyring per økt -- et stemmenavn som `maria`. Når den ikke er angitt, brukes stemmeagentens konfigurerte stemme.
`context`	`string`	Nei	--	Faktisk side- eller nettstedskontekst per økt som sendes til stemmeagenten. Avkortes på serversiden til 12 000 tegn.
`onConnect`	`() => void`	Nei	--	Kalles når stemmeøkten kobles til.
`onDisconnect`	`() => void`	Nei	--	Kalles når økten avsluttes.
`onError`	`(error) => void`	Nei	--	Kalles ved feil. Feilen har feltene `error` (kode) og `message`.
`ringtone`	`boolean \| string`	Nei	`false`	Spill av en ringetone mens tilkoblingen opprettes. `true` for standardringetonen, eller en URL-streng for tilpasset lyd.

Opprydding

ThunderPhone.mount() returnerer en widgetinstans med oppryddingsmetoder:

<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() gjør det samme – de kobler fra alle aktive stemmeøkter og fjerner widgeten fra DOM-en. Bruk den som passer best i koden din.

Eksempler

Mørkt tema med egendefinert farge

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

Egendefinert plassering

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

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

Bruke en DOM-elementreferanse

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

Legg dette til i en Egendefinert HTML-blokk eller i bunnteksten til temaet ditt:

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

Feilsøking

Widgeten vises ikke

Sørg for at både CSS- og JS-filene er lastet inn. Sjekk nettleserkonsollen for nettverksfeil. Bekreft at målelementet finnes i DOM-en før du kaller ThunderPhone.mount().

ThunderPhone er ikke definert

Skriptet er ikke lastet inn ennå. Sørg for at <script>-taggen for widget.js vises før mount-kallet ditt, eller pakk mount-kallet inn i en DOMContentLoaded-lytter.

Feil: Domene er ikke tillatt

Legg til domenet ditt i listen over tillatte domener under innstillingene for Utviklere på app.thunderphone.com. Husk at localhost alltid er tillatt.

Neste steg

Stilsetting

Tilpass widgetens utseende med egendefinerte CSS-egenskaper.

React-komponent

Bruker du React? Komponentintegrasjonen er enklere.