CDN / Script-tag

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

<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-ene er det kontrollpanelets generator for innebyggingskode produserer. De mellomlagres i 5 minutter og tar automatisk i bruk nye stabile utgivelser. Fastlåste /widget/vX.Y.Z/-stier er uforanderlige og mellomlagres langsiktig — hvis du låser versjonen, må den samsvare med npm-utgivelsen av @thunderphone/widget du utvikler mot.

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.

Rydd alltid opp widgeten når du navigerer bort i enkeltsideapplikasjoner, eller når elementet den ligger i, fjernes. Dette sikrer at aktive stemmeøkter kobles fra på riktig måte.

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>

<div>-en kan plasseres hvor som helst – den er bare monteringspunktet. Selve widgeten gjengis som et fast overlegg i et hjørne av visningsområdet (angitt med alternativet position) og flyter ikke sammen med innholdet rundt.

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.

Widget

CDN-URL-er

Grunnleggende bruk

Monteringsalternativer

Opprydding

Eksempler

Mørkt tema med egendefinert farge

Egendefinert plassering

Med hendelsestilbakekall

Med ringetone

Bruke en DOM-elementreferanse

WordPress- / CMS-integrasjon

Feilsøking

Neste steg

Stilsetting

React-komponent

​CDN-URL-er

​Grunnleggende bruk

​Monteringsalternativer

​Opprydding

​Eksempler

​Mørkt tema med egendefinert farge

​Egendefinert plassering

​Med hendelsestilbakekall

​Med ringetone

​Bruke en DOM-elementreferanse

​WordPress- / CMS-integrasjon

​Feilsøking

​Neste steg

Stilsetting

React-komponent

CDN-URL-er

Grunnleggende bruk

Monteringsalternativer

Opprydding

Eksempler

Mørkt tema med egendefinert farge

Egendefinert plassering

Med hendelsestilbakekall

Med ringetone

Bruke en DOM-elementreferanse

WordPress- / CMS-integrasjon

Feilsøking

Neste steg