---
title: "Vložiteľný hlasový widget"
description: "Pridajte hlasového AI agenta na ľubovoľnú webovú stránku pomocou niekoľkých riadkov kódu"
---

Vložiteľný hlasový widget ThunderPhone umožňuje návštevníkom vašej webovej stránky hovoriť s hlasovým agentom AI priamo z prehliadača. Telefónny hovor nie je potrebný -- používatelia kliknú na tlačidlo a začnú hlasovú konverzáciu v reálnom čase podporovanú službou ThunderPhone.

Widget sa vykresľuje ako panel so skleneným vzhľadom, ktorý sa prispôsobuje svetlým a tmavým témam, s prispôsobiteľnými zvýrazňujúcimi farbami a umiestnením. Distribuuje sa ako balík npm `@thunderphone/widget` a je dostupný aj prostredníctvom CDN pre prostredia bez bundlera.

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

## Predpoklady

Pred vložením widgetu dokončite tieto tri kroky v [ThunderPhone Dashboard](https://app.thunderphone.com):

<Steps>
<Step title="Vytvorte publikovateľný kľúč API">
  Prejdite do sekcie **Vývojári** v nastaveniach dashboardu a vytvorte publikovateľný kľúč. Publikovateľné kľúče začínajú reťazcom `pk_live_` a je bezpečné ich zahrnúť do kódu na strane klienta.
</Step>

<Step title="Nakonfigurujte povolené domény">
  V rovnakých nastaveniach **Vývojári** pridajte domény, do ktorých bude widget vložený. `localhost` je vždy povolený na vývoj. Podporované sú zástupné znaky (napr. `*.example.com`).
</Step>

<Step title="Vytvorte webový widget">
  Prejdite do sekcie **Webové widgety** v dashboarde a vytvorte widget. Vyberte agenta, ktorého chcete sprístupniť, a publikovateľný kľúč, ktorý chcete použiť. Agent sa automaticky určí z konfigurácie vášho publikovateľného kľúča.
</Step>
</Steps>

<Warning>
  Publikovateľné kľúče (`pk_live_...`) **nie sú** rovnaké ako vaše tajné tokeny API. Publikovateľné kľúče sú určené na použitie na strane klienta a sú obmedzené na relácie widgetu vo vašich povolených doménach. Tajný token API nikdy nepoužívajte v kóde na strane klienta.
</Warning>

---

## Rýchly začiatok

Nainštalujte balík:

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

Pridajte widget do svojej aplikácie:

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

Hotovo. Vaši používatelia uvidia panel hovoru so skleneným vzhľadom, ktorý ich jediným kliknutím spojí s vaším hlasovým agentom AI.

---

## Prispôsobenie

Widget má štyri vlastnosti vzhľadu:

| Vlastnosť | Predvolené | Popis |
|------|---------|-------------|
| `theme` | `'light'` | `'light'` pre biele sklo, `'dark'` pre tmavé sklo |
| `primaryColor` | `'#000000'` (svetlá) / `'#ffffff'` (tmavá) | Zvýrazňujúca farba tlačidla spustenia, priebehu zvukovej vlny a indikátora pripájania |
| `title` | `'Voice assistant'` | Text zobrazený vo widgete |
| `position` | `'bottom-right'` | Roh výrezu: `'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>

Tri ďalšie vlastnosti prispôsobujú reláciu namiesto vzhľadu -- všetky sa pri začatí hovoru odovzdajú požiadavke na reláciu:

| Vlastnosť | Popis |
|------|-------------|
| `language` | Prepísanie jazyka pre konkrétnu reláciu -- kód alebo miestne nastavenie, napríklad `en`, `es` alebo `fr-FR` |
| `voice` | Prepísanie hlasu pre konkrétnu reláciu -- názov hlasu, napríklad `maria` |
| `context` | Faktický kontext stránky alebo webu odovzdaný agentovi (na strane servera skrátený na 12 000 znakov) |

Úplnú tabuľku vlastností nájdete v [referencii komponentu React](/sk/widget/react).

Pre úplne vlastné používateľské rozhranie použite [hook bez rozhrania](/sk/widget/headless-hook) na spravovanie hlasovej relácie pri vytváraní vlastného rozhrania. Hook poskytuje úrovne zvuku v reálnom čase na vytváranie vizualizácií reagujúcich na zvuk.

---

## Možnosti integrácie

Vyberte si spôsob integrácie, ktorý vyhovuje vášmu technologickému stacku:

<CardGroup cols={3}>
  <Card title="Komponent React" icon="react" href="/sk/widget/react">
    Predpripravený komponent používateľského rozhrania so vstavanými ovládacími prvkami hovoru a zobrazením stavu. Importujte, odovzdajte props a máte hotovo.
  </Card>
  <Card title="Headless hook" icon="code" href="/sk/widget/headless-hook">
    Úplná kontrola nad používateľským rozhraním. Hook `useThunderPhone` spravuje hlasovú reláciu, zatiaľ čo si vytvárate vlastné rozhranie.
  </Card>
  <Card title="CDN / značka script" icon="globe" href="/sk/widget/cdn-script-tag">
    Nie je potrebný bundler. Pre statické weby, WordPress a ďalšie prostredia mimo Reactu načítajte widget pomocou značky script.
  </Card>
</CardGroup>

---

## Štýlovanie

Widget obsahuje vstavané svetlé a tmavé témy ovládané propom `theme` a zvýrazňujúcu farbu ovládanú propom `primaryColor`. Pre rozsiahlejšie prispôsobenie môžete prepísať vlastné vlastnosti a triedy CSS. Podrobnosti nájdete v [príručke štýlovania](/sk/widget/styling).

<Note>
  Potrebujete pomoc? Kontaktujte nás na adrese [support@thunderphone.com](mailto:support@thunderphone.com)
</Note>