> ## Documentation Index
> Fetch the complete documentation index at: https://docs.thunderphone.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Vložitelný hlasový widget

> Přidejte hlasového AI agenta na libovolný web pomocí několika řádků kódu

Vložitelný hlasový widget ThunderPhone umožňuje návštěvníkům vašeho webu mluvit s AI agentem přímo z prohlížeče. Není potřeba žádný telefonní hovor – uživatelé kliknou na tlačítko a zahájí hlasovou konverzaci v reálném čase využívající ThunderPhone.

Widget se zobrazuje jako skleněná lišta, která se přizpůsobí světlým a tmavým motivům, s přizpůsobitelnými barvami zvýraznění a umístěním. Je distribuován jako balíček npm `@thunderphone/widget` a pro prostředí bez bundleru je k dispozici také prostřednictvím CDN.

<Frame>
  <img src="https://mintcdn.com/thunderphone/4XhPaCl4RGfyS7_M/images/widget-showcase.png?fit=max&auto=format&n=4XhPaCl4RGfyS7_M&q=85&s=17fea4fe853f3548b9b2628c9d4c4fc0" alt="Widget ThunderPhone ve světlém a tmavém motivu s různými barvami zvýraznění" width="1200" height="800" data-path="images/widget-showcase.png" />
</Frame>

## Předpoklady

Před vložením widgetu dokončete tyto tři kroky v [Dashboardu ThunderPhone](https://app.thunderphone.com):

<Steps>
  <Step title="Vytvořte veřejně použitelný klíč API">
    V nastavení dashboardu přejděte do sekce **Vývojáři** a vytvořte veřejně použitelný klíč. Veřejně použitelné klíče začínají na `pk_live_` a lze je bezpečně zahrnout do kódu na straně klienta.
  </Step>

  <Step title="Nakonfigurujte povolené domény">
    Ve stejném nastavení sekce Vývojáři přidejte domény, na kterých bude widget vložen. Pro vývoj je vždy povolena doména `localhost`. Jsou podporovány zástupné znaky (např. `*.example.com`).
  </Step>

  <Step title="Vytvořte webový widget">
    V dashboardu přejděte do sekce **Webové widgety** a vytvořte widget. Vyberte agenta, kterého chcete zpřístupnit, a veřejně použitelný klíč, který chcete použít. Agent se automaticky určí z konfigurace vašeho veřejně použitelného klíče.
  </Step>
</Steps>

<Warning>
  Veřejně použitelné klíče (`pk_live_...`) **nejsou** stejné jako vaše tajné tokeny API. Veřejně použitelné klíče jsou určeny pro použití na straně klienta a jsou omezeny na relace widgetu na vašich povolených doménách. Tajný token API nikdy nepoužívejte v kódu na straně klienta.
</Warning>

***

## Rychlý start

Nainstalujte balíček:

```bash theme={null}
npm install @thunderphone/widget
```

Vložte widget do aplikace:

```tsx theme={null}
import { ThunderPhoneWidget } from '@thunderphone/widget'
import '@thunderphone/widget/style.css'

function App() {
  return (
    <ThunderPhoneWidget
      publishableKey="pk_live_your_publishable_key"
      theme="dark"
      primaryColor="#8b5cf6"
    />
  )
}
```

To je vše. Uživatelé uvidí skleněnou lištu pro volání, která je jedním kliknutím spojí s vaším AI agentem.

***

## Přizpůsobení

Widget má čtyři vlastnosti vzhledu:

| Vlastnost      | Výchozí hodnota                            | Popis                                                                                   |
| -------------- | ------------------------------------------ | --------------------------------------------------------------------------------------- |
| `theme`        | `'light'`                                  | `'light'` pro bílé sklo, `'dark'` pro tmavé sklo                                        |
| `primaryColor` | `'#000000'` (světlý) / `'#ffffff'` (tmavý) | Barva zvýraznění pro tlačítko spuštění, průběh zvukové vlny a indikátor připojování     |
| `title`        | `'Voice assistant'`                        | Text zobrazený ve widgetu                                                               |
| `position`     | `'bottom-right'`                           | Roh zobrazovací oblasti: `'bottom-right'`, `'bottom-left'`, `'top-right'`, `'top-left'` |

<CodeGroup>
  ```tsx Light theme (default) theme={null}
  <ThunderPhoneWidget
    publishableKey="pk_live_your_publishable_key"
  />
  ```

  ```tsx Dark theme with custom color theme={null}
  <ThunderPhoneWidget
    publishableKey="pk_live_your_publishable_key"
    theme="dark"
    primaryColor="#8b5cf6"
    title="Ask our AI"
  />
  ```
</CodeGroup>

Další tři vlastnosti přizpůsobují relaci namísto vzhledu – všechny se při zahájení hovoru předávají do požadavku relace:

| Vlastnost  | Popis                                                                                                  |
| ---------- | ------------------------------------------------------------------------------------------------------ |
| `language` | Přepsání jazyka pro jednotlivou relaci – kód nebo národní prostředí, například `en`, `es` nebo `fr-FR` |
| `voice`    | Přepsání hlasu pro jednotlivou relaci – název hlasu, například `maria`                                 |
| `context`  | Faktický kontext stránky nebo webu předaný agentovi (na straně serveru zkrácený na 12 000 znaků)       |

Úplnou tabulku vlastností naleznete v [referenci komponenty React](/cs/widget/react).

Pro zcela vlastní uživatelské rozhraní použijte [headless hook](/cs/widget/headless-hook) ke správě hlasové relace při vytváření vlastního rozhraní. Hook zpřístupňuje úrovně zvuku v reálném čase pro vytváření vizualizací reagujících na zvuk.

***

## Možnosti integrace

Zvolte způsob integrace, který vyhovuje vašemu stacku:

<CardGroup cols={3}>
  <Card title="Komponenta React" icon="react" href="/cs/widget/react">
    Předpřipravená komponenta uživatelského rozhraní s integrovanými ovládacími prvky hovoru a zobrazením stavu. Importujte, předejte props a máte hotovo.
  </Card>

  <Card title="Headless hook" icon="code" href="/cs/widget/headless-hook">
    Úplná kontrola nad uživatelským rozhraním. Hook `useThunderPhone` spravuje hlasovou relaci, zatímco si vytváříte vlastní rozhraní.
  </Card>

  <Card title="CDN / značka script" icon="globe" href="/cs/widget/cdn-script-tag">
    Není vyžadován bundler. Načtěte widget pomocí značky script pro statické weby, WordPress a další prostředí mimo React.
  </Card>
</CardGroup>

***

## Stylování

Widget nabízí integrovaná světlá a tmavá témata ovládaná pomocí prop `theme` a zvýrazňující barvu ovládanou pomocí prop `primaryColor`. Pro pokročilejší přizpůsobení můžete přepsat vlastní vlastnosti a třídy CSS. Podrobnosti naleznete v [průvodci stylováním](/cs/widget/styling).

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