---
title: "Manustatav häälvidin"
description: "Lisa mõne koodireaga hääl-AI-agent mis tahes veebisaidile"
---

ThunderPhone'i manustatav häälvidin võimaldab sinu veebisaidi külastajatel rääkida AI-häälagendiga otse brauserist. Telefonikõnet pole vaja -- kasutajad klõpsavad nuppu ja alustavad ThunderPhone'i toel reaalajas häälevestlust.

Vidin kuvatakse klaasmorfse ribana, mis kohandub heledate ja tumedate teemadega ning mille aktsentvärve ja asukohta saab kohandada. Seda levitatakse npm-paketina `@thunderphone/widget` ning see on ilma bundlerita keskkondade jaoks saadaval ka CDN-i kaudu.

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

## Eeltingimused

Enne vidina manustamist tee [ThunderPhone Dashboardis](https://app.thunderphone.com) need kolm sammu:

<Steps>
<Step title="Loo avalik API-võti">
  Ava juhtpaneeli seadetes **Arendajad** ja loo avalik võti. Avalikud võtmed algavad prefiksiga `pk_live_` ning neid on turvaline lisada kliendipoolsesse koodi.
</Step>

<Step title="Seadista lubatud domeenid">
  Lisa samades Arendajate seadetes domeenid, kuhu vidin manustatakse. Arenduseks on `localhost` alati lubatud. Metamärgid on toetatud (nt `*.example.com`).
</Step>

<Step title="Loo veebividin">
  Ava juhtpaneelil **Veebividinad** ja loo vidin. Vali häälagent, mille soovid avaldada, ning kasutatav avalik võti. Häälagent määratakse automaatselt sinu avaliku võtme seadistuse põhjal.
</Step>
</Steps>

<Warning>
  Avalikud võtmed (`pk_live_...`) ei ole **samad** mis sinu salajased API-tokenid. Avalikud võtmed on mõeldud kliendipoolseks kasutamiseks ning piiratud vidinaseanssidega sinu lubatud domeenides. Ära kunagi kasuta salajast API-tokenit kliendipoolses koodis.
</Warning>

---

## Kiirstart

Installi pakett:

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

Lisa vidin oma rakendusse:

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

Valmis. Sinu kasutajad näevad klaasmorfset kõneriba, mis ühendab nad ühe klõpsuga sinu AI-häälagendiga.

---

## Kohandamine

Vidinal on neli välimuse atribuuti:

| Atribuut | Vaikeväärtus | Kirjeldus |
|------|---------|-------------|
| `theme` | `'light'` | `'light'` valge klaasi jaoks, `'dark'` tumeda klaasi jaoks |
| `primaryColor` | `'#000000'` (hele) / `'#ffffff'` (tume) | Aktsentvärv alustamisnupu, lainekuju ja ühendamise indikaatori jaoks |
| `title` | `'Voice assistant'` | Vidinas kuvatav tekst |
| `position` | `'bottom-right'` | Vaateakna nurk: `'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>

Veel kolm atribuuti kohandavad välimuse asemel seanssi -- kõik need edastatakse kõne algamisel seansipäringusse:

| Atribuut | Kirjeldus |
|------|-------------|
| `language` | Seansipõhine keele ülekirjutus -- kood või lokaat, näiteks `en`, `es` või `fr-FR` |
| `voice` | Seansipõhine hääle ülekirjutus -- hääle nimi, näiteks `maria` |
| `context` | Häälagendile edastatav faktiline lehe või saidi kontekst (serveris kärbitakse 12 000 märgini) |

Täieliku atribuutide tabeli leiad [Reacti komponendi viitest](/et/widget/react).

Täielikult kohandatud kasutajaliidese jaoks kasuta [headless-hooki](/et/widget/headless-hook), et hallata hääleseanssi oma liidese loomise ajal. Hook pakub reaalajas helitasemeid helile reageerivate visualiseeringute loomiseks.

---

## Integratsioonivalikud

Vali sinu tehnoloogiakomplektiga sobiv integratsioonimeetod:

<CardGroup cols={3}>
  <Card title="Reacti komponent" icon="react" href="/et/widget/react">
    Valmis UI-komponent sisseehitatud kõnejuhtnuppude ja olekunäiduga. Impordi, edasta rekvisiidid ja valmis.
  </Card>
  <Card title="Headless Hook" icon="code" href="/et/widget/headless-hook">
    Täielik kontroll kasutajaliidese üle. Hook `useThunderPhone` haldab häälseanssi, samal ajal kui ehitad oma liidest.
  </Card>
  <Card title="CDN / skriptisilt" icon="globe" href="/et/widget/cdn-script-tag">
    Paketihaldurit pole vaja. Laadi vidin skriptisildi kaudu staatilistele saitidele, WordPressi ja muudesse mitte-Reacti keskkondadesse.
  </Card>
</CardGroup>

---

## Stiilimine

Vidinal on sisseehitatud heledad ja tumedad teemad, mida juhib rekvisiit `theme`, ning aktsentvärv, mida juhib rekvisiit `primaryColor`. Põhjalikumaks kohandamiseks saad alistada CSS-i kohandatud omadusi ja klasse. Lisateavet leiad [stiilimise juhendist](/et/widget/styling).

<Note>
  Vajad abi? Võta meiega ühendust aadressil [support@thunderphone.com](mailto:support@thunderphone.com)
</Note>