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

# Inbäddningsbar röstwidget

> 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="https://mintcdn.com/thunderphone/4XhPaCl4RGfyS7_M/images/widget-showcase.png?fit=max&auto=format&n=4XhPaCl4RGfyS7_M&q=85&s=17fea4fe853f3548b9b2628c9d4c4fc0" alt="ThunderPhone widget in light and dark themes with various accent colors" width="1200" height="800" data-path="images/widget-showcase.png" />
</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 publicerbar API-nyckel">
    Gå till **Utvecklare** i instrumentpanelens inställningar och skapa en publicerbar nyckel. Publicerbara nycklar börjar med `pk_live_` och kan säkert inkluderas i kod på klientsidan.
  </Step>

  <Step title="Konfigurera tillåtna domäner">
    Lägg till de domäner där widgeten ska bäddas in i samma inställningar för Utvecklare. `localhost` är alltid tillåtet för utveckling. Jokertecken stöds (t.ex. `*.example.com`).
  </Step>

  <Step title="Skapa en webbwidget">
    Gå till **Webbwidgetar** i instrumentpanelen och skapa en widget. Välj den agent du vill exponera och den publicerbara nyckel som ska användas. Agenten identifieras automatiskt utifrån konfigurationen för din publicerbara nyckel.
  </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>

***

## Snabbstart

Installera paketet:

```bash theme={null}
npm install @thunderphone/widget
```

Lägg till widgeten i din app:

```tsx theme={null}
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) theme={null}
  <ThunderPhoneWidget
    publishableKey="pk_live_your_publishable_key"
  />
  ```

  ```tsx Dark theme with custom color theme={null}
  <ThunderPhoneWidget
    publishableKey="pk_live_your_publishable_key"
    theme="dark"
    primaryColor="#8b5cf6"
    title="Ask our AI"
  />
  ```
</CodeGroup>

Tre ytterligare props anpassar sessionen i stället för utseendet -- alla vidarebefordras till sessionsbegäran när ett samtal startar:

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

***

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