---
title: "Vdelajte spletni gradnik"
description: "Dodajte glasovnega agenta na svoje trženjsko ali podporno spletno mesto z eno samo oznako skripta — obiskovalci se z njim pogovarjajo neposredno iz brskalnika, telefonska številka ni potrebna."
---

Spletni gradnik obiskovalcem vašega spletnega mesta omogoča pogovor s klikom za pogovor
z agentom AI prek mikrofona v brskalniku. Gre za ločen
JavaScript / React SDK z lastno [referenco SDK](/sl/widget/overview)
— ta vodnik se osredotoča na nastavitev na strani ThunderPhone, ki jo gradnik potrebuje.

<Note>
  Vse to lahko naredite brez cURL: stran nadzorne plošče **Spletni gradniki**
  (`/dashboard/web-widgets`) ustvari gradnik, nastavi njegov način
  in agenta, upravlja dovoljene domene ter vam posreduje izrezek za vdelavo.
</Note>

## Predpogoji

<Steps>
  <Step title="Ustvarite agenta">
    Agent, katerega poziv in glas bosta uporabljena v seji gradnika. Nastavite
    `widget_enabled: true` (privzeto).
  </Step>
  <Step title="Odločite se za način usmerjanja">
    - `mode="agent"` — en statični agent na ključ. Najenostavneje.
    - `mode="webhook"` — vaš strežnik izbere agenta za vsakega obiskovalca prek
      [`web.incoming` webhooka](/sl/webhooks/call-incoming). To uporabite za
      prijavljene uporabnike, A/B-teste ali usmerjanje po posameznih straneh.
  </Step>
  <Step title="Navedite dovoljene domene">
    Objavljivi ključi so vezani na izvor. Navesti morate vsako ime gostitelja,
    ki bo vdelalo gradnik. `localhost` / `127.0.0.1` sta med lokalnim razvojem
    vedno dovoljena.
  </Step>
</Steps>

## Ustvarite 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 vključuje `key`, ki se začne z `pk_live_...`. **Objavljivi
ključi so javni že po zasnovi** — varno jih lahko vključite v paket
frontenda. Za vsa polja glejte [referenco objavljivih ključev](/api-reference/publishable-keys).

<Warning>
  `allowed_domains` mora vsebovati vsaj en vnos. `*.example.com`
  se ujema s poddomenami (npr. `api.example.com`), vendar **ne** z golo
  domeno. Goli nadomestni znaki, kot sta `*` ali `*.*`, so zavrnjeni.
</Warning>

## Dodajte gradnik na svoje spletno mesto

V [dokumentaciji SDK za gradnik](/sl/widget/overview) so obravnavane tri
možnosti integracije:

<CardGroup cols={3}>
  <Card title="Komponenta React" icon="react" href="/sl/widget/react">
    `<ThunderPhoneWidget publishableKey="pk_live_..." />`.
  </Card>
  <Card title="Brezglavi hook" icon="circle-nodes" href="/sl/widget/headless-hook">
    `useThunderPhone()` za uporabniške vmesnike po meri.
  </Card>
  <Card title="Oznaka skripta CDN" icon="code" href="/sl/widget/cdn-script-tag">
    `ThunderPhone.mount({...})` za spletna mesta brez paketnika.
  </Card>
</CardGroup>

Vse tri možnosti sprejmejo isti `publishableKey` in prikažejo gumb za mikrofon
ter zvočni element med klicem.

`context` gradnika je skrajšan na 12.000 znakov (približno 3.400
žetonov običajnega angleškega besedila) in se upošteva pri
[doplačilu za velikost poziva](/sl/guides/billing-and-topups).

## Webhooki načina gradnika

Ko je `mode="webhook"`, ThunderPhone ob vsakem začetku seje pokliče vaš
`webhook_url` s koristnim tovorom `web.incoming`. Vrnite konfiguracijo
agenta, ki jo želite zagnati za tega obiskovalca — uporablja isto
[odzivno shemo](/sl/webhooks/call-incoming) kot telefonski
klici:

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

V poziv lahko vključite kontekst iz lastne seje (katera stranka brska,
na kateri strani je) in menjate agente za posamezne uvedbe.

## Spremljajte seje

Seje gradnika se prikažejo v
[`GET /v1/calls`](/api-reference/calls#list-calls) z
`direction="widget"` — z enakim prepisom, posnetkom, ocenjevanjem in
obračunavanjem kot telefonski klici. Filtrirajte po `direction`, da ustvarite nadzorno ploščo samo za gradnik.

---

## Naslednji koraki

<CardGroup cols={2}>
  <Card title="Referenca SDK za gradnik" icon="window-maximize" href="/sl/widget/overview">
    Podrobnosti integracije React / hook / CDN.
  </Card>
  <Card title="Dinamična konfiguracija za posamezen klic" icon="bolt" href="/sl/guides/dynamic-call-config">
    Implementirajte tok `mode="webhook"` od začetka do konca.
  </Card>
  <Card title="Referenca objavljivih ključev" icon="key" href="/api-reference/publishable-keys">
    Vsako polje v viru ključa.
  </Card>
  <Card title="API sej mikrofona" icon="microphone" href="/api-reference/mic-sessions">
    Preskočite gradnik; za uporabniške vmesnike po meri neposredno upravljajte LiveKit.
  </Card>
</CardGroup>