---
title: "Innebyggbar stemmewidget"
description: "Legg til en AI-stemmeagent på et hvilket som helst nettsted med noen få kodelinjer"
---

Den innebyggbare stemmewidgeten fra ThunderPhone lar besøkende på nettstedet ditt snakke med en AI-agent direkte fra nettleseren. Ingen telefonsamtale nødvendig -- brukere klikker på en knapp og starter en stemmesamtale i sanntid drevet av ThunderPhone.

Widgeten vises som en glassmorfisk linje som tilpasser seg lyse og mørke temaer, med tilpassbare aksentfarger og plassering. Den distribueres som npm-pakken `@thunderphone/widget` og er også tilgjengelig via CDN for miljøer uten bundler.

<Frame>
  <img src="/images/widget-showcase.png" alt="ThunderPhone widget in light and dark themes with various accent colors" />
</Frame>

## Forutsetninger

Før du bygger inn widgeten, fullfør disse tre trinnene i [ThunderPhone Dashboard](https://app.thunderphone.com):

<Steps>
<Step title="Opprett en nettwidget">
  Gå til **Nettwidgeter** i dashbordet og opprett en widget. Velg agenten du vil eksponere. Hver widget har sin egen publiserbare nøkkel (`pk_live_...`), som er trygg å inkludere i kode på klientsiden. Agenten bestemmes ut fra nøkkelen.
</Step>

<Step title="Konfigurer tillatte domener">
  Legg til domenene der widgeten skal bygges inn, i den samme widgeten. Jokertegn støttes (f.eks. `*.example.com`). Listen hindrer at widgeten fungerer når noen kopierer nøkkelen din til et annet nettsted. Den er ikke autentisering, siden et skript utenfor en nettleser kan sende en hvilken som helst `Origin`-header. `localhost` er ikke automatisk tillatt i produksjon: legg den til i listen for å teste lokalt mot produksjons-API-et.
</Step>

<Step title="Velg overstyringer i nettleseren">
  Hvis siden din angir `language`, `voice` eller `context`, aktiver hver av dem under **Overstyringer i nettleseren**. Nye widgeter tillater ingen, og en sesjonsforespørsel med en innstilling som er deaktivert, mislykkes med `400 override_not_allowed`. Se [Overstyringer i nettleseren](/nb/guides/embed-web-widget).
</Step>
</Steps>

<Warning>
  Publiserbare nøkler (`pk_live_...`) er **ikke** det samme som de hemmelige API-tokenene dine. Publiserbare nøkler er laget for bruk på klientsiden og er begrenset til widgetøkter på de tillatte domenene dine. Bruk aldri det hemmelige API-tokenet ditt i klientsidekode.
</Warning>

<Note>
  Widgetøkter avsluttes som standard etter 30 minutter, eller tidligere hvis agentens egen maksimale samtalevarighet er kortere. Endre grensen per nøkkel med `max_call_duration_seconds` på den [publiserbare nøkkelen](/api-reference/publishable-keys) (opptil 6 timer), eller angi den til `null` for å bruke agentens egen grense.
</Note>

---

## Hurtigstart

Installer pakken:

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

Legg widgeten inn i appen din:

```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"
    />
  )
}
```

Det var alt. Brukerne dine vil se en glassmorfisk samtalelinje som kobler dem til AI-agenten din med ett enkelt klikk.

---

## Tilpasning

Widgeten har fire props for utseende:

| Prop | Standard | Beskrivelse |
|------|---------|-------------|
| `theme` | `'light'` | `'light'` for hvitt glass, `'dark'` for mørkt glass |
| `primaryColor` | `'#000000'` (lys) / `'#ffffff'` (mørk) | Aksentfarge for startknappen, bølgeformen og tilkoblingsindikatoren |
| `title` | `'Voice assistant'` | Tekst som vises i widgeten |
| `position` | `'bottom-right'` | Hjørne i visningsområdet: `'bottom-right'`, `'bottom-left'`, `'top-right'`, `'top-left'` |

<CodeGroup>
```tsx Light theme (default)
<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
/>
```

```tsx Dark theme with custom color
<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
  theme="dark"
  primaryColor="#8b5cf6"
  title="Ask our AI"
/>
```
</CodeGroup>

Tre flere rekvisitter tilpasser økten i stedet for utseendet -- alle videresendes til øktforespørselen når en samtale starter. Hver fungerer bare når widgetens publiserbare nøkkel tillater det under **Nettleseroverstyringer**; ellers mislykkes øktforespørselen med `400 override_not_allowed`:

| Prop | Beskrivelse |
|------|-------------|
| `language` | Språkoverstyring per økt -- en kode eller lokalitet som `en`, `es` eller `fr-FR` |
| `voice` | Stemmeoverstyring per økt -- et stemmenavn som `maria` |
| `context` | Faktisk side- eller nettstedskontekst som sendes til agenten (avkortes på serversiden til 12 000 tegn) |

Se [referansen for React-komponenten](/nb/widget/react) for den fullstendige propstabellen.

For et fullstendig tilpasset brukergrensesnitt kan du bruke den [headless hooken](/nb/widget/headless-hook) til å administrere stemmeøkten mens du bygger ditt eget grensesnitt. Hooken gir deg lydnivåer i sanntid for å bygge lydreaktive visualiseringer.

Hver widgetsamtale er en samtale. Den teller mot organisasjonens [grense for samtidige samtaler](/api-reference/introduction#call-limits) (20 pågående samtaler som standard, delt med telefon- og andre samtaler) og en widgetgrense på 25 aktive økter (eller grensen for samtidige samtaler, hvis den er høyere). Ved en av grensene kan en ny samtale ikke starte før en samtale avsluttes.

---

## Integrasjonsalternativer

Velg integrasjonsmetoden som passer teknologistakken din:

<CardGroup cols={3}>
  <Card title="React-komponent" icon="react" href="/nb/widget/react">
    Ferdigbygd UI-komponent med innebygde samtalekontroller og statusvisning. Importer, send inn props, ferdig.
  </Card>
  <Card title="Headless-hook" icon="code" href="/nb/widget/headless-hook">
    Full kontroll over UI-et. Hooken `useThunderPhone` håndterer stemmeøkten mens du bygger ditt eget grensesnitt.
  </Card>
  <Card title="CDN / script-tag" icon="globe" href="/nb/widget/cdn-script-tag">
    Ingen bundler nødvendig. Last inn widgeten via en script-tag for statiske nettsteder, WordPress og andre ikke-React-miljøer.
  </Card>
</CardGroup>

---

## Stilsetting

Widgeten leveres med innebygde lyse og mørke temaer som styres av propen `theme`, og en aksentfarge som styres av propen `primaryColor`. For mer omfattende tilpasning kan du overstyre egendefinerte CSS-egenskaper og klasser. Se [veiledningen for stilsetting](/nb/widget/styling) for detaljer.

<Note>
  Trenger du hjelp? Kontakt oss på [support@thunderphone.com](mailto:support@thunderphone.com)
</Note>