> ## 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.

# Bädda in webbwidgeten

> Lägg till en röstagent på din marknadsförings- eller supportsajt – inget telefonnummer krävs.

Webbwidgeten ger dina webbplatsbesökare ett klicka-för-att-prata-samtal
med en AI-röstagent via webbläsarens mikrofon. Det är ett separat
JavaScript-/React-SDK med en egen [SDK-referens](/sv/widget/overview)
— den här guiden fokuserar på konfigurationen på ThunderPhone-sidan som widgeten behöver.

<Note>
  Du kan göra allt detta utan cURL: dashboardsidan **Webbwidgetar**
  (`/dashboard/web-widgets`) skapar widgeten, anger dess läge
  och agent, hanterar tillåtna domäner och ger dig inbäddningssnutten.
</Note>

## Förutsättningar

<Steps>
  <Step title="Skapa en agent">
    Agenten vars prompt och röst ska köras i widgetsessionen. Ange
    `widget_enabled: true` (standardvärdet).
  </Step>

  <Step title="Välj routningsläge">
    * `mode="agent"` — en statisk agent per nyckel. Enklast.
    * `mode="webhook"` — din server väljer agent per besökare via en
      [`web.incoming`-webhook](/sv/webhooks/call-incoming). Använd detta för
      inloggade användare, A/B-tester eller routning per sida.
  </Step>

  <Step title="Lista tillåtna domäner">
    Publicerbara nycklar är låsta till ursprung. Du måste ange varje värdnamn
    som ska bädda in widgeten. `localhost` / `127.0.0.1` är alltid
    tillåtna under lokal utveckling.
  </Step>
</Steps>

## Skapa en publicerbar nyckel

<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 innehåller en `key` som börjar med `pk_live_...`. **Publicerbara
nycklar är offentliga avsiktligt** — de kan säkert inkluderas i ditt frontend-paket.
Se [referensen för publicerbara nycklar](/api-reference/publishable-keys) för
alla fält.

<Warning>
  `allowed_domains` måste innehålla minst en post. `*.example.com`
  matchar underdomäner (t.ex. `api.example.com`) men **inte** den rena
  domänen. Rena jokertecken som `*` eller `*.*` avvisas.
</Warning>

## Lägg till widgeten på din webbplats

Tre integrationsalternativ beskrivs i
[widgetens SDK-dokumentation](/sv/widget/overview):

<CardGroup cols={3}>
  <Card title="React-komponent" icon="react" href="/sv/widget/react">
    `<ThunderPhoneWidget publishableKey="pk_live_..." />`.
  </Card>

  <Card title="Headless-hook" icon="circle-nodes" href="/sv/widget/headless-hook">
    `useThunderPhone()` för anpassade användargränssnitt.
  </Card>

  <Card title="CDN-skripttagg" icon="code" href="/sv/widget/cdn-script-tag">
    `ThunderPhone.mount({...})` för webbplatser utan paketerare.
  </Card>
</CardGroup>

Alla tre accepterar samma `publishableKey` och renderar mikrofonknappen
samt ljudelementet under samtal.

Widgetens `context` trunkeras till 12 000 tecken (ungefär 3 400
token av typisk engelsk text) och räknas in i
[tillägget för promptstorlek](/sv/guides/billing-and-topups).

## Webhooks i widgetläge

När `mode="webhook"` används anropar ThunderPhone din `webhook_url` vid varje
sessionsstart med en `web.incoming`-payload. Returnera den agentkonfiguration
du vill köra för den besökaren — den följer samma
[svarsschema](/sv/webhooks/call-incoming) som telefonsamtal:

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

Du kan blanda in kontext från din egen session (vilken kund som surfar,
vilken sida de är på) i prompten och byta agent per utrullning.

## Övervaka sessionerna

Widgetsessioner visas i
[`GET /v1/calls`](/api-reference/calls#list-calls) med
`direction="widget"` — samma transkribering, inspelning, bedömning och
fakturering som telefonsamtal. Filtrera efter `direction` för att skapa en
dashboard endast för widgeten.

***

## Nästa steg

<CardGroup cols={2}>
  <Card title="Referens för widget-SDK" icon="window-maximize" href="/sv/widget/overview">
    Integrationsdetaljer för React / hook / CDN.
  </Card>

  <Card title="Dynamisk konfiguration per samtal" icon="bolt" href="/sv/guides/dynamic-call-config">
    Implementera flödet `mode="webhook"` från början till slut.
  </Card>

  <Card title="Referens för publicerbara nycklar" icon="key" href="/api-reference/publishable-keys">
    Alla fält i nyckelresursen.
  </Card>

  <Card title="API för mikrofonsessioner" icon="microphone" href="/api-reference/mic-sessions">
    Hoppa över widgeten; styr LiveKit direkt för anpassade användargränssnitt.
  </Card>
</CardGroup>