---
title: "Inbäddningsbar röstwidget"
description: "Lägg till en AI-röstagent på valfri webbplats med några rader kod"
---

ThunderPhones inbäddningsbara röstwidget låter besökarna på din webbplats prata med en röstagent direkt i webbläsaren. Inget telefonsamtal krävs -- användarna klickar på en knapp och startar en röstkonversation i realtid med ThunderPhone.

Widgeten visas som ett glasliknande fält som anpassar sig till ljusa och mörka teman, med anpassningsbara accentfärger och positionering. Den distribueras som npm-paketet `@thunderphone/widget` och finns även tillgänglig via CDN för miljöer utan bundlare.

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

## Förutsättningar

Slutför dessa tre steg i [ThunderPhone Dashboard](https://app.thunderphone.com) innan du bäddar in widgeten:

<Steps>
<Step title="Skapa en webbwidget">
  Gå till **Webbwidgetar** i dashboarden och skapa en widget. Välj röstagenten du vill göra tillgänglig. Varje widget har en egen publicerbar nyckel (`pk_live_...`), som är säker att inkludera i kod på klientsidan; röstagenten fastställs utifrån nyckeln.
</Step>

<Step title="Konfigurera tillåtna domäner">
  Lägg till de domäner där widgeten ska bäddas in på samma widget. Jokertecken stöds (t.ex. `*.example.com`). Listan hindrar widgeten från att fungera om någon kopierar din nyckel till en annan webbplats; den är inte autentisering, eftersom ett skript utanför en webbläsare kan skicka valfritt `Origin`-huvud. `localhost` tillåts inte automatiskt i produktion: lägg till den i listan för att testa lokalt mot produktions-API:t.
</Step>

<Step title="Välj åsidosättningar i webbläsaren">
  Om din sida anger `language`, `voice` eller `context` aktiverar du var och en under **Åsidosättningar i webbläsaren**. Nya widgetar tillåter inga, och en sessionsbegäran som innehåller en inställning som är avstängd misslyckas med `400 override_not_allowed`. Se [Åsidosättningar i webbläsaren](/sv/guides/embed-web-widget).
</Step>
</Steps>

<Warning>
  Publicerbara nycklar (`pk_live_...`) är **inte** samma sak som dina hemliga API-token. Publicerbara nycklar är utformade för användning på klientsidan och är begränsade till widgetsessioner på dina tillåtna domäner. Använd aldrig din hemliga API-token i kod på klientsidan.
</Warning>

<Note>
  Widgetsessioner avslutas efter 30 minuter som standard, eller tidigare om röstagentens egen maximala samtalslängd är kortare. Ändra gränsen per nyckel med `max_call_duration_seconds` på den [publicerbara nyckeln](/api-reference/publishable-keys) (upp till 6 timmar), eller ange den som `null` för att använda röstagentens egen gräns.
</Note>

---

## Snabbstart

Installera paketet:

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

Lägg till widgeten 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"
    />
  )
}
```

Klart. Dina användare ser ett glasliknande samtalsfält som ansluter dem till din röstagent med ett enda klick.

---

## Anpassning

Widgeten har fyra props för utseendet:

| Prop | Standard | Beskrivning |
|------|---------|-------------|
| `theme` | `'light'` | `'light'` för vitt glas, `'dark'` för mörkt glas |
| `primaryColor` | `'#000000'` (ljus) / `'#ffffff'` (mörk) | Accentfärg för startknappen, vågformen och anslutningsindikatorn |
| `title` | `'Voice assistant'` | Text som visas i widgeten |
| `position` | `'bottom-right'` | Hörn i visningsområdet: `'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>

Ytterligare tre parametrar anpassar sessionen snarare än utseendet -- alla vidarebefordras till sessionsbegäran när ett samtal startar. Var och en fungerar endast när widgetens publicerbara nyckel tillåter den under **Webbläsaråsidosättningar**; annars misslyckas sessionsbegäran med `400 override_not_allowed`:

| Prop | Beskrivning |
|------|-------------|
| `language` | Språkåsidosättning per session -- en kod eller lokal, exempelvis `en`, `es` eller `fr-FR` |
| `voice` | Röståsidosättning per session -- ett röstnamn, exempelvis `maria` |
| `context` | Faktabaserad sid- eller webbplatskontext som skickas till agenten (trunkeras på serversidan till 12 000 tecken) |

Se [referensen för React-komponenten](/sv/widget/react) för den fullständiga propstabellen.

Använd [headless-hooken](/sv/widget/headless-hook) för att hantera röstsessionen medan du bygger ett eget gränssnitt om du vill ha ett helt anpassat UI. Hooken exponerar ljudnivåer i realtid för att bygga ljudreaktiva visualiseringar.

Varje widgetkonversation är ett samtal. Den räknas mot organisationens [gräns för samtidiga samtal](/api-reference/introduction#call-limits) (20 pågående samtal som standard, delat med telefon- och andra samtal) och widgetens gräns på 25 aktiva sessioner (eller din gräns för samtidiga samtal, om den är högre). Vid någon av gränserna kan en ny konversation inte starta förrän ett samtal har avslutats.

---

## Integrationsalternativ

Välj den integrationsmetod som passar din stack:

<CardGroup cols={3}>
  <Card title="React-komponent" icon="react" href="/sv/widget/react">
    Färdigbyggd UI-komponent med inbyggda samtalskontroller och statusvisning. Importera, skicka in props, klart.
  </Card>
  <Card title="Headless-hook" icon="code" href="/sv/widget/headless-hook">
    Full kontroll över användargränssnittet. Hooken `useThunderPhone` hanterar röstsessionen medan du bygger ditt eget gränssnitt.
  </Card>
  <Card title="CDN / script-tagg" icon="globe" href="/sv/widget/cdn-script-tag">
    Ingen bundlare krävs. Ladda widgeten via en script-tagg för statiska webbplatser, WordPress och andra miljöer som inte använder React.
  </Card>
</CardGroup>

---

## Stil

Widgeten levereras med inbyggda ljusa och mörka teman som styrs av propen `theme`, samt en accentfärg som styrs av propen `primaryColor`. För mer avancerad anpassning kan du åsidosätta CSS-anpassade egenskaper och klasser. Läs [stilguiden](/sv/widget/styling) för mer information.

<Note>
  Behöver du hjälp? Kontakta oss på [support@thunderphone.com](mailto:support@thunderphone.com)
</Note>