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

# Innebyggbar stemmewidget

> Legg til en AI-stemmeagent på et hvilket som helst nettsted med noen få kodelinjer

Den innebyggbare stemmewidgeten fra ThunderPhone lar besøkende på nettstedet ditt snakke med en AI-agent direkte fra nettleseren. Ingen telefonsamtale nødvendig -- brukere klikker på en knapp og starter en stemmesamtale i sanntid drevet av ThunderPhone.

Widgeten vises som en glassmorfisk linje som tilpasser seg lyse og mørke temaer, med tilpassbare aksentfarger og plassering. Den distribueres som npm-pakken `@thunderphone/widget` og er også tilgjengelig via CDN for miljøer uten bundler.

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

## Forutsetninger

Før du bygger inn widgeten, fullfør disse tre trinnene i [ThunderPhone Dashboard](https://app.thunderphone.com):

<Steps>
  <Step title="Opprett en publiserbar API-nøkkel">
    Gå til **Utviklere** i dashboardinnstillingene og opprett en publiserbar nøkkel. Publiserbare nøkler starter med `pk_live_` og kan trygt inkluderes i klientsidekode.
  </Step>

  <Step title="Konfigurer tillatte domener">
    I de samme utviklerinnstillingene legger du til domenene der widgeten skal bygges inn. `localhost` er alltid tillatt for utvikling. Jokertegn støttes (f.eks. `*.example.com`).
  </Step>

  <Step title="Opprett en webwidget">
    Gå til **Webwidgeter** i dashboardet og opprett en widget. Velg agenten du vil gjøre tilgjengelig, og den publiserbare nøkkelen som skal brukes. Agenten bestemmes automatisk fra konfigurasjonen av den publiserbare nøkkelen din.
  </Step>
</Steps>

<Warning>
  Publiserbare nøkler (`pk_live_...`) er **ikke** det samme som de hemmelige API-tokenene dine. Publiserbare nøkler er laget for bruk på klientsiden og er begrenset til widgetøkter på de tillatte domenene dine. Bruk aldri det hemmelige API-tokenet ditt i klientsidekode.
</Warning>

***

## Hurtigstart

Installer pakken:

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

Legg widgeten inn i appen din:

```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"
    />
  )
}
```

Det var alt. Brukerne dine vil se en glassmorfisk samtalelinje som kobler dem til AI-agenten din med ett enkelt klikk.

***

## Tilpasning

Widgeten har fire props for utseende:

| Prop           | Standard                               | Beskrivelse                                                                              |
| -------------- | -------------------------------------- | ---------------------------------------------------------------------------------------- |
| `theme`        | `'light'`                              | `'light'` for hvitt glass, `'dark'` for mørkt glass                                      |
| `primaryColor` | `'#000000'` (lys) / `'#ffffff'` (mørk) | Aksentfarge for startknappen, bølgeformen og tilkoblingsindikatoren                      |
| `title`        | `'Voice assistant'`                    | Tekst som vises i widgeten                                                               |
| `position`     | `'bottom-right'`                       | Hjørne 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 ekstra props tilpasser økten i stedet for utseendet -- alle videresendes til øktforespørselen når en samtale starter:

| Prop       | Beskrivelse                                                                                            |
| ---------- | ------------------------------------------------------------------------------------------------------ |
| `language` | Språkoverstyring per økt -- en kode eller lokalitet som `en`, `es` eller `fr-FR`                       |
| `voice`    | Stemmeoverstyring per økt -- et stemmenavn som `maria`                                                 |
| `context`  | Faktisk side- eller nettstedskontekst som sendes til agenten (avkortes på serversiden til 12 000 tegn) |

Se [referansen for React-komponenten](/nb/widget/react) for den fullstendige propstabellen.

For et fullstendig tilpasset brukergrensesnitt kan du bruke den [headless hooken](/nb/widget/headless-hook) til å administrere stemmeøkten mens du bygger ditt eget grensesnitt. Hooken gir deg lydnivåer i sanntid for å bygge lydreaktive visualiseringer.

***

## Integrasjonsalternativer

Velg integrasjonsmetoden som passer teknologistakken din:

<CardGroup cols={3}>
  <Card title="React-komponent" icon="react" href="/nb/widget/react">
    Ferdigbygd UI-komponent med innebygde samtalekontroller og statusvisning. Importer, send inn props, ferdig.
  </Card>

  <Card title="Headless-hook" icon="code" href="/nb/widget/headless-hook">
    Full kontroll over UI-et. Hooken `useThunderPhone` håndterer stemmeøkten mens du bygger ditt eget grensesnitt.
  </Card>

  <Card title="CDN / script-tag" icon="globe" href="/nb/widget/cdn-script-tag">
    Ingen bundler nødvendig. Last inn widgeten via en script-tag for statiske nettsteder, WordPress og andre ikke-React-miljøer.
  </Card>
</CardGroup>

***

## Stilsetting

Widgeten leveres med innebygde lyse og mørke temaer som styres av propen `theme`, og en aksentfarge som styres av propen `primaryColor`. For mer omfattende tilpasning kan du overstyre egendefinerte CSS-egenskaper og klasser. Se [veiledningen for stilsetting](/nb/widget/styling) for detaljer.

<Note>
  Trenger du hjelp? Kontakt oss på [support@thunderphone.com](mailto:support@thunderphone.com)
</Note>