---
title: "Integrer webwidgetten"
description: "Tilføj en stemmeagent på dit marketing- eller supportsite med et enkelt script-tag — besøgende taler direkte med den fra browseren, uden behov for et telefonnummer."
---

Webwidgetten giver dine besøgende på webstedet en klik-for-at-tale-samtale
med en AI-agent ved hjælp af browserens mikrofon. Det er et separat
JavaScript- / React-SDK med sin egen [SDK-reference](/da/widget/overview)
— denne vejledning fokuserer på den ThunderPhone-opsætning, som widgetten har brug for.

<Note>
  Du kan gøre alt dette uden cURL: dashboardsiden **Webwidgets**
  (`/dashboard/web-widgets`) opretter widgetten, angiver dens tilstand
  og agent, administrerer tilladte domæner og giver dig integreringskodestykket.
</Note>

## Forudsætninger

<Steps>
  <Step title="Opret en agent">
    Agenten, hvis prompt og stemme skal køre widgetsessionen. Indstil
    `widget_enabled: true` (standardindstillingen).
  </Step>
  <Step title="Vælg routingtilstand">
    - `mode="agent"` — én statisk agent pr. nøgle. Enklest.
    - `mode="webhook"` — din server vælger agenten pr. besøgende via en
      [`web.incoming`-webhook](/da/webhooks/call-incoming). Brug dette til
      indloggede brugere, A/B-tests eller routing pr. side.
  </Step>
  <Step title="Angiv de tilladte domæner">
    Angiv hvert værtsnavn, der skal indlejre widgetten. Browsere sender
    sidens oprindelse med hver sessionsanmodning, så listen forhindrer din nøgle
    i at virke, hvis nogen kopierer den til et andet websted. Det er ikke
    godkendelse: et script uden for en browser kan sende enhver `Origin`-
    header. `localhost` er ikke automatisk tilladt i produktion; hvis du vil
    teste lokalt mod produktions-API'et, skal du føje `localhost` til
    listen.
  </Step>
  <Step title="Vælg browseroverstyringer">
    Vælg, hvilke sessionsindstillinger din side må sende. Nye nøgler accepterer
    ingen; se [Browseroverstyringer](#browser-overrides).
  </Step>
</Steps>

## Opret en udgivbar nøgle

<CodeGroup>
```bash Static agent
curl -X POST https://api.thunderphone.com/v1/publishable-key \
  -H "Authorization: Bearer sk_live_YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "name":            "Marketing site (prod)",
    "mode":            "agent",
    "agent_id":        12,
    "allowed_domains": ["example.com", "*.example.com"],
    "allowed_overrides": ["context"]
  }'
```

```bash Dynamic via webhook
curl -X POST https://api.thunderphone.com/v1/publishable-key \
  -H "Authorization: Bearer sk_live_YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "name":            "Support (dynamic)",
    "mode":            "webhook",
    "webhook_url":     "https://example.com/thunderphone/widget-hook",
    "allowed_domains": ["support.example.com"]
  }'
```
</CodeGroup>

Svaret indeholder en `key`, der starter med `pk_live_...`. **Udgivbare
nøgler er offentlige af design** — de kan sikkert inkluderes i din
frontend-pakke. Se [reference for udgivbare nøgler](/api-reference/publishable-keys) for
alle felter.

<Warning>
  `allowed_domains` skal indeholde mindst én post. `*.example.com`
  matcher underdomæner (f.eks. `api.example.com`), men **ikke**
  roddomænet. Rene jokertegn som `*` eller `*.*` afvises.
</Warning>

## Indsæt widgetten på dit websted

Tre integrationsmuligheder er beskrevet i
[widget-SDK-dokumentationen](/da/widget/overview):

<CardGroup cols={3}>
  <Card title="React-komponent" icon="react" href="/da/widget/react">
    `<ThunderPhoneWidget publishableKey="pk_live_..." />`.
  </Card>
  <Card title="Headless-hook" icon="circle-nodes" href="/da/widget/headless-hook">
    `useThunderPhone()` til brugerdefinerede brugergrænseflader.
  </Card>
  <Card title="CDN-script-tag" icon="code" href="/da/widget/cdn-script-tag">
    `ThunderPhone.mount({...})` til websteder uden bundler.
  </Card>
</CardGroup>

Alle tre accepterer den samme `publishableKey` og gengiver mikrofonknappen
samt lydelementet under opkaldet.

## Browseroverstyringer

Widgetten kan sende fire indstillinger pr. session fra siden:

| Indstilling | Widget-prop | Hvad den ændrer |
|---------|-------------|-----------------|
| `context` | `context` | Tekst fra siden, der føjes til agentprompten som reference |
| `variables` | ingen (kun rå `POST /v1/widget/session`) | Værdier for `{{variable}}`-pladsholdere i prompten |
| `voice` | `voice` | Agentens stemme for denne session |
| `language` | `language` | Det sprog, sessionen starter på |

Din publicerbare nøgle er offentlig, så alle, der har den, kan sende disse
indstillinger, også fra et script, der udgiver sig for at være dit domæne. De er
derfor alle slået fra, indtil du tillader dem på nøglen: markér dem under **Browseroverstyringer**,
når du opretter eller redigerer widgetten i dashboardet, eller angiv
`allowed_overrides` via
[API'et for publicerbare nøgler](/api-reference/publishable-keys). Tillad kun det,
din side faktisk sender.

En sessionsanmodning, der indeholder en indstilling, som nøglen ikke tillader,
mislykkes med `400` og angiver den:

```json
{
  "error": "override_not_allowed",
  "fields": ["voice"],
  "message": "This publishable key does not allow the browser to set `voice`. ..."
}
```

Kontrollen gælder i begge tilstande. I webhooktilstand videresendes en tilladt
indstilling også til din `web.incoming`-webhook (`context` ankommer som
`website_context`). Nøgler, der blev oprettet, før denne indstilling fandtes,
tillader alle fire, så eksisterende indlejringer fortsat virker; deaktiver det,
du ikke bruger.

Widgettens `context` afkortes ved 12.000 tegn (omtrent 3.400 tokens af typisk
engelsk tekst) og tæller med i
[tillægget for promptstørrelse](/da/guides/billing-and-topups).
Agenten instrueres i at behandle den som sideindhold, ikke som instruktioner.

## Webhooks i widgettilstand

Når `mode="webhook"`, kalder ThunderPhone din `webhook_url` ved hver
sessionsstart med en `web.incoming`-payload. Returner den
agentkonfiguration, du vil køre for den besøgende — den følger samme
[svartskema](/da/webhooks/call-incoming) som telefonopkald:

```json
{
  "prompt":  "You are a VIP concierge for Jane Doe.",
  "voice":   "john",
  "product": "storm-base",
  "tools":   [ /* per-customer tools */ ]
}
```

Du kan blande kontekst fra din egen session (hvilken kunde der browser,
hvilken side de er på) ind i prompten og skifte agenter for hver udrulning.

## Overvåg sessionerne

Widgetsessioner vises i
[`GET /v1/calls`](/api-reference/calls#list-calls) med
`direction="widget"` — samme transskription, optagelse, vurdering og
fakturering som telefonopkald. Filtrér efter `direction` for at opbygge et dashboard kun til widgets.

---

## Næste trin

<CardGroup cols={2}>
  <Card title="Widget SDK-reference" icon="window-maximize" href="/da/widget/overview">
    Integrationsdetaljer for React / hook / CDN.
  </Card>
  <Card title="Dynamisk konfiguration pr. opkald" icon="bolt" href="/da/guides/dynamic-call-config">
    Implementer flowet `mode="webhook"` fra start til slut.
  </Card>
  <Card title="Reference for publicerbare nøgler" icon="key" href="/api-reference/publishable-keys">
    Alle felter i nøgleressourcen.
  </Card>
  <Card title="API for mikrofonsessioner" icon="microphone" href="/api-reference/mic-sessions">
    Spring widgetten over; styr LiveKit direkte til tilpassede brugergrænseflader.
  </Card>
</CardGroup>