---
title: "React-komponent"
description: "Bygg inn ThunderPhone-stemmewidgeten i en React-applikasjon"
---

`ThunderPhoneWidget`-komponenten gjengir en glassmorfisk anropslinje med innebygde kontroller for å dempe lyd, avslutte samtalen og vise tilkoblingsstatus. Det er den raskeste måten å legge til stemme-AI i en React-app.

## Installasjon

```bash
npm install @thunderphone/widget
```

## Grunnleggende bruk

```tsx
import { ThunderPhoneWidget } from '@thunderphone/widget'
import '@thunderphone/widget/style.css'

function App() {
  return (
    <ThunderPhoneWidget
      publishableKey="pk_live_your_publishable_key"
    />
  )
}
```

<Warning>
  Du **må** importere CSS-filen for at widgeten skal gjengis riktig. Uten den vil widgeten være uten stilsetting.
</Warning>

---

## Rekvisitter

Komponenten godtar følgende rekvisitter via `ThunderPhoneWidgetProps`:

| Egenskap | Type | Påkrevd | Standard | Beskrivelse |
|------|------|----------|---------|-------------|
| `publishableKey` | `string` | Ja | -- | Publiserbar API-nøkkel (`pk_live_...`) fra **Web Widgets** i dashbordet. Agenten fastsettes automatisk fra nøkkelens widgetkonfigurasjon. |
| `theme` | `'light' \| 'dark'` | Nei | `'light'` | Fargeskjema. Bruker klassen `tp--light` eller `tp--dark` på widgetens rotelement. |
| `primaryColor` | `string` | Nei | `'#000000'` (lys) / `'#ffffff'` (mørk) | CSS-fargestreng som brukes som aksentfarge (anropsknapp, bølgeform, aktive indikatorer). |
| `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 visningsvinduet for widgeten. |
| `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 agentens konfigurerte språk. Krever `language` under nøkkelens [nettleseroverstyringer](/nb/guides/embed-web-widget). |
| `voice` | `string` | Nei | -- | Stemmeoverstyring per økt -- et stemmenavn som `maria`. Når den ikke er angitt, brukes agentens konfigurerte stemme. Krever `voice` under nøkkelens [nettleseroverstyringer](/nb/guides/embed-web-widget). |
| `context` | `string` | Nei | -- | Faktabasert side- eller nettstedsinformasjon per økt som sendes til agenten (for eksempel detaljer om siden den besøkende ser på). Avkortes på serversiden til 12 000 tegn. Krever `context` under nøkkelens [nettleseroverstyringer](/nb/guides/embed-web-widget). |
| `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. Objektet `error` har feltene `error` (kode) og `message`. |
| `className` | `string` | Nei | -- | Ekstra CSS-klassenavn som brukes på widgetbeholderen. |
| `ringtone` | `boolean \| string` | Nei | `false` | Spill av ringetone under tilkobling. `true` for standard ringetone, eller en URL-streng for egendefinert lyd. |

---

## Eksempler

### Mørkt tema med egendefinert farge

```tsx
import { ThunderPhoneWidget } from '@thunderphone/widget'
import '@thunderphone/widget/style.css'

function App() {
  return (
    <ThunderPhoneWidget
      publishableKey="pk_live_your_publishable_key"
      theme="dark"
      primaryColor="#8b5cf6"
      title="Talk to our AI"
    />
  )
}
```

### Egendefinert plassering

```tsx
import { ThunderPhoneWidget } from '@thunderphone/widget'
import '@thunderphone/widget/style.css'

function App() {
  return (
    <ThunderPhoneWidget
      publishableKey="pk_live_your_publishable_key"
      position="bottom-left"
    />
  )
}
```

### Språk, stemme og kontekst per økt

`language`-, `voice`- og `context`-propsene videresendes til øktforespørselen (`POST /widget/session`) når et anrop starter, og overstyrer stemmeagentens konfigurerte standardinnstillinger for den økten. Aktiver hver prop du bruker under **Nettleseroverstyringer** for widgeten i dashbordet (eller i nøkkelens `allowed_overrides`). Nye widgeter tillater ingen, og en øktforespørsel som inneholder en deaktivert overstyring, mislykkes med `400 override_not_allowed`; se [Nettleseroverstyringer](/nb/guides/embed-web-widget).

```tsx
import { ThunderPhoneWidget } from '@thunderphone/widget'
import '@thunderphone/widget/style.css'

