---
title: "Integrerbar stemmewidget"
description: "Tilføj en AI-stemmeagent til ethvert website med få linjer kode"
---

ThunderPhone's indlejrbare stemmewidget lader dine webstedsbesogende tale med en AI-agent direkte fra browseren. Intet telefonopkald er nodvendigt -- brugere klikker pa en knap og starter en stemmesamtale i realtid drevet af ThunderPhone.

Widgetten vises som en glasmorfisk bjælke, der tilpasser sig lyse og morke temaer, med tilpasningsbare accentfarver og placering. Den distribueres som npm-pakken `@thunderphone/widget` og er ogsa tilgængelig via CDN til miljoer uden bundler.

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

## Forudsætninger

For du indlejrer widgetten, skal du gennemfore disse tre trin i [ThunderPhone Dashboard](https://app.thunderphone.com):

<Steps>
<Step title="Opret en webwidget">
  Gå til **Webwidgets** i dashboardet, og opret en widget. Vælg den agent, du vil gøre tilgængelig. Hver widget har sin egen publicerbare nøgle (`pk_live_...`), som det er sikkert at inkludere i klientkode; agenten bestemmes ud fra nøglen.
</Step>

<Step title="Konfigurer tilladte domæner">
  Tilføj de domæner, hvor widgetten skal indlejres, på den samme widget. Jokertegn understøttes (f.eks. `*.example.com`). Listen forhindrer widgetten i at fungere, hvis nogen kopierer din nøgle til et andet website; den er ikke godkendelse, da et script uden for en browser kan sende enhver `Origin`-header. `localhost` er ikke automatisk tilladt i produktion: Føj det til listen for at teste lokalt mod produktions-API'et.
</Step>

<Step title="Vælg browseroverskrivelser">
  Hvis din side angiver `language`, `voice` eller `context`, skal du aktivere dem hver især under **Browseroverskrivelser**. Nye widgets accepterer ingen, og en sessionsanmodning med en indstilling, der er slået fra, fejler med `400 override_not_allowed`. Se [Browseroverskrivelser](/da/guides/embed-web-widget).
</Step>
</Steps>

<Warning>
  Publicerbare nøgler (`pk_live_...`) er **ikke** det samme som dine hemmelige API-tokens. Publicerbare nøgler er designet til brug pa klientsiden og er afgrænset til widgetsessioner pa dine tilladte domæner. Brug aldrig dit hemmelige API-token i klientsidekode.
</Warning>

<Note>
  Widgetsessioner slutter som standard efter 30 minutter eller tidligere, hvis agentens egen maksimale opkaldsvarighed er kortere. Skift grænsen pr. nøgle med `max_call_duration_seconds` på den [publicerbare nøgle](/api-reference/publishable-keys) (op til 6 timer), eller angiv den som `null` for at bruge agentens egen grænse.
</Note>

---

## Hurtig start

Installer pakken:

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

Indsæt widgetten i din app:

```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 er det. Dine brugere ser en glasmorfisk opkaldsbjælke, der forbinder dem med din AI-agent med et enkelt klik.

---

## Tilpasning

Widgetten har fire props til udseende:

| Prop | Standard | Beskrivelse |
|------|---------|-------------|
| `theme` | `'light'` | `'light'` til hvidt glas, `'dark'` til morkt glas |
| `primaryColor` | `'#000000'` (lys) / `'#ffffff'` (mork) | Accentfarve til startknappen, bolgeformen og forbindelsesindikatoren |
| `title` | `'Voice assistant'` | Tekst, der vises i widgetten |
| `position` | `'bottom-right'` | Hjorne i viewporten: `'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 yderligere props tilpasser sessionen frem for udseendet -- alle videresendes til sessionsanmodningen, når et opkald starter. Hver fungerer kun, når widgettens publicerbare nøgle tillader det under **browsertilsidesættelser**; ellers mislykkes sessionsanmodningen med `400 override_not_allowed`:

| Prop | Beskrivelse |
|------|-------------|
| `language` | Sprogtilsidesættelse pr. session -- en kode eller landestandard som `en`, `es` eller `fr-FR` |
| `voice` | Stemmetilsidesættelse pr. session -- et stemmenavn som `maria` |
| `context` | Faktuel side- eller webstedskontekst, der sendes til agenten (afkortes pa serversiden til 12.000 tegn) |

Se [React-komponentreferencen](/da/widget/react) for den komplette propstabel.

Brug [headless-hooket](/da/widget/headless-hook) til at administrere stemmesessionen, mens du bygger din egen grænseflade, hvis du vil have et fuldt tilpasset UI. Hooket eksponerer lydniveauer i realtid til opbygning af lydreaktive visualiseringer.

Hver widgetsamtale er et opkald. Den tæller med i din organisations [grænse for samtidige opkald](/api-reference/introduction#call-limits) (20 igangværende opkald som standard, delt med telefonopkald og andre opkald) og en widgetgrænse på 25 aktive sessioner (eller din grænse for samtidige opkald, hvis den er højere). Ved en af grænserne kan en ny samtale ikke starte, før et opkald afsluttes.

---

## Integrationsmuligheder

Vælg den integrationsmetode, der passer til din stack:

<CardGroup cols={3}>
  <Card title="React-komponent" icon="react" href="/da/widget/react">
    Færdigbygget UI-komponent med indbyggede opkaldskontroller og statusvisning. Importer, angiv props, færdig.
  </Card>
  <Card title="Headless-hook" icon="code" href="/da/widget/headless-hook">
    Fuld kontrol over brugergrænsefladen. Hooket `useThunderPhone` administrerer stemmesessionen, mens du bygger din egen brugergrænseflade.
  </Card>
  <Card title="CDN / script-tag" icon="globe" href="/da/widget/cdn-script-tag">
    Ingen bundler nødvendig. Indlæs widgetten via et script-tag til statiske websites, WordPress og andre ikke-React-miljøer.
  </Card>
</CardGroup>

---

## Styling

Widgetten leveres med indbyggede lyse og mørke temaer, der styres af proppen `theme`, samt en accentfarve, der styres af proppen `primaryColor`. For mere omfattende tilpasning kan du overskrive brugerdefinerede CSS-egenskaber og klasser. Se [stylingguiden](/da/widget/styling) for detaljer.

<Note>
  Brug for hjælp? Kontakt os på [support@thunderphone.com](mailto:support@thunderphone.com)
</Note>