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

# Integrerbar stemmewidget

> Tilføj en AI-stemmeagent til ethvert website med få linjer kode

ThunderPhone's indlejrbare stemmewidget lader dine webstedsbesogende tale med en AI-agent direkte fra browseren. Intet telefonopkald er nodvendigt -- brugere klikker pa en knap og starter en stemmesamtale i realtid drevet af ThunderPhone.

Widgetten vises som en glasmorfisk bjælke, der tilpasser sig lyse og morke temaer, med tilpasningsbare accentfarver og placering. Den distribueres som npm-pakken `@thunderphone/widget` og er ogsa tilgængelig via CDN til miljoer uden 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>

## Forudsætninger

For du indlejrer widgetten, skal du gennemfore disse tre trin i [ThunderPhone Dashboard](https://app.thunderphone.com):

<Steps>
  <Step title="Opret en publicerbar API-nøgle">
    Ga til **Udviklere** i dashboardets indstillinger, og opret en publicerbar nøgle. Publicerbare nøgler starter med `pk_live_` og kan sikkert inkluderes i klientsidekode.
  </Step>

  <Step title="Konfigurer tilladte domæner">
    Tilfoj de domæner, hvor widgetten skal indlejres, i de samme Udviklere-indstillinger. `localhost` er altid tilladt under udvikling. Jokere understottes (f.eks. `*.example.com`).
  </Step>

  <Step title="Opret en webwidget">
    Ga til **Webwidgets** i dashboardet, og opret en widget. Vælg den agent, du vil eksponere, og den publicerbare nøgle, der skal bruges. Agenten findes automatisk ud fra konfigurationen af din publicerbare nøgle.
  </Step>
</Steps>

<Warning>
  Publicerbare nøgler (`pk_live_...`) er **ikke** det samme som dine hemmelige API-tokens. Publicerbare nøgler er designet til brug pa klientsiden og er afgrænset til widgetsessioner pa dine tilladte domæner. Brug aldrig dit hemmelige API-token i klientsidekode.
</Warning>

***

## Hurtig start

Installer pakken:

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

Indsæt widgetten 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"
    />
  )
}
```

Det er det. Dine brugere ser en glasmorfisk opkaldsbjælke, der forbinder dem med din AI-agent med et enkelt klik.

***

## Tilpasning

Widgetten har fire props til udseende:

| Prop           | Standard                               | Beskrivelse                                                                         |
| -------------- | -------------------------------------- | ----------------------------------------------------------------------------------- |
| `theme`        | `'light'`                              | `'light'` til hvidt glas, `'dark'` til morkt glas                                   |
| `primaryColor` | `'#000000'` (lys) / `'#ffffff'` (mork) | Accentfarve til startknappen, bolgeformen og forbindelsesindikatoren                |
| `title`        | `'Voice assistant'`                    | Tekst, der vises i widgetten                                                        |
| `position`     | `'bottom-right'`                       | Hjorne i viewporten: `'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>

Yderligere tre props tilpasser sessionen frem for udseendet -- alle videresendes til sessionsanmodningen, nar et opkald starter:

| Prop       | Beskrivelse                                                                                            |
| ---------- | ------------------------------------------------------------------------------------------------------ |
| `language` | Sprogtilsidesættelse pr. session -- en kode eller landestandard som `en`, `es` eller `fr-FR`           |
| `voice`    | Stemmetilsidesættelse pr. session -- et stemmenavn som `maria`                                         |
| `context`  | Faktuel side- eller webstedskontekst, der sendes til agenten (afkortes pa serversiden til 12.000 tegn) |

Se [React-komponentreferencen](/da/widget/react) for den komplette propstabel.

Brug [headless-hooket](/da/widget/headless-hook) til at administrere stemmesessionen, mens du bygger din egen grænseflade, hvis du vil have et fuldt tilpasset UI. Hooket eksponerer lydniveauer i realtid til opbygning af lydreaktive visualiseringer.

***

## Integrationsmuligheder

Vælg den integrationsmetode, der passer til din stack:

<CardGroup cols={3}>
  <Card title="React-komponent" icon="react" href="/da/widget/react">
    Færdigbygget UI-komponent med indbyggede opkaldskontroller og statusvisning. Importer, angiv props, færdig.
  </Card>

  <Card title="Headless-hook" icon="code" href="/da/widget/headless-hook">
    Fuld kontrol over brugergrænsefladen. Hooket `useThunderPhone` administrerer stemmesessionen, mens du bygger din egen brugergrænseflade.
  </Card>

  <Card title="CDN / script-tag" icon="globe" href="/da/widget/cdn-script-tag">
    Ingen bundler nødvendig. Indlæs widgetten via et script-tag til statiske websites, WordPress og andre ikke-React-miljøer.
  </Card>
</CardGroup>

***

## Styling

Widgetten leveres med indbyggede lyse og mørke temaer, der styres af proppen `theme`, samt en accentfarve, der styres af proppen `primaryColor`. For mere omfattende tilpasning kan du overskrive brugerdefinerede CSS-egenskaber og klasser. Se [stylingguiden](/da/widget/styling) for detaljer.

<Note>
  Brug for hjælp? Kontakt os på [support@thunderphone.com](mailto:support@thunderphone.com)
</Note>