---
title: "Ugradivi widget za glasovnog AI agenta"
description: "Dodajte glasovnog AI agenta na bilo koju web-stranicu s nekoliko redaka koda"
---

Ugradivi glasovni widget ThunderPhone omogućuje posjetiteljima vaše web-stranice da razgovaraju s AI agentom izravno iz preglednika. Nije potreban telefonski poziv -- korisnici kliknu gumb i započinju glasovni razgovor u stvarnom vremenu koji pokreće ThunderPhone.

Widget se prikazuje kao staklasta traka koja se prilagođava svijetlim i tamnim temama, uz prilagodljive naglasne boje i položaj. Distribuira se kao npm paket `@thunderphone/widget`, a dostupan je i putem CDN-a za okruženja bez bundlera.

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

## Preduvjeti

Prije ugradnje widgeta dovršite ova tri koraka u [nadzornoj ploči ThunderPhone](https://app.thunderphone.com):

<Steps>
<Step title="Izradite javni API ključ">
  Otvorite **Razvojni alati** u postavkama nadzorne ploče i izradite javni ključ. Javni ključevi počinju s `pk_live_` i sigurno ih je uključiti u kod na klijentskoj strani.
</Step>

<Step title="Konfigurirajte dopuštene domene">
  U istim postavkama za razvojne alate dodajte domene na kojima će widget biti ugrađen. `localhost` je uvijek dopušten za razvoj. Podržani su zamjenski znakovi (npr. `*.example.com`).
</Step>

<Step title="Izradite web-widget">
  Otvorite **Web-widgeti** na nadzornoj ploči i izradite widget. Odaberite agenta kojeg želite izložiti i javni ključ koji želite koristiti. Agent se automatski određuje iz konfiguracije vašeg javnog ključa.
</Step>
</Steps>

<Warning>
  Javni ključevi (`pk_live_...`) **nisu** isto što i vaši tajni API tokeni. Javni ključevi namijenjeni su upotrebi na klijentskoj strani i ograničeni su na sesije widgeta na vašim dopuštenim domenama. Nikada nemojte koristiti svoj tajni API token u kodu na klijentskoj strani.
</Warning>

---

## Brzi početak

Instalirajte paket:

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

Dodajte widget u svoju aplikaciju:

```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 sve. Vaši će korisnici vidjeti staklastu traku za pozive koja ih jednim klikom povezuje s vašim AI agentom.

---

## Prilagodba

Widget ima četiri svojstva izgleda:

| Svojstvo | Zadano | Opis |
|------|---------|-------------|
| `theme` | `'light'` | `'light'` za bijelo staklo, `'dark'` za tamno staklo |
| `primaryColor` | `'#000000'` (svijetlo) / `'#ffffff'` (tamno) | Naglasna boja gumba za pokretanje, valnog oblika i pokazatelja povezivanja |
| `title` | `'Voice assistant'` | Tekst prikazan u widgetu |
| `position` | `'bottom-right'` | Kut prikaza: `'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>

Još tri svojstva prilagođavaju sesiju, a ne izgled -- sva se prosljeđuju zahtjevu za sesiju kada poziv započne:

| Svojstvo | Opis |
|------|-------------|
| `language` | Nadjačavanje jezika po sesiji -- kôd ili lokalizacija kao što su `en`, `es` ili `fr-FR` |
| `voice` | Nadjačavanje glasa po sesiji -- naziv glasa kao što je `maria` |
| `context` | Činjenični kontekst stranice ili web-mjesta koji se prosljeđuje agentu (na poslužiteljskoj strani skraćuje se na 12.000 znakova) |

Pogledajte [referencu React komponente](/hr/widget/react) za potpunu tablicu svojstava.

Za potpuno prilagođeno korisničko sučelje upotrijebite [hook bez sučelja](/hr/widget/headless-hook) za upravljanje glasovnom sesijom dok izrađujete vlastito sučelje. Hook izlaže razine zvuka u stvarnom vremenu za izradu vizualizacija koje reagiraju na zvuk.

---

## Mogućnosti integracije

Odaberite način integracije koji odgovara vašem razvojnom okruženju:

<CardGroup cols={3}>
  <Card title="React komponenta" icon="react" href="/hr/widget/react">
    Unaprijed izrađena UI komponenta s ugrađenim kontrolama poziva i prikazom statusa. Uvezite, proslijedite propse i gotovo.
  </Card>
  <Card title="Headless Hook" icon="code" href="/hr/widget/headless-hook">
    Potpuna kontrola nad UI-jem. Hook `useThunderPhone` upravlja glasovnom sesijom dok vi izrađujete vlastito sučelje.
  </Card>
  <Card title="CDN / oznaka skripte" icon="globe" href="/hr/widget/cdn-script-tag">
    Nije potreban bundler. Učitajte widget putem oznake skripte za statične web-stranice, WordPress i druga okruženja koja nisu React.
  </Card>
</CardGroup>

---

## Stiliziranje

Widget dolazi s ugrađenim svijetlom i tamnom temom kojima upravlja prop `theme` te bojom naglaska kojom upravlja prop `primaryColor`. Za detaljniju prilagodbu možete nadjačati CSS prilagođena svojstva i klase. Pojedinosti potražite u [vodiču za stiliziranje](/hr/widget/styling).

<Note>
  Trebate pomoć? Obratite nam se na [support@thunderphone.com](mailto:support@thunderphone.com)
</Note>