---
title: "Vloženie webového widgetu"
description: "Pridajte hlasového agenta na svoj marketingový alebo podporný web jediným značkou script — návštevníci s ním hovoria priamo z prehliadača, bez potreby telefónneho čísla."
---

Webový widget umožňuje návštevníkom vašej stránky konverzáciu po kliknutí na hovor
s hlasovým agentom AI pomocou mikrofónu prehliadača. Ide o samostatné
JavaScript / React SDK s vlastnou [referenciou SDK](/sk/widget/overview)
— táto príručka sa zameriava na nastavenie na strane ThunderPhone, ktoré widget potrebuje.

<Note>
  Toto všetko môžete vykonať bez cURL: stránka ovládacieho panela **Webové widgety**
  (`/dashboard/web-widgets`) vytvorí widget, nastaví jeho režim
  a agenta, spravuje povolené domény a poskytne vám úryvok na vloženie.
</Note>

## Požiadavky

<Steps>
  <Step title="Vytvorte agenta">
    Agent, ktorého pokyn a hlas budú použité počas relácie widgetu. Nastavte
    `widget_enabled: true` (predvolená hodnota).
  </Step>
  <Step title="Rozhodnite o režime smerovania">
    - `mode="agent"` — jeden statický agent pre každý kľúč. Najjednoduchšie riešenie.
    - `mode="webhook"` — váš server vyberie agenta pre každého návštevníka prostredníctvom
      webhooku [`web.incoming`](/sk/webhooks/call-incoming). Tento režim použite pre
      prihlásených používateľov, A/B testy alebo smerovanie podľa stránky.
  </Step>
  <Step title="Uveďte povolené domény">
    Publikovateľné kľúče sú viazané na pôvod. Musíte uviesť každý názov hostiteľa,
    ktorý bude vkladať widget. `localhost` / `127.0.0.1` sú počas lokálneho vývoja
    vždy povolené.
  </Step>
</Steps>

## Vytvorte publikovateľný kľúč

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

Odpoveď obsahuje `key` začínajúci na `pk_live_...`. **Publikovateľné
kľúče sú verejné už svojím návrhom** — môžete ich bezpečne zahrnúť do balíka front-endu.
Všetky polia nájdete v [referencii publikovateľných kľúčov](/api-reference/publishable-keys).

<Warning>
  `allowed_domains` musí obsahovať aspoň jednu položku. `*.example.com`
  zodpovedá subdoménam (napr. `api.example.com`), ale **nie** samotnej
  doméne. Samostatné zástupné znaky ako `*` alebo `*.*` sú odmietnuté.
</Warning>

## Vložte widget na svoju stránku

V [dokumentácii SDK widgetu](/sk/widget/overview) sú popísané tri
možnosti integrácie:

<CardGroup cols={3}>
  <Card title="Komponent React" icon="react" href="/sk/widget/react">
    `<ThunderPhoneWidget publishableKey="pk_live_..." />`.
  </Card>
  <Card title="Headless hook" icon="circle-nodes" href="/sk/widget/headless-hook">
    `useThunderPhone()` pre vlastné používateľské rozhrania.
  </Card>
  <Card title="Značka skriptu CDN" icon="code" href="/sk/widget/cdn-script-tag">
    `ThunderPhone.mount({...})` pre stránky bez bundlera.
  </Card>
</CardGroup>

Všetky tri prijímajú rovnaký `publishableKey` a vykreslia tlačidlo mikrofónu
spolu so zvukovým prvkom počas hovoru.

Parameter `context` widgetu je skrátený na 12 000 znakov (približne 3 400
tokenov bežného anglického textu) a započítava sa do
[príplatku za veľkosť pokynu](/sk/guides/billing-and-topups).

## Webhooky režimu widgetu

Keď je nastavené `mode="webhook"`, ThunderPhone zavolá váš `webhook_url` pri každom
spustení relácie s dátami `web.incoming`. Vráťte konfiguráciu agenta,
ktorú chcete pre daného návštevníka spustiť — používa rovnakú
[schému odpovede](/sk/webhooks/call-incoming) ako telefónne
hovory:

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

Do pokynu môžete pridať kontext z vlastnej relácie (ktorý zákazník prezerá obsah,
na ktorej stránke sa nachádza) a pri každom nasadení meniť agentov.

## Sledujte relácie

Relácie widgetu sa zobrazujú v
[`GET /v1/calls`](/api-reference/calls#list-calls) s
`direction="widget"` — s rovnakým prepisom, nahrávkou, hodnotením a
fakturáciou ako telefonické hovory. Filtrujte podľa `direction` a vytvorte si
dashboard iba pre widget.

---

## Ďalšie kroky

<CardGroup cols={2}>
  <Card title="Referenčná dokumentácia SDK widgetu" icon="window-maximize" href="/sk/widget/overview">
    Podrobnosti integrácie Reactu / hookov / CDN.
  </Card>
  <Card title="Dynamická konfigurácia pre každý hovor" icon="bolt" href="/sk/guides/dynamic-call-config">
    Implementujte tok `mode="webhook"` od začiatku do konca.
  </Card>
  <Card title="Referenčná dokumentácia publikovateľných kľúčov" icon="key" href="/api-reference/publishable-keys">
    Každé pole v prostriedku kľúča.
  </Card>
  <Card title="API relácií mikrofónu" icon="microphone" href="/api-reference/mic-sessions">
    Preskočte widget; pre vlastné používateľské rozhrania ovládajte LiveKit priamo.
  </Card>
</CardGroup>