---
title: "Уградиви виџет за гласовног агента"
description: "Додајте гласовног AI агента на било који веб-сајт са неколико редова кода"
---

Уградиви гласовни виџет ThunderPhone омогућава посетиоцима Вашег веб-сајта да разговарају са AI агентом директно из прегледача. Позив телефоном није потребан -- корисници кликну на дугме и започну гласовни разговор у реалном времену који покреће ThunderPhone.

Виџет се приказује као стакласта трака која се прилагођава светлим и тамним темама, са прилагодљивим акцентним бојама и позиционирањем. Дистрибуира се као npm пакет `@thunderphone/widget`, а доступан је и преко CDN-а за окружења без бандлера.

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

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

Пре уграђивања виџета, довршите ова три корака у [ThunderPhone контролној табли](https://app.thunderphone.com):

<Steps>
<Step title="Направите јавни API кључ">
  Идите на **Програмери** у подешавањима контролне табле и направите јавни кључ. Јавни кључеви почињу са `pk_live_` и безбедни су за укључивање у код на страни клијента.
</Step>

<Step title="Конфигуришите дозвољене домене">
  У истим подешавањима за Програмере додајте домене на којима ће виџет бити уграђен. `localhost` је увек дозвољен за развој. Подржани су џокер знакови (нпр. `*.example.com`).
</Step>

<Step title="Направите веб виџет">
  Идите на **Веб виџети** на контролној табли и направите виџет. Изаберите агента којег желите да изложите и јавни кључ који желите да користите. Агент се аутоматски одређује из конфигурације Вашег јавног кључа.
</Step>
</Steps>

<Warning>
  Јавни кључеви (`pk_live_...`) **нису** исти као Ваши тајни API токени. Јавни кључеви су намењени за употребу на страни клијента и ограничени су на сесије виџета на Вашим дозвољеним доменима. Никада не користите тајни API токен у коду на страни клијента.
</Warning>

---

## Брзи почетак

Инсталирајте пакет:

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

Додајте виџет у апликацију:

```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"
    />
  )
}
```

То је све. Корисници ће видети стакласту траку за позиве која их једним кликом повезује са Вашим AI агентом.

---

## Прилагођавање

Виџет има четири својства изгледа:

| Својство | Подразумевано | Опис |
|------|---------|-------------|
| `theme` | `'light'` | `'light'` за бело стакло, `'dark'` за тамно стакло |
| `primaryColor` | `'#000000'` (светло) / `'#ffffff'` (тамно) | Акцентна боја за дугме за покретање, таласни облик и индикатор повезивања |
| `title` | `'Voice assistant'` | Текст приказан у виџету |
| `position` | `'bottom-right'` | Угао прозора приказа: `'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>

Још три својства прилагођавају сесију, а не изглед -- сва се прослеђују захтеву за сесију када позив започне:

| Својство | Опис |
|------|-------------|
| `language` | Замена језика по сесији -- код или локалитет као што су `en`, `es` или `fr-FR` |
| `voice` | Замена гласа по сесији -- назив гласа као што је `maria` |
| `context` | Чињенични контекст странице или сајта прослеђен агенту (скраћује се на серверској страни на 12.000 знакова) |

Погледајте [референцу React компоненте](/sr/widget/react) за комплетну табелу својстава.

За потпуно прилагођени UI, користите [headless хук](/sr/widget/headless-hook) за управљање гласовном сесијом док правите сопствени интерфејс. Хук излаже нивое звука у реалном времену за израду визуелизација које реагују на звук.

---

## Опције интеграције

Изаберите метод интеграције који одговара вашем технолошком стеку:

<CardGroup cols={3}>
  <Card title="React компонента" icon="react" href="/sr/widget/react">
    Унапред израђена UI компонента са уграђеним контролама позива и приказом статуса. Увезите, проследите props, готово.
  </Card>
  <Card title="Headless Hook" icon="code" href="/sr/widget/headless-hook">
    Потпуна контрола над UI-јем. Hook `useThunderPhone` управља гласовном сесијом док израђујете сопствени интерфејс.
  </Card>
  <Card title="CDN / Script ознака" icon="globe" href="/sr/widget/cdn-script-tag">
    Није потребан bundler. Учитајте виџет путем script ознаке за статичке сајтове, WordPress и друга окружења која нису React.
  </Card>
</CardGroup>

---

## Стилизација

Виџет долази са уграђеним светлом и тамном темом којима управља prop `theme`, као и бојом акцента којом управља prop `primaryColor`. За детаљније прилагођавање можете заменити CSS прилагођена својства и класе. Погледајте [водич за стилизацију](/sr/widget/styling) за детаље.

<Note>
  Потребна вам је помоћ? Контактирајте нас на [support@thunderphone.com](mailto:support@thunderphone.com)
</Note>