> ## 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.

# Iegultams balss logrīks

> 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="https://mintcdn.com/thunderphone/4XhPaCl4RGfyS7_M/images/widget-showcase.png?fit=max&auto=format&n=4XhPaCl4RGfyS7_M&q=85&s=17fea4fe853f3548b9b2628c9d4c4fc0" alt="ThunderPhone widget in light and dark themes with various accent colors" width="1200" height="800" data-path="images/widget-showcase.png" />
</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 publicējamu API atslēgu">
    Paneļa iestatījumos atveriet sadaļu **Izstrādātāji** un izveidojiet publicējamu atslēgu. Publicējamās atslēgas sākas ar `pk_live_`, un tās ir droši iekļaut klienta puses kodā.
  </Step>

  <Step title="Konfigurējiet atļautos domēnus">
    Tajos pašos Izstrādātāju iestatījumos pievienojiet domēnus, kuros tiks iegults logrīks. Izstrādei vienmēr ir atļauts `localhost`. Tiek atbalstītas aizstājējzīmes (piemēram, `*.example.com`).
  </Step>

  <Step title="Izveidojiet tīmekļa logrīku">
    Panelī atveriet sadaļu **Tīmekļa logrīki** un izveidojiet logrīku. Atlasiet balss aģentu, kuru vēlaties piedāvāt, un izmantojamo publicējamo atslēgu. Balss aģents tiek automātiski noteikts no jūsu publicējamās atslēgas konfigurācijas.
  </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>

***

## Ātrais sākums

Instalējiet pakotni:

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

Pievienojiet logrīku savai lietotnei:

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

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) 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>

Vēl trīs rekvizīti pielāgo sesiju, nevis izskatu — visi tiek pārsūtīti uz sesijas pieprasījumu, kad sākas zvans:

| 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.

***

## 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>