---
title: "Vdeljiv glasovni pripomoček"
description: "Dodajte glasovnega agenta z umetno inteligenco na katero koli spletno mesto z nekaj vrsticami kode"
---

Vdeljivi glasovni pripomoček ThunderPhone obiskovalcem vašega spletnega mesta omogoča, da se z agentom UI pogovarjajo neposredno iz brskalnika. Telefonski klic ni potreben -- uporabniki kliknejo gumb in začnejo glasovni pogovor v realnem času, ki ga omogoča ThunderPhone.

Pripomoček se prikaže kot steklena vrstica, ki se prilagaja svetlim in temnim temam ter omogoča prilagodljive poudarjene barve in položaj. Distribuira se kot paket npm `@thunderphone/widget`, za okolja brez združevalnika pa je na voljo tudi prek CDN-ja.

<Frame>
  <img src="/images/widget-showcase.png" alt="Pripomoček ThunderPhone v svetli in temni temi z različnimi poudarjenimi barvami" />
</Frame>

## Predpogoji

Pred vdelavo pripomočka v [nadzorni plošči ThunderPhone](https://app.thunderphone.com) dokončajte te tri korake:

<Steps>
<Step title="Ustvarite ključ API za objavo">
  V nastavitvah nadzorne plošče odprite **Razvijalci** in ustvarite ključ za objavo. Ključi za objavo se začnejo s `pk_live_` in jih lahko varno vključite v kodo na strani odjemalca.
</Step>

<Step title="Konfigurirajte dovoljene domene">
  V istih nastavitvah **Razvijalci** dodajte domene, na katerih bo pripomoček vdelan. `localhost` je vedno dovoljen za razvoj. Podprti so nadomestni znaki (na primer `*.example.com`).
</Step>

<Step title="Ustvarite spletni pripomoček">
  Na nadzorni plošči odprite **Spletni pripomočki** in ustvarite pripomoček. Izberite agenta, ki ga želite izpostaviti, ter ključ za objavo, ki ga želite uporabiti. Agent se samodejno določi iz konfiguracije vašega ključa za objavo.
</Step>
</Steps>

<Warning>
  Ključi za objavo (`pk_live_...`) **niso** enaki vašim skrivnim žetonom API. Ključi za objavo so zasnovani za uporabo na strani odjemalca in so omejeni na seje pripomočka v vaših dovoljenih domenah. Skrivnega žetona API nikoli ne uporabljajte v kodi na strani odjemalca.
</Warning>

---

## Hiter začetek

Namestite paket:

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

Dodajte pripomoček v svojo aplikacijo:

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

To je vse. Vaši uporabniki bodo videli stekleno vrstico za klic, ki jih z enim klikom poveže z vašim agentom UI.

---

## Prilagajanje

Pripomoček ima štiri lastnosti videza:

| Lastnost | Privzeto | Opis |
|------|---------|-------------|
| `theme` | `'light'` | `'light'` za belo steklo, `'dark'` za temno steklo |
| `primaryColor` | `'#000000'` (svetla) / `'#ffffff'` (temna) | Poudarjena barva za gumb za začetek, valovno obliko in indikator povezovanja |
| `title` | `'Voice assistant'` | Besedilo, prikazano v pripomočku |
| `position` | `'bottom-right'` | Kot vidnega polja: `'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>

Še tri lastnosti prilagajajo sejo namesto videza -- vse se ob začetku klica posredujejo zahtevi za sejo:

| Lastnost | Opis |
|------|-------------|
| `language` | Preglasitev jezika za posamezno sejo -- koda ali področne nastavitve, kot so `en`, `es` ali `fr-FR` |
| `voice` | Preglasitev glasu za posamezno sejo -- ime glasu, kot je `maria` |
| `context` | Dejanski kontekst strani ali spletnega mesta, posredovan agentu (na strežniški strani skrajšan na 12.000 znakov) |

Za celotno tabelo lastnosti glejte [referenco komponente React](/sl/widget/react).

Za popolnoma prilagojen uporabniški vmesnik uporabite [headless hook](/sl/widget/headless-hook) za upravljanje glasovne seje, medtem ko izdelujete svoj vmesnik. Hook omogoča dostop do ravni zvoka v realnem času za izdelavo vizualizacij, odzivnih na zvok.

---

## Možnosti integracije

Izberite način integracije, ki ustreza vašemu okolju:

<CardGroup cols={3}>
  <Card title="Komponenta React" icon="react" href="/sl/widget/react">
    Vnaprej izdelana komponenta uporabniškega vmesnika z vgrajenimi kontrolniki klicev in prikazom stanja. Uvozite, posredujte lastnosti in končano.
  </Card>
  <Card title="Brezglavi kavelj" icon="code" href="/sl/widget/headless-hook">
    Popoln nadzor nad uporabniškim vmesnikom. Kavelj `useThunderPhone` upravlja glasovno sejo, vi pa izdelate svoj vmesnik.
  </Card>
  <Card title="CDN / oznaka skripta" icon="globe" href="/sl/widget/cdn-script-tag">
    Paketnik ni potreben. Gradnik naložite prek oznake skripta za statična spletna mesta, WordPress in druga okolja, ki ne uporabljajo Reacta.
  </Card>
</CardGroup>

---

## Slog

Gradnik vključuje vgrajeni svetlo in temno temo, ki ju nadzoruje lastnost `theme`, ter poudarno barvo, ki jo nadzoruje lastnost `primaryColor`. Za podrobnejšo prilagoditev lahko preglasite lastnosti CSS po meri in razrede. Za podrobnosti si oglejte [vodnik za oblikovanje](/sl/widget/styling).

<Note>
  Potrebujete pomoč? Obrnite se na nas na [support@thunderphone.com](mailto:support@thunderphone.com)
</Note>