---
title: "Ugradite web widget"
description: "Dodajte glasovnog agenta na svoju marketinšku stranicu ili stranicu za podršku jednom oznakom skripte — posjetitelji s njim razgovaraju izravno iz preglednika, bez potrebe za telefonskim brojem."
---

Web-widget vašim posjetiteljima web-mjesta omogućuje razgovor klikom za govor
s AI glasovnim agentom putem mikrofona preglednika. To je zaseban
JavaScript / React SDK s vlastitom [SDK referencom](/hr/widget/overview)
— ovaj vodič usredotočen je na postavljanje na strani ThunderPhonea koje widget treba.

<Note>
  Sve ovo možete učiniti bez cURL-a: stranica nadzorne ploče **Web-widgeti**
  (`/dashboard/web-widgets`) stvara widget, postavlja njegov način rada
  i agenta, upravlja dopuštenim domenama te vam daje isječak za ugradnju.
</Note>

## Preduvjeti

<Steps>
  <Step title="Stvorite agenta">
    Agent čiji će upit i glas pokretati sesiju widgeta. Postavite
    `widget_enabled: true` (zadana vrijednost).
  </Step>
  <Step title="Odaberite način usmjeravanja">
    - `mode="agent"` — jedan statični agent po ključu. Najjednostavnije.
    - `mode="webhook"` — vaš poslužitelj odabire agenta za svakog posjetitelja putem
      webhooka [`web.incoming`](/hr/webhooks/call-incoming). Upotrijebite ovo za
      prijavljene korisnike, A/B testove ili usmjeravanje po stranici.
  </Step>
  <Step title="Navedite dopuštene domene">
    Objavljivi ključevi vezani su uz izvor. Morate navesti svaki naziv hosta
    koji će ugraditi widget. `localhost` / `127.0.0.1` uvijek su
    dopušteni tijekom lokalnog razvoja.
  </Step>
</Steps>

## Stvorite objavljivi ključ

<CodeGroup>
```bash Static agent
curl -X POST https://api.thunderphone.com/v1/publishable-key \
  -H "Authorization: Bearer sk_live_YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "name":            "Marketing site (prod)",
    "mode":            "agent",
    "agent_id":        12,
    "allowed_domains": ["example.com", "*.example.com"]
  }'
```

```bash Dynamic via webhook
curl -X POST https://api.thunderphone.com/v1/publishable-key \
  -H "Authorization: Bearer sk_live_YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "name":            "Support (dynamic)",
    "mode":            "webhook",
    "webhook_url":     "https://example.com/thunderphone/widget-hook",
    "allowed_domains": ["support.example.com"]
  }'
```
</CodeGroup>

Odgovor uključuje `key` koji počinje s `pk_live_...`. **Objavljivi
ključevi javni su po dizajnu** — sigurno ih je uključiti u paket vašeg
sučelja. Pogledajte [referencu objavljivih ključeva](/api-reference/publishable-keys) za
sva polja.

<Warning>
  `allowed_domains` mora sadržavati barem jedan unos. `*.example.com`
  podudara se s poddomenama (npr. `api.example.com`), ali **ne** i s
  osnovnom domenom. Neograničeni zamjenski znakovi poput `*` ili `*.*` odbijaju se.
</Warning>

## Ugradite widget na svoje web-mjesto

Tri mogućnosti integracije obuhvaćene su u
[dokumentaciji SDK-a za widget](/hr/widget/overview):

<CardGroup cols={3}>
  <Card title="React komponenta" icon="react" href="/hr/widget/react">
    `<ThunderPhoneWidget publishableKey="pk_live_..." />`.
  </Card>
  <Card title="Hook bez sučelja" icon="circle-nodes" href="/hr/widget/headless-hook">
    `useThunderPhone()` za prilagođena sučelja.
  </Card>
  <Card title="CDN oznaka skripte" icon="code" href="/hr/widget/cdn-script-tag">
    `ThunderPhone.mount({...})` za web-mjesta bez alata za pakiranje.
  </Card>
</CardGroup>

Sve tri mogućnosti prihvaćaju isti `publishableKey` i prikazuju gumb mikrofona
te audioelement tijekom poziva.

`context` widgeta skraćuje se na 12.000 znakova (otprilike 3.400
tokena uobičajenog engleskog teksta) i uračunava se u
[doplatu za veličinu upita](/hr/guides/billing-and-topups).

## Webhookovi načina rada widgeta

Kada je `mode="webhook"`, ThunderPhone poziva vaš `webhook_url` pri svakom
početku sesije s teretom `web.incoming`. Vratite konfiguraciju agenta
koju želite pokrenuti za tog posjetitelja — slijedi istu
[shemu odgovora](/hr/webhooks/call-incoming) kao telefonski
pozivi:

```json
{
  "prompt":  "You are a VIP concierge for Jane Doe.",
  "voice":   "john",
  "product": "storm-base",
  "tools":   [ /* per-customer tools */ ]
}
```

U upit možete uključiti kontekst iz vlastite sesije (koji korisnik pregledava,
na kojoj se stranici nalazi) i mijenjati agente ovisno o postupnom uvođenju.

## Pratite sesije

Sesije widgeta prikazuju se u
[`GET /v1/calls`](/api-reference/calls#list-calls) s postavkom
`direction="widget"` — s istim transkriptom, snimkom, ocjenjivanjem i
naplatom kao i telefonski pozivi. Filtrirajte prema `direction` kako biste izradili nadzornu ploču samo za widget.

---

## Sljedeći koraci

<CardGroup cols={2}>
  <Card title="Referenca za Widget SDK" icon="window-maximize" href="/hr/widget/overview">
    Pojedinosti o integraciji za React / hook / CDN.
  </Card>
  <Card title="Dinamička konfiguracija po pozivu" icon="bolt" href="/hr/guides/dynamic-call-config">
    Implementirajte tijek `mode="webhook"` od početka do kraja.
  </Card>
  <Card title="Referenca za objavljive ključeve" icon="key" href="/api-reference/publishable-keys">
    Svako polje u resursu ključa.
  </Card>
  <Card title="API za sesije mikrofona" icon="microphone" href="/api-reference/mic-sessions">
    Preskočite widget; upravljajte LiveKitom izravno za prilagođena korisnička sučelja.
  </Card>
</CardGroup>