---
title: "Уградите веб виџет"
description: "Додајте гласовног агента на свој маркетиншки сајт или сајт за подршку помоћу једне ознаке скрипте — посетиоци разговарају с њим директно из прегледача, без потребе за бројем телефона."
---

Веб-виџет посетиоцима Вашег сајта пружа разговор на клик са
AI гласовним агентом, користећи микрофон прегледача. То је засебан
JavaScript / React SDK са сопственом [SDK референцом](/sr/widget/overview)
— овај водич се фокусира на подешавање на страни ThunderPhone које је виџету потребно.

<Note>
  Све ово можете да урадите без cURL-а: страница контролне табле **Веб-виџети**
  (`/dashboard/web-widgets`) креира виџет, поставља његов режим
  и агента, управља дозвољеним доменима и даје Вам исечак за уграђивање.
</Note>

## Предуслови

<Steps>
  <Step title="Креирајте агента">
    Агент чији ће упит и глас покретати сесију виџета. Поставите
    `widget_enabled: true` (подразумевана вредност).
  </Step>
  <Step title="Одлучите о режиму усмеравања">
    - `mode="agent"` — један статички агент по кључу. Најједноставније.
    - `mode="webhook"` — Ваш сервер бира агента за сваког посетиоца путем
      [`web.incoming` веб-хука](/sr/webhooks/call-incoming). Користите ово за
      пријављене кориснике, A/B тестове или усмеравање по страници.
  </Step>
  <Step title="Наведите дозвољене домене">
    Јавни кључеви су везани за извор. Морате навести свако име хоста
    које ће уградити виџет. `localhost` / `127.0.0.1` су увек
    дозвољени током локалног развоја.
  </Step>
</Steps>

## Креирајте јавни кључ

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

Одговор укључује `key` који почиње са `pk_live_...`. **Јавни
кључеви су по дизајну јавни** — безбедно их је укључити у пакет Вашег
клијентског дела. Погледајте [референцу јавних кључева](/api-reference/publishable-keys) за
сва поља.

<Warning>
  `allowed_domains` мора да садржи најмање један унос. `*.example.com`
  одговара поддоменима (нпр. `api.example.com`), али **не** и основном
  домену. Основни џокер-знакови као `*` или `*.*` се одбијају.
</Warning>

## Додајте виџет на свој сајт

Три опције интеграције обухваћене су у
[документацији SDK-а за виџет](/sr/widget/overview):

<CardGroup cols={3}>
  <Card title="React компонента" icon="react" href="/sr/widget/react">
    `<ThunderPhoneWidget publishableKey="pk_live_..." />`.
  </Card>
  <Card title="Headless кука" icon="circle-nodes" href="/sr/widget/headless-hook">
    `useThunderPhone()` за прилагођене интерфејсе.
  </Card>
  <Card title="CDN ознака скрипте" icon="code" href="/sr/widget/cdn-script-tag">
    `ThunderPhone.mount({...})` за сајтове без пакера.
  </Card>
</CardGroup>

Сва три прихватају исти `publishableKey` и приказују дугме микрофона
и аудио елемент током позива.

`context` виџета се скраћује на 12.000 знакова (приближно 3.400
токена у типичном енглеском тексту) и урачунава се у
[доплату за величину упита](/sr/guides/billing-and-topups).

## Веб-хукови у режиму виџета

Када је `mode="webhook"`, ThunderPhone позива Ваш `webhook_url` при сваком
покретању сесије са `web.incoming` садржајем. Вратите конфигурацију
агента коју желите да покренете за тог посетиоца — она прати исту
[шему одговора](/sr/webhooks/call-incoming) као телефонски
позиви:

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

Можете у упит укључити контекст из сопствене сесије (који клијент прегледа,
на којој је страници) и мењати агенте по фазама увођења.

## Пратите сесије

Сесије виџета се појављују у
[`GET /v1/calls`](/api-reference/calls#list-calls) са
`direction="widget"` — са истим транскриптом, снимком, оцењивањем и
наплатом као и телефонски позиви. Филтрирајте по `direction` да бисте направили контролну таблу само за виџет.

---

## Следећи кораци

<CardGroup cols={2}>
  <Card title="Референца за SDK виџета" icon="window-maximize" href="/sr/widget/overview">
    Детаљи интеграције са React-ом, hook-овима и CDN-ом.
  </Card>
  <Card title="Динамичка конфигурација по позиву" icon="bolt" href="/sr/guides/dynamic-call-config">
    Имплементирајте ток `mode="webhook"` од почетка до краја.
  </Card>
  <Card title="Референца за објављиве кључеве" icon="key" href="/api-reference/publishable-keys">
    Свако поље у ресурсу кључа.
  </Card>
  <Card title="API за сесије микрофона" icon="microphone" href="/api-reference/mic-sessions">
    Прескочите виџет; користите LiveKit директно за прилагођене корисничке интерфејсе.
  </Card>
</CardGroup>