---
title: "Bädda in webbwidgeten"
description: "Lägg till en röstagent på din marknadsförings- eller supportsida med en enda skripttagg — besökare pratar med den direkt i webbläsaren, utan telefonnummer."
---

Webbwidgeten ger dina webbplatsbesökare ett samtal där de kan klicka för att prata
med en 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äddningskoden.
</Note>

## Förutsättningar

<Steps>
  <Step title="Skapa en agent">
    Agenten vars prompt och röst ska användas 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">
    Ange varje värdnamn som ska bädda in widgeten. Webbläsare skickar
    sidans ursprung med varje sessionsbegäran, så listan förhindrar att din nyckel
    fungerar när någon kopierar den till en annan webbplats. Det är inte
    autentisering: ett skript utanför en webbläsare kan skicka valfri `Origin`-
    header. `localhost` tillåts inte automatiskt i produktion; för att
    testa lokalt mot produktions-API:t lägger du till `localhost` i
    listan.
  </Step>
  <Step title="Välj webbläsaröverskrivningar">
    Bestäm vilka sessionsinställningar din sida får skicka. Nya nycklar accepterar
    inga; se [Webbläsaröverskrivningar](#browser-overrides).
  </Step>
</Steps>

## Skapa en publicerbar nyckel

<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 innehåller en `key` som börjar med `pk_live_...`. **Publicerbara
nycklar är offentliga avsiktligt** — de kan säkert inkluderas i ditt front-end-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
  nakna domänen. Nakna 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 grä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.

## Webbläsaråsidosättningar

Widgeten kan skicka fyra inställningar per session från sidan:

| Inställning | Widget-prop | Vad den ändrar |
|---------|-------------|-----------------|
| `context` | `context` | Text från sidan som läggs till i agentprompten som referens |
| `variables` | none (raw `POST /v1/widget/session` only) | Värden för platshållare av typen `{{variable}}` i prompten |
| `voice` | `voice` | Röstagentens röst för den här sessionen |
| `language` | `language` | Språket som sessionen startar på |

Din publicerbara nyckel är offentlig, så alla som har den kan skicka dessa
inställningar, även från ett skript som utger sig för att vara din domän. Var och en är
därför avstängd tills du tillåter den på nyckeln: markera den under **Webbläsaråsidosättningar**
när du skapar eller redigerar widgeten i instrumentpanelen, eller ange
`allowed_overrides` via
[API för publicerbara nycklar](/api-reference/publishable-keys). Tillåt bara det
som din sida faktiskt skickar.

En sessionsbegäran som innehåller en inställning som nyckeln inte tillåter
misslyckas med `400` och anger den:

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

Kontrollen gäller i båda lägena. I webhook-läge vidarebefordras en tillåten inställning
också till din `web.incoming`-webhook (`context` kommer som
`website_context`). Nycklar som skapades innan den här inställningen fanns tillåter alla
fyra, så befintliga inbäddningar fortsätter att fungera; stäng av det du inte använder.

Widgetens `context` trunkeras till 12 000 tecken (ungefär 3 400
token för normal engelsk text) och räknas mot
[tilläggsavgiften för promptstorlek](/sv/guides/billing-and-topups).
Röstagenten instrueras att behandla den som sidinnehåll, inte som instruktioner.

## Webbhooks 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
[svartsschema](/sv/webhooks/call-incoming) som telefonsamtal:

```json
{
  "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 transkription, inspelning, bedömning och
fakturering som telefonsamtal. Filtrera efter `direction` för att bygga en
dashboard enbart 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>