---
title: "Iegultams balss logrīks"
description: "Pievienojiet balss AI aģentu jebkurai vietnei, izmantojot dažas koda rindas"
---

ThunderPhone iegulstamais balss logrīks ļauj jūsu vietnes apmeklētājiem sarunāties ar balss aģentu tieši pārlūkprogrammā. Tālruņa zvans nav nepieciešams — lietotāji noklikšķina uz pogas un sāk reāllaika balss sarunu, ko nodrošina ThunderPhone.

Logrīks tiek attēlots kā stiklam līdzīga josla, kas pielāgojas gaišajām un tumšajām tēmām, ar pielāgojamām akcenta krāsām un izvietojumu. Tas tiek izplatīts kā `@thunderphone/widget` npm pakotne un ir pieejams arī, izmantojot CDN vidēs bez pakotņu komplektētāja.

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

## Priekšnosacījumi

Pirms logrīka iegulšanas izpildiet šīs trīs darbības [ThunderPhone panelī](https://app.thunderphone.com):

<Steps>
<Step title="Izveidojiet tīmekļa logrīku">
  Informācijas panelī atveriet sadaļu **Tīmekļa logrīki** un izveidojiet logrīku. Atlasiet balss aģentu, kuru vēlaties padarīt pieejamu. Katram logrīkam ir sava publicējamā atslēga (`pk_live_...`), kuru ir droši iekļaut klienta puses kodā; balss aģents tiek noteikts pēc atslēgas.
</Step>

<Step title="Konfigurējiet atļautos domēnus">
  Tajā pašā logrīkā pievienojiet domēnus, kuros tas tiks iegults. Tiek atbalstītas aizstājējzīmes (piemēram, `*.example.com`). Šis saraksts neļauj logrīkam darboties, ja kāds nokopē jūsu atslēgu uz citu vietni; tā nav autentifikācija, jo skripts ārpus pārlūka var nosūtīt jebkuru `Origin` galveni. `localhost` ražošanas vidē netiek atļauts automātiski: pievienojiet to sarakstam, lai lokāli testētu pret ražošanas API.
</Step>

<Step title="Izvēlieties pārlūka pārrakstīšanas iestatījumus">
  Ja jūsu lapa iestata `language`, `voice` vai `context`, ieslēdziet katru no tiem sadaļā **Pārlūka pārrakstīšanas iestatījumi**. Jauni logrīki nepieņem nevienu no tiem, un sesijas pieprasījums ar izslēgtu iestatījumu neizdodas ar `400 override_not_allowed`. Skatiet [Pārlūka pārrakstīšanas iestatījumi](/lv/guides/embed-web-widget).
</Step>
</Steps>

<Warning>
  Publicējamās atslēgas (`pk_live_...`) **nav** tas pats, kas jūsu slepenie API marķieri. Publicējamās atslēgas ir paredzētas lietošanai klienta pusē un ir ierobežotas ar logrīka sesijām jūsu atļautajos domēnos. Nekad neizmantojiet savu slepeno API marķieri klienta puses kodā.
</Warning>

<Note>
  Logrīka sesijas pēc noklusējuma beidzas pēc 30 minūtēm vai agrāk, ja balss aģenta maksimālais zvana ilgums ir īsāks. Mainiet ierobežojumu katrai atslēgai, izmantojot `max_call_duration_seconds` [publicējamajā atslēgā](/api-reference/publishable-keys) (līdz 6 stundām), vai iestatiet to uz `null`, lai izmantotu balss aģenta ierobežojumu.
</Note>

---

## Ātrais sākums

Instalējiet pakotni:

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

Pievienojiet logrīku savai lietotnei:

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

Tas arī viss. Jūsu lietotāji redzēs stiklam līdzīgu zvana joslu, kas ar vienu klikšķi savienos viņus ar jūsu balss aģentu.

---

## Pielāgošana

Logrīkam ir četri izskata rekvizīti:

| Rekvizīts | Noklusējums | Apraksts |
|------|---------|-------------|
| `theme` | `'light'` | `'light'` baltam stikla efektam, `'dark'` tumšam stikla efektam |
| `primaryColor` | `'#000000'` (gaiša) / `'#ffffff'` (tumša) | Akcenta krāsa sākšanas pogai, viļņu formai un savienojuma indikatoram |
| `title` | `'Voice assistant'` | Logrīkā parādāmais teksts |
| `position` | `'bottom-right'` | Skata apgabala stūris: `'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>

Vēl trīs parametri pielāgo sesiju, nevis izskatu — visi tiek pārsūtīti sesijas pieprasījumam, kad sākas zvans. Katrs darbojas tikai tad, ja logrīka publicējamā atslēga to atļauj sadaļā **Pārlūka pārrakstījumi**; pretējā gadījumā sesijas pieprasījums neizdodas ar `400 override_not_allowed`:

| Rekvizīts | Apraksts |
|------|-------------|
| `language` | Sesijas valodas ignorēšana — kods vai lokalizācija, piemēram, `en`, `es` vai `fr-FR` |
| `voice` | Sesijas balss ignorēšana — balss nosaukums, piemēram, `maria` |
| `context` | Balss aģentam nodots faktiskais lapas vai vietnes konteksts (servera pusē saīsināts līdz 12 000 rakstzīmēm) |

Pilnu rekvizītu tabulu skatiet [React komponenta atsaucē](/lv/widget/react).

Lai izveidotu pilnībā pielāgotu lietotāja saskarni, izmantojiet [headless āķi](/lv/widget/headless-hook), lai pārvaldītu balss sesiju, kamēr veidojat savu saskarni. Āķis nodrošina reāllaika audio līmeņus audio reaģējošu vizualizāciju veidošanai.

Katra logrīka saruna ir zvans. Tā tiek ieskaitīta jūsu organizācijas [vienlaicīgo zvanu limitā](/api-reference/introduction#call-limits) (pēc noklusējuma 20 notiekoši zvani, kopīgs ar tālruņa un citiem zvaniem) un logrīka limitā — 25 aktīvas sesijas (vai jūsu vienlaicīgo zvanu limitā, ja tas ir lielāks). Sasniedzot jebkuru no limitiem, jaunu sarunu nevar sākt, kamēr nav beidzies kāds zvans.

---

## Integrācijas iespējas

Izvēlieties integrācijas metodi, kas atbilst jūsu tehnoloģiju stekam:

<CardGroup cols={3}>
  <Card title="React komponents" icon="react" href="/lv/widget/react">
    Iepriekš izveidots lietotāja saskarnes komponents ar iebūvētām zvanu vadīklām un statusa attēlojumu. Importējiet, nododiet rekvizītus, un gatavs.
  </Card>
  <Card title="Headless āķis" icon="code" href="/lv/widget/headless-hook">
    Pilnīga kontrole pār lietotāja saskarni. `useThunderPhone` āķis pārvalda balss sesiju, kamēr jūs veidojat savu saskarni.
  </Card>
  <Card title="CDN / skripta tags" icon="globe" href="/lv/widget/cdn-script-tag">
    Nav nepieciešams komplektētājs. Ielādējiet logrīku, izmantojot skripta tagu, statiskām vietnēm, WordPress un citām vidēm, kas nav React.
  </Card>
</CardGroup>

---

## Stils

Logrīkam ir iebūvētas gaišā un tumšā tēma, ko kontrolē ar `theme` rekvizītu, kā arī akcenta krāsa, ko kontrolē ar `primaryColor` rekvizītu. Plašākai pielāgošanai varat pārrakstīt CSS pielāgotās īpašības un klases. Detalizētu informāciju skatiet [stilu ceļvedī](/lv/widget/styling).

<Note>
  Nepieciešama palīdzība? Sazinieties ar mums: [support@thunderphone.com](mailto:support@thunderphone.com)
</Note>