---
title: "Įterpiamas balso valdiklis"
description: "Pridėkite balso DI agentą prie bet kurios svetainės keliomis kodo eilutėmis"
---

Įterpiamas ThunderPhone balso valdiklis leidžia jūsų svetainės lankytojams kalbėtis su DI agentu tiesiogiai naršyklėje. Nereikia skambinti telefonu -- naudotojai spusteli mygtuką ir pradeda ThunderPhone palaikomą balso pokalbį realiuoju laiku.

Valdiklis rodomas kaip stiklo efekto juosta, prisitaikanti prie šviesių ir tamsių temų, su tinkinamomis akcento spalvomis ir padėtimi. Jis platinamas kaip `@thunderphone/widget` npm paketas ir taip pat pasiekiamas per CDN aplinkoms be paketų rinkiklio.

<Frame>
  <img src="/images/widget-showcase.png" alt="ThunderPhone valdiklis šviesioje ir tamsioje temose su įvairiomis akcento spalvomis" />
</Frame>

## Būtinosios sąlygos

Prieš įterpdami valdiklį, atlikite šiuos tris veiksmus [ThunderPhone valdymo skydelyje](https://app.thunderphone.com):

<Steps>
<Step title="Sukurkite viešinamą API raktą">
  Valdymo skydelio nustatymuose eikite į **Kūrėjai** ir sukurkite viešinamą raktą. Viešinami raktai prasideda `pk_live_` ir juos saugu įtraukti į kliento pusės kodą.
</Step>

<Step title="Sukonfigūruokite leidžiamus domenus">
  Tuose pačiuose kūrėjų nustatymuose pridėkite domenus, kuriuose bus įterptas valdiklis. Kuriant visada leidžiama naudoti `localhost`. Palaikomi pakaitos simboliai, pvz., `*.example.com`.
</Step>

<Step title="Sukurkite žiniatinklio valdiklį">
  Valdymo skydelyje eikite į **Žiniatinklio valdikliai** ir sukurkite valdiklį. Pasirinkite agentą, kurį norite pateikti, ir naudotiną viešinamą raktą. Agentas automatiškai nustatomas pagal jūsų viešinamo rakto konfigūraciją.
</Step>
</Steps>

<Warning>
  Viešinami raktai (`pk_live_...`) **nėra** tas pats, kas jūsų slapti API prieigos raktai. Viešinami raktai skirti naudoti kliento pusėje ir apribojami valdiklio seansais jūsų leidžiamuose domenuose. Niekada nenaudokite slapto API prieigos rakto kliento pusės kode.
</Warning>

---

## Greita pradžia

Įdiekite paketą:

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

Įtraukite valdiklį į savo programą:

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

Viskas. Jūsų naudotojai matys stiklo efekto skambučių juostą, kuri vienu spustelėjimu sujungs juos su jūsų DI agentu.

---

## Tinkinimas

Valdiklis turi keturias išvaizdos ypatybes:

| Ypatybė | Numatytoji reikšmė | Aprašymas |
|------|---------|-------------|
| `theme` | `'light'` | `'light'` baltam stiklui, `'dark'` tamsiam stiklui |
| `primaryColor` | `'#000000'` (šviesi) / `'#ffffff'` (tamsi) | Akcento spalva pradžios mygtukui, bangos formai ir prisijungimo indikatoriui |
| `title` | `'Voice assistant'` | Valdiklyje rodomas tekstas |
| `position` | `'bottom-right'` | Peržiūros srities kampas: `'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>

Dar trys ypatybės tinkina seansą, o ne išvaizdą -- visos jos perduodamos seanso užklausai pradedant skambutį:

| Ypatybė | Aprašymas |
|------|-------------|
| `language` | Kalbos nepaisymo nustatymas kiekvienam seansui -- kodas arba lokalė, pvz., `en`, `es` arba `fr-FR` |
| `voice` | Balso nepaisymo nustatymas kiekvienam seansui -- balso pavadinimas, pvz., `maria` |
| `context` | Agentui perduodamas faktinis puslapio arba svetainės kontekstas (serverio pusėje sutrumpinamas iki 12 000 simbolių) |

Visą ypatybių lentelę rasite [React komponento nuorodoje](/lt/widget/react).

Jei norite visiškai pritaikytos sąsajos, naudokite [begalvę kablio funkciją](/lt/widget/headless-hook), kad valdytumėte balso seansą kurdami savo sąsają. Kablio funkcija pateikia garso lygius realiuoju laiku, skirtus į garsą reaguojančioms vizualizacijoms kurti.

---

## Integravimo parinktys

Pasirinkite integravimo būdą, tinkantį jūsų technologijų rinkiniui:

<CardGroup cols={3}>
  <Card title="React komponentas" icon="react" href="/lt/widget/react">
    Iš anksto sukurtas vartotojo sąsajos komponentas su integruotais skambučio valdikliais ir būsenos rodiniu. Importuokite, perduokite rekvizitus ir viskas.
  </Card>
  <Card title="Headless kabliukas" icon="code" href="/lt/widget/headless-hook">
    Visiška vartotojo sąsajos kontrolė. Kabliukas `useThunderPhone` valdo balso sesiją, o jūs kuriate savo sąsają.
  </Card>
  <Card title="CDN / scenarijaus žyma" icon="globe" href="/lt/widget/cdn-script-tag">
    Paketo rinkiklis nereikalingas. Įkelkite valdiklį naudodami scenarijaus žymą statinėms svetainėms, WordPress ir kitoms ne React aplinkoms.
  </Card>
</CardGroup>

---

## Stilius

Valdiklis pateikiamas su integruotomis šviesia ir tamsia temomis, valdomomis per rekvizitą `theme`, bei akcento spalva, valdoma per rekvizitą `primaryColor`. Jei reikia išsamesnio tinkinimo, galite perrašyti CSS pasirinktines ypatybes ir klases. Išsamiau žr. [stiliaus vadove](/lt/widget/styling).

<Note>
  Reikia pagalbos? Susisiekite su mumis: [support@thunderphone.com](mailto:support@thunderphone.com)
</Note>