function PricingPageWidget() {
  return (
    <ThunderPhoneWidget
      publishableKey="pk_live_your_publishable_key"
      language="es"
      voice="maria"
      context="Page: Pricing. Plans: Starter $29/mo, Pro $99/mo. Annual billing saves 20%."
    />
  )
}
```

Bruk `context` til å gi stemmeagenten faktakunnskap om siden den besøkende er på -- produktdetaljer, priser eller side-spesifikke vanlige spørsmål. Stemmeagenten behandler det som sideinnhold, ikke som instruksjoner. Det avkortes på serversiden til 12 000 tegn.

### Med hendelsestilbakekall

```tsx
import { ThunderPhoneWidget } from '@thunderphone/widget'
import '@thunderphone/widget/style.css'

function SupportWidget() {
  return (
    <ThunderPhoneWidget
      publishableKey="pk_live_your_publishable_key"
      onConnect={() => {
        console.log('Voice session connected')
        analytics.track('widget_call_started')
      }}
      onDisconnect={() => {
        console.log('Voice session ended')
        analytics.track('widget_call_ended')
      }}
      onError={(error) => {
        console.error(`Widget error: ${error.error} - ${error.message}`)
      }}
    />
  )
}
```

### Med egendefinert styling

```tsx
import { ThunderPhoneWidget } from '@thunderphone/widget'
import '@thunderphone/widget/style.css'

function BrandedWidget() {
  return (
    <ThunderPhoneWidget
      publishableKey="pk_live_your_publishable_key"
      primaryColor="#4a90d9"
      className="my-custom-widget"
    />
  )
}
```

```css
.my-custom-widget .tp-button--end {
  background-color: #e74c3c;
}
```

Se [stilguiden](/nb/widget/styling) for alle tilgjengelige CSS-klasser og egendefinerte egenskaper.

### Med ringetone

Spill av en telefonringelyd mens tilkoblingen opprettes:

```tsx
import { ThunderPhoneWidget } from '@thunderphone/widget'
import '@thunderphone/widget/style.css'

function PhoneWidget() {
  return (
    <ThunderPhoneWidget
      publishableKey="pk_live_your_publishable_key"
      ringtone={true}
    />
  )
}
```

Bruk en egendefinert ringetone ved å sende inn URL-en til en lydfil:

```tsx
<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
  ringtone="https://example.com/my-ringtone.mp3"
/>
```

Ringetonen gjentas mens widgeten er i tilstanden `connecting`, og tones jevnt ut når agenten kobler til.

### Med egendefinert API-base

<Tip>
  Du trenger bare å angi `apiBase` hvis du bruker et selvhostet eller proxybasert API-endepunkt. Standardverdien peker til `https://api.thunderphone.com/v1`.
</Tip>

```tsx
<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
  apiBase="https://your-proxy.example.com/v1"
/>
```

---

## Feilhåndtering

Når tilbakekallet `onError` utløses, mottar det et feilobjekt med to felt:

| Felt | Type | Beskrivelse |
|-------|------|-------------|
| `error` | `string` | Maskinlesbar feilkode |
| `message` | `string` | Menneskelesbar feilbeskrivelse |

Vanlige feilkoder omfatter domenet er ikke tillatt, agenten ble ikke funnet og ugyldig API-nøkkel.

---

## Neste steg

<CardGroup cols={2}>
  <Card title="Headless Hook" icon="code" href="/nb/widget/headless-hook">
    Trenger du full kontroll over brukergrensesnittet? Bruk `useThunderPhone`-hooken i stedet.
  </Card>
  <Card title="Stilsetting" icon="palette" href="/nb/widget/styling">
    Tilpass farger, størrelser og layout med egendefinerte CSS-egenskaper.
  </Card>
</CardGroup>