> ## Documentation Index
> Fetch the complete documentation index at: https://docs.thunderphone.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Indlejr webwidgetten

> Tilføj en stemmeagent på dit marketing- eller supportwebsted — intet telefonnummer kræves.

Webwidgeten 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 opsætning på ThunderPhone-siden, som widgeten har brug for.

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

## Forudsætninger

<Steps>
  <Step title="Opret en agent">
    Agenten, hvis prompt og stemme skal køre widgetsessionen. Angiv
    `widget_enabled: true` (standardindstillingen).
  </Step>

  <Step title="Vælg routingtalstanden">
    * `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
      brugere, der er logget ind, A/B-tests eller routing pr. side.
  </Step>

  <Step title="Angiv de tilladte domæner">
    Udgivelsesnøgler er låst til origin. Du skal angive hvert værtsnavn,
    der indlejrer widgeten. `localhost` / `127.0.0.1` er altid
    tilladt under lokal udvikling.
  </Step>
</Steps>

## Opret en udgivelsesnøgle

<CodeGroup>
  ```bash Static agent theme={null}
  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"]
    }'
  ```

  ```bash Dynamic via webhook theme={null}
  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 begynder med `pk_live_...`. **Udgivelsesnøgler
er offentlige med vilje** — de kan sikkert inkluderes i din front-end-pakke.
Se [reference for udgivelsesnø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** det
  nøgne domæne. Nøgne jokertegn som `*` eller `*.*` afvises.
</Warning>

## Tilføj widgeten 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 tilpassede 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.

Widgetens `context` afkortes til 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).

## 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
[svarskema](/da/webhooks/call-incoming) som telefonopkald:

```json theme={null}
{
  "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 agent pr. udrulning.

## Overvåg sessionerne

Widget-sessioner vises i
[`GET /v1/calls`](/api-reference/calls#list-calls) med
`direction="widget"` — samme transskription, optagelse, bedømmelse og
fakturering som telefonopkald. Filtrer efter `direction` for at opbygge et dashboard kun til widgets.

***

## Næste trin

<CardGroup cols={2}>
  <Card title="Reference til Widget SDK" icon="window-maximize" href="/da/widget/overview">
    Integrationsdetaljer for React / hooks / CDN.
  </Card>

  <Card title="Dynamisk konfiguration pr. opkald" icon="bolt" href="/da/guides/dynamic-call-config">
    Implementer `mode="webhook"`-flowet fra ende til anden.
  </Card>

  <Card title="Reference til publicerbare nøgler" icon="key" href="/api-reference/publishable-keys">
    Alle felter i nøgleressourcen.
  </Card>

  <Card title="API til mikrofonsessioner" icon="microphone" href="/api-reference/mic-sessions">
    Spring widgetten over; styr LiveKit direkte til tilpassede brugergrænseflader.
  </Card>
</CardGroup>